Discussion :

[FotoXe33]

Bonjour à tous,

Voila, j'ai une page avec entre autre 3 div centrales. Sur les deux du côté, j'ai en haut des titre (avec une class). Dans cette class, je met donc une largeur et un padding. L'ennui, c'est que sur la div de droite, pas de problème, mais sur celle de gauche, le titre augmente en largeur de la taille du padding ! J'ai donc un titre qui dépasse de mon menu :s

Voici les codes :

HTML =

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="gauche">
	<h3 class="titre_menu">Menu des liens :</h3>
	<p>Du contenu, ...</p>
</div>
<div id="droite">
	<h3 class="titre_menu">Contenu droite</h3>
	<p>Le contenu ici blablabla...</p>
</div>
<!-- Le reste de la page... -->

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
21
22
23
24
25
26
27
 
/* Menu de gauche */
#gauche {
	float: left;
	width: 200px;
	padding: 0;
	margin: 0;
}
 
/* menu a droite */
#droite {
	float: right;
	width: 200px;
	padding: 0;
	margin: 0;
}
 
/* La class en question */
#gauche .titre_menu, #droite .titre_menu{
	background: black;
	color: white;
	width: 100%;
	margin: 10px 0;
	font-size: 12px;
	padding: 2px 0 2px 10px;
	display: block;
}

D'avance merci...

[Macmillenium]

Bonjour,

On obtient la largeur de la boîte en additionnant les marges, bordures et espacements gauches et droites avec le largeur du contenu. De même pour la hauteur de la boîte, en additionnant les marges, bordures et espacement hauts et bas avec la hauteur du contenu.

Le modèle des boites.

[FotoXe33]

Merci pour ta réponse...

Je ne vois pas pourquoi alors l'augmentation de la largeur se ferais que sur une des deux div ! Et comment résoudre cela puisque je suis en pour-cent en en pixel ?

[Macmillenium]

Je ne vois pas pourquoi alors l'augmentation de la largeur se ferais que sur une des deux div !

Si, elle se fait sur les deux

Et comment résoudre cela puisque je suis en pour-cent en en pixel ?

Un élément block (ici H3) occupe par défaut (non flottant, non positionné en absolute ni fixed) toute la largeur disponible dans son conteneur, tu peux donc retirer le width:100% (et le display:block).

[FotoXe33]

Alénouilla !

Merci mille fois !