28221 sujets

CSS et mise en forme, CSS3

J'ai un problème avec un line-height qui est ignoré par IE :

<ul id="Menu">
 <li id="Menu-Top">
  <ul>
   <li><h2>Accès rapide</h2></li>
   <li><a href="./">Accueil</a></li>
   <li><a href="./forums/">Forums</a></li>
   <li><a href="./guestbook.php">Livre d'or</a></li>
   <li><a href="./contact.php">Contact</a></li>
   <li><a href="./apropos.php">A propos</a></li>
  </ul>
 </li>
 <li id="Menu-Principal">
  <ul>
   <li><h2>Menu</h2></li>
   <li><a href="./classe.php">Présentation de la classe</a></li>
   <li><a href="./galleries.php">Galleries Photos</a></li>
   <li><a href="./emploi-temps.php">Emploi du temps</a></li>
  </ul>
 </li>
</ul>

et


#Menu li ul li + li {
	margin-left:20px;
	line-height:24px;
	}


Sous Firefox, le line-height est bien pris en compte, mais sous IE, j'ai juste un décalage entre le h2 et le 2eme li de chaque sous menu
Modifié le 25 Dec 2004 - 19:57
À première vue, mieux vaut mettre le line-height à 1em et travailler avec les marges.

#Menu li ul li + li {
	margin: 0 0 0.5em 20px;
	line-height:1em;
	}

Tu pourrais songer à refaire ton menu en enlevant 1 niveau d'imbriquation. Tu aurais moins d'embêtements je pense. Smiley cligne
Malheureusement ... encore le même résultat Smiley decu ... J'ai essayé d'enlever le line-height, en m'disant que c'était ca qui pertubait IE, maiiiiis, nan, ca fait pareil ...

Est-ce que ca pourrait venir du fait qu'il y'ait des <a> dans les <li> ?

Sinon, pour le menu, erm, moi j'trouve que c'est plus sémantique, et que c'est une meilleure utilisation ainsi, plutot que d'utiliser un div , puis des ul ...
Kevin a écrit :

Sinon, pour le menu, erm, moi j'trouve que c'est plus sémantique, et que c'est une meilleure utilisation ainsi, plutot que d'utiliser un div , puis des ul ...

Oui et non car tu utilises un élément de liste comme un titre et les listes n'ont pas de notion de titre (même si on peut le regretter Smiley cligne ), je trouverais plus logique de mettre un titre et la liste (ul), un autre titre et la liste (ul) etc. Ou alors si tu as besoin d'un ordre utilises de ol.
Donc, utiliser une structure ainsi ?

<ul>
 <li>
  <h2>Titre Menu 1</h2>
  <ul>
   <li>Lien 1 - 1</li>
   <li>Lien 1 - 2</li>
   <li>Lien 1 - 3</li>
  </ul>
 </li>
 <li>
  <h2>Titre Menu 2</h2>
  <ul>
   <li>Lien 2 - 1</li>
   <li>Lien 2 - 2</li>
   <li>Lien 2 - 3</li>
  </ul>
 </li> 
</ul>


???

Une idée pour le margin / line height sous IE , entre différent li ?
Je pensais plutôt à :

<h2>Titre</h2>
  <ul>
     <li>item</li>
     <li>item</li>
  </ul>
<h2>Titre</h2>
  <ul>
     <li>item</li>
     <li>item</li>
  </ul>

J'avoue que je ne saisis pas ton besoin d'imbrication. Smiley eek
Dans la mesure où je place tout le menu d'un coup, il faut que ces menus soit dans un conteneur ... C'est sûr, j'pourrais mettre ca dans un div, mais je pense qu'un ul est mieux pour organiser plusieurs menus .... j'sais pas ce qu'en pense les autres ?
A mon sens une div dans ton cas n'est pas inutile, puisque tu as besoin d'un conteneur pour opérer un regroupement, alors que dans ton exemple tu forces un <ul> à faire office de conteneur pour les autres <ul>, donc tu as bien plusieurs éléments de menus chacun dans un ul différent.
Il y en bien d'autres qui auront des avis quand ils auront digérés leurs ripailles Smiley lol
Bonjour,

Je suis tout à fait de l'avis de Igor.
Les différentes parties du menu ne constituent pas vraiment une liste, comme ce serait le cas avec des sous-menus.
Une succession de titres et de listes contenue dans un <div> me semble donc plus indiquée. En plus, la maintenance en sera grandement simplifiée.

Je pense que cela serait aussi profitable aux utilisateurs de synthèse vocale.
Je n'ai pas encore testé des listes imbriquées avec Jaws... je crois que cela doit être assez lourd.
Euh... je suis peut-être un peut fatigué.
Mais IE ne connait pas le sélecteur adjascent ( + ) donc forcément n'applique pas la règle... désolé si je suis à-côté de la plaque Smiley confused
Alors tu peux résumer ?

As-tu changé la structure de ton menu ?

Quelles modifications as-tu apporté à ton CSS ?

Ce serait utile de savoir pour consultation future ! Smiley cligne
Modifié le 25 Dec 2004 - 21:03
Je suis __un peu__ entété, donc, pour l'instant, je garde la structure en ul li ul li , mais pour le CSS, c'est donc bien, comme Calimo l'a dis, un problème de selecteur adjacent ( + ), qui n'est as compris par IE.

Je récapitule :
Structure xHTML

<ul id="Menu">
 <li id="Menu-Top">
  <ul>
   <li><h2>Accès rapide</h2></li>
   <li><a href="./">Accueil</a></li>
   <li><a href="./forums/">Forums</a></li>
   <li><a href="./guestbook.php">Livre d'or</a></li>
   <li><a href="./contact.php">Contact</a></li>
   <li><a href="./apropos.php">A propos</a></li>
  </ul>
 </li>
 <li id="Menu-Principal">
  <ul>
   <li><h2>Menu</h2></li>
   <li><a href="./classe.php">Présentation de la classe</a></li>
   <li><a href="./galleries.php">Galleries Photos</a></li>
   <li><a href="./emploi-temps.php">Emploi du temps</a></li>
  </ul>
 </li>
</ul>


Style CSS

#Menu li ul li {
	margin-left:0;
	line-height:25px;
	}
	
#Menu li ul li h2 {
	font-size:16px;
	height:24px;
	background:url('images/design/menu-title.gif');
	padding-top:3px;
	text-align:center;
	margin-left:-16px;
	}


Ce qui donne, sous Firefox à gauche, et sous IE à droite (la différence vient de ma CSS utilisateur sous Firefox) upload/68-CaptIEandFx.jpg
Modifié le 25 Dec 2004 - 20:54