28173 sujets

CSS et mise en forme, CSS3

IE n'aime pas mon div inséré au milieu de plusieurs <li>

salut à tous,

un petit souci sous IE, si j'insere un nouveau div (pour mettre un sous menu) sous un <li> , le <li> suivant (taxes) se trouve déformaté.

voici le code :

<div id="menuprin">
      <ul>
	    <li><a href="#">la mairie</a></li>
		 <div id="menu1">
			<li><a href="#">1</a></li>
       			<li><a href="#">2</a></li>
        		<li><a href="#">3</a></li>
		</div>
	<li><a href="#">taxes</a></li>
        <li><a href="#">producteurs locaux</a></li>
        <li><a href="#">location de salles</a></li>
        <li><a href="#">contact mairie</a></li>
      </ul>
	  </div>


pour voir le rendu en question : http://makrea.free.fr/testcompojava.html

le javascript présent en ligne n'est pas le coupable, le probleme est le meme sans, avec le code ci dessus.

si vous voyez le truc..

merci ! Smiley smile
predator93 a écrit :
Petite question : pourquoi ne pas utiliser un vrai sous-menu avec "ul" plutôt qu'avec "div" ?
Formulé autrement: seuls ul et ol peuvent contenir des li comme enfants directs, ta page est donc invalide actuellement.
Pour être plus précis, il y a deux types d'erreur de syntaxe dans ce code:

1. Des li ayant pour parent une div. Tout élément li doit avoir pour parent ul ou ol.
2. Un ul ayant pour enfant une div. Les éléments ul et ol ne peuvent avoir pour enfants que des li.

Suivant le menu à réaliser, la structure à adopter sera plutôt:
<ul>
	<li>
		<a href="#">la mairie</a>
		<ul id="menu1">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</li>
	<li><a href="#">taxes</a></li>
	<li><a href="#">producteurs locaux</a></li>
	<li><a href="#">location de salles</a></li>
	<li><a href="#">contact mairie</a></li>
</ul>
ou bien par exemple 
<h2>la mairie</h2>
<ul id="menu1">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
</ul>

<h2>Bla bla</h2>
<ul>
	<li><a href="#">taxes</a></li>
	<li><a href="#">producteurs locaux</a></li>
	<li><a href="#">location de salles</a></li>
	<li><a href="#">contact mairie</a></li>
</ul>

Modifié par Florent V. (09 Nov 2007 - 18:35)
zepokpok a écrit :
salut à tous,

un petit souci sous IE, si j'insere un nouveau div (pour mettre un sous menu) sous un <li> , le <li> suivant (taxes) se trouve déformaté.


Pour la petite histoire: la récupération d'erreur HTML, totalement hors-normes, est sans doute la fonctionnalité la plus éprouvée des navigateurs actuels. Je ne sais pas pour vous, mais moi, elle m'a toujours fasciné. Smiley ravi

Devant ton code (involontairement) inutilisable en tant que tel, nos braves petits navigateurs font preuve d'une logique simple: si tu ouvres un <div> là où ils n'attendent que des <li>... ils considèrent que tu as juste oublié de fermer la liste </ul> en question au moment où tu es passé au <div>.

Et ils ajoutent, dans le code interprété (l'arbre du document), le </ul> manquant là où il faut. Tout ce qui suit est donc tout à fait normalement exclu des styles que tu appliques à ta liste.
Florent V. a écrit :

1. Des li ayant pour parent une div. Tout élément li doit avoir pour parent ul ou ol.
2. Un ul ayant pour enfant une div. Les éléments ul et ol ne peuvent avoir pour enfants que des li.

… tu dis 2 fois la même chose là Florent, non? Smiley murf
Modérateur
Benjamin D.C. a écrit :

… tu dis 2 fois la même chose là Florent, non? Smiley murf


À première vue, on pourrait croire que cela veut dire exactement la même chose, mais pas tout à fait. Un élément enfant Y pourrait être forcé d'avoir tel élément parent X, mais ce même parent X pourrait être autorisé à avoir d'autres enfants qu'Y, comme A, B, et C.

Bon vendredi
Modifié par Tony Monast (09 Nov 2007 - 20:47)
Tony Monast a écrit :


À première vue, on pourrait croire que cela veut dire exactement la même chose, mais pas tout à fait. Un élément enfant Y pourrait être forcé d'avoir tel élément parent X, mais ce même parent X pourrait être autorisé à avoir d'autres enfants qu'Y, comme A, B, et C.

Oui, c'est juste que le 2e point de Florent était strictement égal à celui que j'énonçais juste avant son intervention. Smiley cligne
Ceci dit, je ne suis plus sûr que le premier est vrai. Je ne crois pas que les DTD (X)HTML définissent des règles d'imbrication dans le sens enfant->parent (la règle serait plutôt: ul et ol sont les deux seuls éléments HTML susceptibles d'avoir pour enfants des éléments li). Il faudrait que je vérifie ça.
ha ben voilà le truc ! Smiley smile

merci bcp ! je vais prendre ta soluce 1 je pense florent

désolé pour la réponse tardive, le week end s'est mis sur le chemin de ce post Smiley smile
resalut à tous !

bon ça fonctionne très bien avec la premiere propositon de florent, par contre sous IE ça ne s'affiche pas comme voulu, les images qui remplacent les <li> ne s'affichent pas et le menu se décale une fois ouvert.

ça vient p'tete de mon css que j'écris mal aussi du coup ?

le voici :

#menu1{
list-style-image: url(images/listfleche2.gif);
margin-left: -15px;
}



#menu1 a {
	font: 70% "Trebuchet MS", sans-serif;
 	color: #fff;
	padding: 0px 0px 0px 0px; 
}

#menu1 a:hover {
	color: #FE9416;
}

#menu1 li {
	text-align: left ;
	}


parce qu'en fait dans dreamweaver ces <li> s'affichent différement, surement parce que c'est un sous menu (les ronds sont vides au lieu d'etre pleins), du coup je me dis que la syntaxe css doit etre différente ?

merci !
Sujet clos
Aller à