26666 sujets

CSS et mise en forme, CSS3

tout les bloc centaux de mon design se retrouve en bas de la page sous ie alors que dans les autres navigateurs tout baigne y'a t'il une solution???

mon design (html et css ) :
http://fxdarkplayer.free.fr/design/


HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" >
<link rel="StyleSheet" type="text/css" href="style.css" >
<title></title>
</head>
<body>
<div id="header">
</div>
<div id="menuhaut">

<a href="#" class="horizon1"></a>
<a href="#" class="horizon2"></a>
<a href="#" class="horizon3"></a>
<a href="#" class="horizon4"></a>
<a href="#" class="horizon5"></a>
<a href="#" class="horizon6"></a>
<a href="#" class="horizon7"></a>
<a href="#" class="horizon8"></a>
<a href="#" class="horizon9"></a>
<a href="#" class="horizon10"></a>
<a href="#" class="horizon11"></a>

</div>
<div id="contenu">
<div id="menugauche">
<img src="http://lewebzine.celeonet.fr/universal/images/recherche.gif" width="65" height="9" alt=""  vspace="5"><br />
<input type="text" name="a" size="11" maxlength="50">
<br />

	<a href="javascript:opensearch()" onMouseOver="Rollover('13','on');" onMouseOut="Rollover('13','off');"><img src="http://lewebzine.celeonet.fr/universal/images/nav13.gif" width="94" height="7" alt="Recherche avancée"  vspace="5" name="nav13"></a><br />
	<a href="#" class="nav1" ></a>
	<a href="#" class="nav2" ></a>
	<a href="#" class="nav3" ></a>
	<a href="#" class="nav4" ></a>
	<a href="#" class="nav5" ></a>
	<a href="#" class="nav6" ></a>
	<a href="#" class="nav7" ></a>	
</div>
<div id="blocs">
<div id="bloc1"><h2>bloc 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,
					wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque
					tincidunt porttitor nisl. Sed ipsum. Donec vitae ante. SuspendRollovere lacus augue, venenatis vel,
					posuere vitae, hendrerit et, erat. Pellentesque luctus. Aenean nibh. Proin ut wisi et metus
					imperdiet porttitor. SuspendRollovere ipsum.
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,</p>
</div>
<div class="blocss">
<div id="bloc2"><h2>bloc 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,
					wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque
					tincidunt porttitor nisl. Sed ipsum. Donec vitae ante. SuspendRollovere lacus augue, venenatis vel,
					posuere vitae, hendrerit et, erat. Pellentesque luctus. Aenean nibh. Proin ut wisi et metus
					imperdiet porttitor. SuspendRollovere ipsum.
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,</p>
<br /><br /><hr size="1" color="#000000"><br /><br />
					<p>wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque
					tincidunt porttitor nisl. Sed ipsum. Donec vitae ante. SuspendRollovere lacus augue, venenatis vel,
					posuere vitae, hendrerit et, erat. Pellentesque luctus. Aenean nibh. Proin ut wisi et metus
					imperdiet porttitor. SuspendRollovere ipsum.</p>
</p>
</div>
<div id="bloc3"><h2>bloc 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,
					wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque
 augue, vene</p>
</div>
<div id="bloc4"><h2>bloc4</h2>
<p>Complètement zinzins !</p>
</div>
</div>
<div class="blocss">
<div id="bloc5"><h2>bloc 5</h2>
<p>Shoutbox</p>
</div>
<div id="bloc6"><h2>bloc 6</h2>
<p>Derniers messages</p>
</div>
</div>
</div>

</div>
<div id="bas">
<center><p>
<a href="#" onclick='window.open("boite_id.html","boite","width=617,height=580,menubar=0,scrollbars=1,resizable=0,toolbar=0");'>Boite a idées</a>
<a href="#" onclick='window.open("thanks.html","Thanks","width=617,height=580,menubar=0,scrollbars=1,resizable=0,toolbar=0");'>Remerciement</a>
<a href="#" onclick='window.open("rules.html","rules","width=617,height=580,menubar=0,scrollbars=1,resizable=0,toolbar=0");'>Condition d'usage</a></p></center>
</div>		
</body>
</html>


CSS:
p {
font-family : Arial, helvetica;
font-size : 11px;
color : #666666;
line-height : 18px;
}
#header {
width : 779px;
height : 124px;
background : url(images/header.jpg) no-repeat;
}
#menuhaut {
width : 781px;
}
#contenu {
width : 781px;
}
#menugauche {
float : left;
border : 1px solid #999999;
border-right : 0;
border-left : 0;
width : 179px;
}
#blocs {
width : 602px;
margin-top : 29px;
margin-left : 179px;
}
#bloc1 {
background-color : #ffffd2;
border : 1px solid #999999;
padding-left : 10px;
padding-right : 20px;
padding-top : 40px;
width : 569px;
}
.blocss {
width : 603px;
padding : 0;
border : 0;
}
#bloc2 {
background-color : #ffd9d9;
border : 1px solid #999999;
border-right : 0;
border-top : 0;
float : left;
height : 611px;
padding-left : 10px;
width : 40%;
}
#bloc3 {
background-color : #d7ffdd;
border : 1px solid #999999;
border-top : 0;
height : 335px;
width : 56%;
padding-left : 10px;
float : left;
}
#bloc4 {
background-color : #ffffaf;
border : 1px solid #999999;
border-top : 0;
float : left;
height : 275px;
padding-left : 10px;
width : 56%;
}
#bloc5 {
background-color : #b0b3ff;
border : 1px solid #999999;
border-top : 0;
border-right : 0;
float : left;
height : 365px;
padding-left : 10px;
width : 53%;
}
#bloc6 {
background-color : #d2ffd8;
border : 1px solid #999999;
border-top : 0;
float : left;
height : 365px;
padding-left : 10px;
width : 43%;
}
#bas {
background-image : url(images/footer2.jpg);
float : left;
height : 33px;
width : 779px;
border-right : 1px solid #999999;
border-left : 1px solid #999999;
}
[...](la suite c'est des rolls over)

Modifié par fxldm (21 Sep 2005 - 00:01)
Bonjour fxldm.

On a beaucoup de peine à lire ton code. Tu devrais optimiser ta feuille de style, il y a beaucoup de propriétés répétées inutilement.

Tu aurais avantage à lire : Écrire des feuilles de style efficaces.

Les propriétés déclarées sur une seule et même ligne sont très difficiles à lires :

#bloc1 {background-color: #ffffd2; border: 1px solid #999999; padding-left: 10px; padding-right: 20px; padding-top: 40px ; width :569px}

Nous, on préfère de loin un code formaté comme ceci :

#bloc1 {
	background-color: #ffffd2;
	border: 1px solid #999999;
	padding-left: 10px;
	padding-right: 20px;
	padding-top: 40px ;
	width :569px
}

Et puis si tu donnais un titre <h2>Bloc 1</h2>, <h2>Bloc 3</h2>, etc. pour chacun de tes blocs, on s'y retrouverait mieux.

Par exemple :

<div id="bloc4">
	<h2>Bloc 4</h2>
	<p>Complètement zinzins !</p>
</div>

Parce que c'est souvent plus difficile d'exposer un problème clairement que de trouver une solution au dit problème.

<edit />
En fait pour ta feuille de style, c'est très simple, t'as qu'à suivre l'exemple quand tu valides ta page : Résultats de la validation.

Au passage, tu peux corriger les quelques avertissements (sans rapport avec ton présent problème).

Un simple copier-coller des résultats donne ceci après nettoyage des caractères indésirables (les puces) :

[CSS supprimé par Stephan pour faciliter la lecture]

Ça va nous aider à t'aider Smiley cligne
Modifié par Stephan (18 Sep 2005 - 22:13)
merci de tes conseil c'est vrai que j'ai pris la mauvaise habitude d'ecrire les css en ligne et que c'est par très lisible Smiley confus . je vais essayé de corrrigé les avertisement et d'optimisé mon code
(j'espere que sa iras mieu apres )

FX
Dans ton <div id="bloc2"> il y a un </p> qui n'est pas ouvert. Il faut l'enlever.
En HTML 4.01, les éléments vides ne doivent pas être fermés.
Par conséquent, tu dois écrire <br> et non <br />.

Je ne vois aucune utilité aux <div class="blocss">. Ça surcharge la structure inutilement. En plus, ils ont 603px de large et doivent tenir dans 602px.

Le <div id="bloc1"> n'a pas besoin de largeur spécifiée. Par défaut il occupera 100% de l'espace disponible (602px).

Il est difficile de concilier largeur en pourcentage et padding en pixels. Par exemple, le <div id="bloc2"> fait 40% avec un padding-left: 10px. Puisque le conteneur est fixe (602px), le bloc fera toujours 240px (250px padding inclus).

Les blocs suivants (bloc3 et bloc4) n'ont pas besoin de largeur spécifiée (puisqu'ils occuperont 100% de l'espace disponible). Le float est également inutile. Tout ce qu'il faut est un margin-left de 250px.

Même raisonnement pour pour les blocs suivant. Le <div id="bloc5"> devrait avoir une largeur de 319px (53%) et le <div id="bloc6"> (auquel on a enlevé le float) devrait avoir un margin-left de 329px.

Pour être certain de replacer le footer (#bas) dans le flux, un clear: both; doit lui être assigné. Le float: left; est inutile sur le footer.

Après corrections, ta feuille de style devrait ressembler à ça :

#blocs {
width : 602px;
margin : 29px 0 0 179px
}
#bloc1 {
background-color : #ffffd2;
padding : 40px 20px 0 10px;
}
/* .blocss {
width : 603px;
padding : 0;
border : 0;
} */
#bloc2 {
background-color : #ffd9d9;
border-width : 0 0 1px 1px;
float : left;
height : 611px;
padding-left : 10px;
width : 240px;
}
#bloc3 {
background-color : #d7ffdd;
border-top : 0;
height : 335px;
margin-left: 250px;
padding-left : 10px;
}
#bloc4 {
background-color : #ffffaf;
border-top : 0;
height : 275px;
margin-left: 250px;
padding-left : 10px;
}
#bloc5 {
background-color : #b0b3ff;
border-width : 0 0 1px 1px;
float : left;
height : 365px;
padding-left : 10px;
width : 319px;
}
#bloc6 {
background-color : #d2ffd8;
border-top : 0;
height : 365px;
margin-left : 329px;
padding-left : 10px;
}
#bas {
background-image : url(images/footer2.jpg);
clear: both;
height : 33px;
width : 779px;
border-width : 0 1px 0 1px;
}

Tout ça en théorie, bien sûr !
Modifié par Stephan (18 Sep 2005 - 19:25)
ouai tu a raison pour
.blocss c'etait inutile j'avais mis sa car j'arrivais pas autrement sinon tu va voir que avec ton code ya un problème d'affichage (différent selon IE ou firefox) au niveau des bloc : il se touche plus je v regardé t longueur et voir si c juste une erreur de ce coté la sinon y tjs le mm prob avec IE et l'ensemble des bloc.sinon je vais corrigé mes <br /> voila

Merci bcp de ton travail
FX

PS: trouve tu mon css optimisé mnt?
salut,
et puis tu as ces 3px fantome de IE qui mette le bazar (ta boite flottante)
de plus ton bloc1 calé a 602 px, passe a 603 px sous IE et tu te retrouve avec grosso-modo 4 pixels manquant pour que ton bloc se palce a cote de ton menu

en faisant l'experience de modifier ainsi ton css, tu peut t'en apercevoir:

#blocs {
width : 602px;
margin : 29px 0 0 179px!important;/* pour que ton css soit pris en compte par tous sauf IE */
margin-right:-4px;/*les nouvelles valeurs pour IE on recupere les 4 px manquant en debordant a droite de 4 px */
margin-top:0;/* pour realigner en hauteur ? */
}

ça a juste l'effet de remonter l'ensemble qui ne vient plus "percuter" ton element flottant sous IE.
3 pixels s'ajoute donc a tes quelques erreurs, et tu n'y peut rien, sauf les prendre en compte .

(edit: de plus sous firefoxe, lorsque dans un div par exemple, la premiere balise est de type block, comme les titres (h1,h etc...) et les paragraphes (p) il t'ajoute une marge haute et basse qui correspond a un saut de ligne. tu dois alors dans ce cas remettre les marges hautes et basse a zero avec l'attributs "margin". ce bug semble systematique sous ff, et oui y'a pas que IE qui nous embete Smiley smile )
a plus
Modifié par gcyrillus (18 Sep 2005 - 21:33)
fxldm a écrit :

il se touche plus je v regardé t longueur et voir si c juste une erreur de ce coté la sinon y tjs le mm prob avec IE et l'ensemble des bloc.sinon je vais corrigé mes <br />


h2 {margin-top: 0;}

Un petit effort sur le français s'il te plaît Smiley murf

<edit />
À bien y penser, il est inutile de spécifier la largeur de ton <div id="blocs">, celui si occupant par défaut le reste de l'espace disponible.

#blocs {
/* width : 602px; */
margin : 29px 0 0 179px
}

Et puis oublie cette histoire de pixels fantômes. Il y a certainement moyen de fixer ton design sans y aller à coup de hack !important et de marges négatives.
Modifié par Stephan (18 Sep 2005 - 21:31)
salut,

se debarasser des 3 px de IE , ma façon de faire est de les ajouter dans le margin: margin-left:182px;
le "hack etait la pour demontrer qu'il etait bien la, maintenant la solution d'une feuille de styles appeler en "commentaires est celle que je prefere.

une demo de ce probleme : http://www.cssplay.co.uk/boxes/floatfix.html

a plus, c

ps comprendre pourquoi ça marche ou pas est important, le css et xhtml validé ne fais pas tout, comprendre c'est savoir choisir.
je vais voir ailleurs maintenant Smiley smile
Modifié par gcyrillus (18 Sep 2005 - 21:39)
gcyrillus a écrit :

(edit: de plus sous firefoxe, lorsque dans un div par exemple, la premiere balise est de type block, comme les titres (h1,h etc...) et les paragraphes (p) il t'ajoute une marge haute et basse qui correspond a un saut de ligne. tu dois alors dans ce cas remettre les marges hautes et basse a zero avec l'attributs "margin". ce bug semble systematique sous ff, et oui y'a pas que IE qui nous embete Smiley smile )

Non. Tu n'y es pas du tout. C'est un comportement normal dû à la fusion des marges et Firefox réagit exactement comme on s'y attend. C'est encore IE qui ne respecte pas la norme.
Recommandation CSS2 du W3C a écrit :

Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes.

http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins

Et c'est exactement le phénomène qui se produit avec les blocs 3, 4 et 6 (comparer avec les blocs 2 et 5). La marge supérieure (par défaut) du <h2> (type bloc) fusionne avec la marge supérieure du <div> (nulle) ce qui donne pour résultat une marge égale à la marge supérieure du <h2>, mais au dessus du <div>.

upload/196-fusion.png

Dans l'image ci-haut, le bloc 2 échappe à la règle parce que positionné en flottant (pas dans le flux normal) par opposition au bloc 3 qui lui subit la fusion des marges comme prévu.

Ce qui est fixé par :

h2 {margin-top: 0;}

Modifié par Stephan (18 Sep 2005 - 22:09)
j'ai donc modifié mon code comme tu me l'avais dit stephan mais je vois vraiment pas comment remonté de quelque pixel le design autrement que par le hack si tu as une autre solution...

PS : Smiley decu je viens de remarqué ke le footer c'est decalé vers le bas c'est normal???)

#edit : faut croire queje suis totalement blond et que je comprend rien ^^ pour le footer y'a un <p> au debut c'est pour sa qu'il parais decalé Smiley biggrin

##edit les marge interieur sous firefox n'etait pas presente donc j'ai mis un border partout et on dirai qu'il y a eu un fusion des marge mais maintenant sous IE j'ai toujours le probleme de blanc mais en plus j'ai une double marge!! Smiley sweatdrop
Modifié par fxldm (19 Sep 2005 - 18:52)
Ce problème d'espace blanc est dû à l'utilisation des flottant (bug IE).

Pour le contourner sans hack et sans balisage supplémentaire, tu vas devoir passer au positionnement absolu. Note que ça ne va pas fixer ton design (ça va même le briser un peu Smiley biggol ) mais on avisera ensuite (si tu choisis cette façon de faire). L'objectif étant de démontrer que l'on peut contourner proprement ce bug d'IE. Un désavantage du positionnement absolu est de rendre rigide le design, mais dans ton cas, tu as déjà donné des hauteurs fixes alors ça ne change pas grand chose.

L'idée est d'inclure les blocs 3 et 4 à l'intérieur du bloc 2 (puis le bloc 6 dans le bloc 5) le tout sans changer l'ordre de présentation du HTML. Pour ne pas me compliquer inutilement la tâche, j'ai enlevé les bordures. Ça m'a permit de constater que le bloc 2 fait 611px alors que la somme des blocs 3 et 4 est de 610px. Ce pixel supplémentaire est une source potentielle de problème.

Je dois te dire tout de suite qu'avec cette méthode (ou même celle que tu as choisie au départ) tu vas devoir masquer ta feuille de style aux versions 5 d'IE en raison du modèle de boite erronné. En effet, utiliser le plein potentiel de mise en forme d'une boite (margin, padding, border) tout en fixant la largeur de la boite (width) va nous conduire inévitablement vers de graves problèmes de conception.

Ce qui donne donc ceci pour le HTML :

<div id="blocs">

	<div id="bloc1">
		<h2>bloc 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque, wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque tincidunt porttitor nisl. Sed ipsum. Donec vitae ante. SuspendRollovere lacus augue, venenatis vel, posuere vitae, hendrerit et, erat. Pellentesque luctus. Aenean nibh. Proin ut wisi et metus imperdiet porttitor. SuspendRollovere ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,</p>
		<br> <!-- fixe un bug de fusion de marges -->
	</div>

	<div id="bloc2">
		<h2>bloc 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque, wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque tincidunt porttitor nisl. Sed ipsum. Donec vitae ante. SuspendRollovere lacus augue, venenatis vel, posuere vitae, hendrerit et, erat. Pellentesque luctus. Aenean nibh. Proin ut wisi et metus imperdiet porttitor. SuspendRollovere ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque,</p>
		<br><br><hr color="#000000" size="1"><br><br>
			<p>wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque tincidunt porttitor nisl. Sed ipsum. Donec vitae ante. SuspendRollovere lacus augue, venenatis vel, posuere vitae, hendrerit et, erat. Pellentesque luctus. Aenean nibh. Proin ut wisi et metus imperdiet porttitor. SuspendRollovere ipsum.</p>
		<div id="bloc3">
			<h2>bloc 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum. Vestibulum scelerisque, wisi ac ultricies luctus, lectus augue posuere dui, a sollicitudin nunc ante ut tortor. Quisque augue, vene</p>
		</div>
		<div id="bloc4">
			<h2>bloc4</h2>
			<p>Complètement zinzins !</p>
		</div>
	</div>

	<div id="bloc5">
		<h2>bloc 5</h2>
		<p>Shoutbox</p>
		<div id="bloc6">
			<h2>bloc 6</h2>
			<p>Derniers messages</p>
		</div>
	</div>

</div>

Noter le <br> à la fin du bloc 1, moyen rapide de régler certains problèmes de fusion de marges.

Un élément positionné en absolu se positionne par rapport à son parent positionné le plus proche. On va donc donner une position: relative; au blocs 2 et 5 pour pouvoir positionner les autres blocs à l'intérieure de ceux-ci, puis à l'aide de padding-right on va étirer ces deux blocs horizontalement pour réserver de l'espace.

Restera à positionner les blocs 3, 4 et 6 à l'aide du positionnement absolu.

Le CSS :

/*
#menugauche, #bloc1, #bloc2, #bloc3, #bloc4, #bloc5, #bloc6, #bas{
	border : 1px solid #999999;
} */
#menugauche {
	float : left;
	width : 179px;
}
#blocs {
	margin : 29px 0 0 179px
}
#bloc1 {
	background-color : #ffffd2;
	width : 572px;
	padding : 40px 20px 0 10px;
}
#bloc2 {
	background-color : #ffd9d9;
	position: relative;
	height : 610px;
	width : 240px;
	padding-right : 352px; /* les bloc 3 et 4 se positionnent dans ce padding */
	padding-left : 10px;
}
#bloc3 {
	background-color : #d7ffdd;
	position: absolute;
	top: 0;
	right: 0;
	height : 335px;
	width : 332px;
	padding-left : 10px;
}
#bloc4 {
	background-color : #ffffaf;
	position: absolute;
	top: 335px; /* la hauteur du bloc 3 */
	right: 0;
	height : 275px;
	width : 332px;
	padding-left : 10px;
}
#bloc5 {
	background-color : #b0b3ff;
	position: relative;
	height : 365px;
	width : 319px;
	padding-right : 273px; /* le bloc 6 se positionne dans ce padding */
	padding-left : 10px;
}
#bloc6 {
	background-color : #d2ffd8;
	position: absolute;
	top: 0;
	right: 0;
	height : 365px;
	width : 253px;
	padding-left : 10px;
}

Maintenant, si tu rajoutes des bordures, tu vas devoir étirer le conteneur en conséquence.

Tu peux aussi positionner ton menu et l'ensemble de tes blocs en absolu par rapport à la page. Mais l'ensemble donne en général un résultat pas très fluide. Il est encore temps de revoir ton design depuis le début.

Plus simplement, tu pourrais « wrapper » tes blocs 2, 3 et 4 dans un bloc avec la couleur du bloc 2 en background. Et puis, « wrapper » les blocs 5 et 6 dans un bloc avec la couleur du bloc 5 en background. Ça ferait disparaitre ces espaces blancs, mais avec des <div> en plus.

N'oublie pas le <br> à la fin du bloc 1. Il devrait régler ton problème de fusion de marges. Smiley cligne

Voilà, j'espère que ça te donnes des pistes de solutions Smiley smile
fxldm a écrit :

heu...ton script sa fait retour du bug d'origine...

Ouais ben... J'ai spécifié que ça ne fixait pas ton design et que ça allait même le briser un peu. C'est une piste pour régler le problème de l'espace blanc sans balisage superflu, hacks ou autres. En plus, je t'ai proposé une façon plus simple :
Stephan a écrit :

Plus simplement, tu pourrais « wrapper » tes blocs 2, 3 et 4 dans un bloc avec la couleur du bloc 2 en background. Et puis, « wrapper » les blocs 5 et 6 dans un bloc avec la couleur du bloc 5 en background. Ça ferait disparaitre ces espaces blancs, mais avec des <div> en plus.

Alors je soupçonne que tu as simplement copié-collé le code que je t'ai donné et que tu n'as pas lu mes explications Smiley sweatdrop
Modifié par Stephan (20 Sep 2005 - 19:00)
si j'ai lu tes explication mais quand tu disais...brisé le design et que j'ai rien vu sous firefox j'ai pensé que c'etait du tout cuit et pui c'est vrai que j'(ai pas lu très bien les parentèse dans lequelles tu disais
a écrit :
(si tu choisis cette façon de faire)

bon je vai tester la 2nd technique mais je pense qu'elle ne resoudras pas le problème de decalage legèrement vers le bas de mes bloc

#edit : effectivement y'a toujours le problème de decalage
Modifié par fxldm (20 Sep 2005 - 19:28)
Bon. Je vais télécharger l'ensemble de ton design et je regarde ça en local. Smiley rolleyes

<edit />
En passant ces deux valeurs à zéro, j'obtiens un résultat semblable dans IE et Firefox.

#blocs {
/* margin : 29px 0 0 179px; */
margin : 0 0 0 179px;
}
#bloc1 {
background-color : #ffffd2;
/* padding : 40px 20px 0 10px; */
padding : 0 20px 0 10px;
}

Cependant je ne m'explique pas pourquoi le padding-top: 40px; n'est pas pris en compte dans Firefox Smiley confus

<edit />
Ok. On ne voit pas le padding-top: 40px; dans firefox parce qu'il passe en dessous du <div id="menuhaut">. Ce qui est réglé en appliquant un clear: both; au <div id="contenu">.

Donc tu donnes une valeur de zéro pour margin-top ici :

#blocs {
/* margin : 29px 0 0 179px; */
margin : 0 0 0 179px;
}

Et tu appliques un clear: both; ici :

#contenu {
clear: both;
width : 781px;
}

Ça doit pas être loin de la vérité Smiley murf
Modifié par Stephan (20 Sep 2005 - 23:05)
oh! p****! sa marche!!!! c'est génial!!!! merci beaucoup!!! Smiley lol
(mais enfaite c'est quoi "clear")

je te remercie de tout tes effort sa fait des semaine que je travaillait (tout seul )sur ce design ^^

merci encore encore encore
bonsoir
FX
PS: evidement je reste sur le forum! Smiley cligne (je comprend très bien que le problème de self-service j'espere pouvoir aidé des personne comme on ma aidé )
Modifié par fxldm (20 Sep 2005 - 23:58)