Discussion :

[Hell]

Bonjour

J'ai une page avec 3 colonnes avec :
- un premier menu à gauche
- un second menu tout à droite
- et enfin une partie contenu qui se situe entre les deux menus.

J'utilise donc une mise en page à l'aide de div.

Normalement je suis censé avoir un écart de 15 pixels entre mon menu qui se situe à gauche et ma partie du milieu et 15 pixels entre mon menu qui se situe à droite et ma partie du milieu.
Or la j'ai un écart de 15 pixels et de 16 pixels sur la droite

Je comprends pas d'ou vient ce pixel supplémentaire, une idée?
Merci d'avance

PS : Mon code se situe en pièce jointe.

[FoxLeRenard]

Bonjour,
en rajoutant le BODY absent, je n'ais aucune erreur de type nbrde pixels,
j'ais mesuré la page pour control

[Hell]

Bonjour
Merci d'avoir essayé. C'est vrai que j'avais oublié le body de la page
Mais par contre avec ou sans, j'ai toujours ce pixel en trop avec Firefox 3.5



Les deux traits oranges ont la même taille, le 2e trait orange est censé toucher la bordure de l'autre bloc

Sous quel navigateur avais tu testé?

[FoxLeRenard]

Bonjour
Sous quel navigateur avais tu testé?

par exemple IE7

[emie7]

Bonjour,

J'ai jeté un coup d'oeuil sur ton code CSS. Il ne faut pas donner de grands margin ou padding car ça donne pas le même résultat dans les navigateurs.

Pour centrer ton bloc du milieu tu peux faire comme suit: (L'ordre des div de gauche à droite)
- Code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div class="page">
	<div class="menu1">	
		<ul class="tableau_menuv2">
		<li><a href="">Menu</a></li>
		<li>- <a href="">Lien1</a></li>
		<li>- <a href="">Lien2</a></li>
		<li>- <a href="">Lien3</a></li>
		<li>- <a href="">Lien4</a></li>
		</ul>
	</div>
<div class="pagemilieu"> 
   <div id ="contenu">
	blabla
   </div>
</div>
<div class="menu2">	
		<ul class="tableau_menuv2">
		<li><a href="">Menu</a></li>
		<li>- <a href="">Lien1</a></li>
		<li>- <a href="">Lien2</a></li>
		<li>- <a href="">Lien3</a></li>
		<li>- <a href="">Lien4</a></li>
		</ul>
	</div>

- Code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.menu1 {	
	width: 211px;
	border: 0px solid green;
	float: left;
}

.menu2 {	
	width: 211px;
	border: 0px solid green;
	float: left;	
}

.pagemilieu {	
        float: left;	
}
#contenu {
      margin: 0 auto; /* Pour centrer le bloc contenu dans le bloc page milieu*/
      background-color:white;
      border: 0px solid red;
}

[Macmillenium]

Bonsoir,

Dans ton code, il serait préférable de conférer à .pagemilieu un nouveau contexte de formatage block via overflow:hidden afin de déterminer sa position par rapport aux deux flottants.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.pagemilieu {	
    /* margin-left: 226px; */
    /* margin-right: 226px;  */	
    overflow:hidden;
    background-color:white;
    border: 0px solid red;
}

Sous IE6, les 3px Gap apparaissent => la solution dans ce topic.

Il ne faut pas donner de grands margin ou padding car ça donne pas le même résultat dans les navigateurs.

Exceptés IE6/IE7/Opéra7 avec leur modèle de boite de Microsoft en mode Quirks, IE6 avec ses 3px Gap et la double marge, les navigateurs interprètent margin et padding de la même manière.

[Hell]

Merci beaucoup emie7, je savais pas que ça pouvait causer ce genre de problème.

Ca fonctionne mais la mise en page ne correspond plus à ce que je souhaitais avoir, à savoir deux menus de 211px, une partie "contenu" utilisant l'espace restant et avec une séparation de 15 pixels entre mon bloc du milieu et mes menus

Edit : je viens de voir ton message Macmillenium, merci
Je viens d'essayer, malheureusement j'ai toujours mon pixel en trop dans la séparation entre la partie "contenu" et le menu situé à droite

[Macmillenium]

• Attribue un overflow:hidden à .page pour englober ses enfants flottants;
• Transfère les boder:1px solid black que tu as sur .tableau_menuv2 vers .menu1 et .menu2 et supprime les border:0 solid green;;
• Rajoute un padding:0 15px sur .pagemilieu et supprime les margin-left:15px et margin-right:15px.

[Hell]

Merci beaucoup, ça marche