Coupures dans ma colonne de menu [résolu ?]

Bonjour à tous,

ça fait plusieurs jours que je m'arrache les cheveux avec le problème suivant. Si ça continue, je vais devenir chauve avant le début de l'année 2006 lol

bon, je m'explique, je voudrais positionner dans ma colonne de menu plusieurs blocs pour faire des rubriques de liens. Chaque rubrique est composé d'une 1ère partie où il y a une image à gauche et le titre de la rubrique sous forme de balise h2. La 2ème partie est composée des liens sous forme de balises a.

Actuellement, j'ai codé comme ceci :
Pour la partie xHTML :

<div id="menu_gauche">

    <img src="kit/logo_asnl.gif" id="logo_asnl" alt="Logo de l'ASNL" title="" width="150" height="70" />

<!-- DEBUT DU MENU -->	

	<!-- début des lignes à recopier pour ajouter une rubrique dans le menu -->
	<div class="rubrique">
		
		<div class="rub1"><img src="kit/ballon.gif" alt="" width="40" height="80" class="gau" /><h2>Rubrique 1</h2></div>   <!-- titre de la rubrique -->
		<!-- début des liens -->
			<a href="#page1">Lien 1</a> <!-- ligne à recopier pour ajouter un lien ( vous pouvez aussi supprimer certaines lignes-->
			<a href="#page2">Lien 2</a>
			<a href="#page3">Lien 3</a>
			<a href="#page4">Lien 4</a>
			<a href="#page5">Lien 5</a>
		<!-- fin des liens -->
	</div>

	<!-- début des lignes à recopier pour ajouter une rubrique dans le menu -->
	<div class="rubrique">
		
		<div class="rub2"><img src="kit/ballon.gif" alt="" width="40" height="80" class="gau" /><h2 class="decal">Rubrique 2</h2></div>   <!-- titre de la rubrique -->
		<!-- début des liens -->
			<a href="#page6">Lien 1</a> <!-- ligne à recopier pour ajouter un lien ( vous pouvez aussi supprimer certaines lignes-->
			<a href="#page7">Lien 2</a>
			<a href="#page8">Lien 3</a>
			<a href="#page9">Lien 4</a>
			<a href="#page10">Lien 5</a>
		<!-- fin des liens -->
	</div>
	<!-- fin des lignes à recopier pout ajouter une rubrique dans le menu -->		
</div>

<!-- FIN DU MENU -->	

Pour la partie CSS:

#logo_asnl
{
width:150px;
height:70px;
margin-top:8px;
margin-bottom:12px;
}

#menu_gauche
{
width:150px;
float:left;
margin:0px;
margin-left:8px;
padding:0px;
text-align:center;
}

#menu_gauche .rubrique
{
width:150px;
margin:0px;
padding:0px;
border:0px;
}

#menu_gauche .rubrique .rub1  /* pour le titre de la rubrique */
{
width:143px;
height:80px;
margin:0px;
padding-left:5px;
border:none;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
background-image:url("kit/rub1_onglet.jpg");
background-repeat:no-repeat;
}

#menu_gauche .rubrique .rub2  /* pour le titre de la rubrique */
{
width:143px;
height:80px;
margin:0px;
padding-left:5px;
border:none;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
background-image:url("kit/rub1_onglet2.jpg");
background-repeat:no-repeat;
}

#menu_gauche .rubrique .rub2 .h1 , #menu_gauche .rubrique .rub1 h2 /* pour le titre de la rubrique */
{
width:100px;
margin-left:40px;
margin-top:30px;
margin-bottom:0px;
margin-right:0px;
padding:0px;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
}

#menu_gauche .rubrique .rub1 img , #menu_gauche .rubrique .rub2 img
{
margin:0px;
padding:0px;
border:none;
}

.gau
{
float:left;
}

#menu_gauche .rubrique a
{
display:block;
width:143px;
height:20px;
margin:0px;
padding-left:5px;
border:none;
color:black;
background-image:url("kit/fond_a.jpg"); /* couleur utilisée : #e71818 */
background-repeat:repeat;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-decoration:none;
}
		
#menu_gauche .rubrique a:visited
{
font-family:"Times New Roman", serif;
font-size:1.0em;
text-decoration:none;
color:black;
}
		
#menu_gauche .rubrique a:hover
{
font-family:"Times New Roman", serif;
font-size:1.0em;
text-decoration:overline underline;
color:white;
}

Le gros problème, c'est quand je change la valeur du margin-top pour positionner le titre (#menu_gauche .rubrique .rub2 .h1 , #menu_gauche .rubrique .rub1 h2), ça se positionne bien sous IE mais sous FireFox ça me crée une coupure. En fait, au lieu de me décaler le titre, FireFox me décale tout le bloc !!!!

J'avais essayer une autre méthode avant : pas de float sur l'image et une position relative pour la balise h2. Et je jouais sur les valeurs top et bottom pour positionner le tire dans le bloc mais j'avais l'effet inverse : Ok sous FireFox mais sous IE création d'une coupure

Est-ce que quelqu'un a une solution pour recoller les morceaux ??? Là je ne sais plus quoi faire

Merci d'avance !
Modifié par Pandore (05 Jan 2006 - 22:02)

bon, j'ai reussi à régler le problème en remplaçant :

#menu_gauche .rubrique .rub2 .h1 , #menu_gauche .rubrique .rub1 h2 /* pour le titre de la rubrique */
{
width:100px;
margin-left:40px;
margin-top:30px;
margin-bottom:0px;
margin-right:0px;
padding:0px;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
}

par

#menu_gauche .rubrique .rub2 .h1 , #menu_gauche .rubrique .rub1 h2 /* pour le titre de la rubrique */
{
width:100px;
margin-left:40px;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
padding:0px;
padding-top:35px;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
}

mais bon, j'aimerais quand même comprendre pourquoi en mettant un margin-top à h2, FireFox me décale le bloc conteneur au lieu de h2 ?!

Un peu de technique quoi !

Merci d'avance pour vos explications éclairées

Quoi ??? personne n'a d'idée ???

huummm ... ... peut-être Laurent Denis ou Raphaël ???

Bonjour Pandore

Pandore a écrit :

mais bon, j'aimerais quand même comprendre pourquoi en mettant un margin-top à h2, FireFox me décale le bloc conteneur au lieu de h2 ?!

Fusion des marges verticales. Comportement normal.

CSS2 a écrit :

8.3.1 La fusion des marges

Dans cette spécification, l'expression marges de fusion signifie que les marges adjacentes (sans qu'une aire d'espacement ou de bordure ne les séparent) de deux ou plusieurs boîtes (celles-ci pouvant être l'une à côté de l'autre ou imbriquées), ces marges se combinent pour n'en former qu'une seule.

En CSS2, les marges horizontales ne fusionnent jamais.

Les marges verticales peuvent fusionner entre certaines boîtes :

* 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. Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. Remarque Les boîtes limitrophes peuvent être générées par des éléments qui n'ont aucune parenté en tant que frères ou ancêtres ;
* Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ;
* Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas.

http://www.yoyodesign.org/doc/w3c/css2/box.html#x24

Merci beaucoup pour cette précision stephan !

Conclusion : les marges sont à manier avec beaucoup de précautions ...

La seule solution que j'ai pû trouver, c'est de jouer sur le padding-top au lieu du margin-top
Modifié par Pandore (05 Jan 2006 - 22:03)