Retou à la ligne dnas Balise LI

[saluts92]

Bonjour,

j'ai une balise LI (inclus dans une balise UL elle meme incluse)
je mets une largeur à la balise LI MAIS aucun retour à la ligne ne se fait lorsque mon contenu text ets trop long.

en fait il s'agit du menu déroulant à plusieurs niveaux de eric meyer que je cherche à modifier pour qu'il accepte les retours à la ligne

merci d'avance pour votre aide

 

[DadouDuck]

Le comportement normal d'un balise Li est le retour à la ligne, sans code exemple de ta part, je ne vois comment t'aider

 

[saluts92]

dans l'exemple ci dessous c'est la ligne "CSSsd f fsdf sdf sdf sdf sdf" qui ne revient pas à la ligne

code html :
<div id="nav">
<ul class="level1" >
<li class="submenu"><a href="/pubs/" >L1-Publications</a>
<ul class="level2">
<li><a href="/pubs/articles/">Articles</a></li>
<li class="submenu"><a href="/pubs/tuts/">L2-Tutorials</a>
<ul class="level3" width='50'>
<li><a href="/pubs/tuts/html/">L3-HTML</a></li>
<li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
<ul class="level4">
<li><a href="/pubs/tuts/html/">L4-HTML</a></li>
<li><a href="/pubs/tuts/html/">L4-HTML2</a></li>
<li><a href="/pubs/tuts/html/">L4-HTML3</a></li>
</ul>
</li>
<li><p width='20'><a href="/pubs/tuts/css/">CSSsd f fsdf sdf sdf sdf sdf</a></p>
<li><a href="/pubs/tuts/svg/">SVG</a>
<li><a href="/pubs/tuts/xml/">XML</a>
</ul>
</li>
<li><a href="/pubs/wpapers/">White Papers</a></li>
<li><a href="/pubs/comment/">Commentary</a></li>
</ul>
</li>
</ul>
</div>


puis mon code CSS :
div#nav {float: left; margin: -1px 0 0 -1px;background: #E5F9D2; border: 0px solid #AAA;}
div#nav ul {margin: 0; padding: 0; background: #E5F9D2;border: 0px solid #CCC; border-width: 0 0px;}
div#nav li {position: relative; list-style: none; margin: 0;float: left; width: 7em; border-right: 0px solid #AAA;}
#div#nav li:hover {color:#977D6B;}
#div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}
div#nav li.submenu {background-color:#E5F9D2;}
div#nav li.submenu:hover {color:#977D6B;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;text-decoration: none; width: 6.5em;font-size:8pt; font-family:Comic Sans MS, Arial, Times New Roman; color:#FF3366; text-decoration: none;font-weight: normal;}
div#nav li a:hover {color:#483C32;}
div#nav>ul a {width: auto;}
/** nivo 2,3,4 **/
div#nav ul ul {position: absolute; width: 7em;display: none;}
div#nav ul ul li {border-bottom: 1px solid #FF3366; border-right-color: #FF3366;}
div#nav ul ul ul {position: absolute; width: 7em;display: none;}
div#nav ul ul ul li {border-bottom: 1px solid #FF3366; border-right-color: #FF3366;}
div#nav li.submenu li.submenu {background-color:#E5F9D2;}
div#nav li.submenu li.submenu li.submenu {background-color:#E5F9D2;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3,
div#nav ul.level3 li.submenu:hover ul.level4 {display:block;}
div#nav ul.level2 {top: 1.1em; left: -1px; margin-top: 2px;}
div#nav ul.level3 {top: -1px; left: 7em;border-top: 1px solid #CCC;}
div#nav ul.level4 {top: -1px; left: 7em;border-top: 1px solid #CCC;}

 

[saluts92]

ne tenez pas compte de la balise <p ci dessus j'etai en train de faire qqes tests avant de copier le code

 

[baptiste911]

Quel navigateur utilise-tu ?

J'ai testé ton code sous Firefox et Opéra et le retour à la ligne marche

 

[saluts92]

j'utilise IE6 ou IE7 mais meme sour FF cela ne fonctionne pas

Pour etre sure que l'on se comprenne, je souhaite que la phrase :

CSSsd f fsdf sdf sdf sdf sdf

fasse :
CSSsd f fsdf sdf
sdf sdf sdf



c'est bien ce que tu as à l'écran ?

 

[DadouDuck]

Sous Firefox 2 et IE7 oui, par contre sous IE6 le menu ne fonctionne pas du tout, mais c'est normal IE6 ne gère pas la pseudo class hover sur d'autres balises que a

 

[baptiste911]

voila ce qu j'ai sous firefox:
http://www.hiboox.com/lang-fr/image.php ... h97t9t.jpg

J'ai juste rajouté au début de la partie html:
<link rel="stylesheet" href="nom_du_fichier.css" type="text/css">

 

[saluts92]

effectivement sous FF ca fonctionne

mais normalement le retour ligne n'a rin a voir avec la class hover (qui d'ailleurs a ete "corrigé" avec le famaux csshover.htc que j'utilise dans ce cas précis)

merci pour tes tests

 

[saluts92]

RESOLUTION de MON PROBLEME

pour info, pour faire marche le code ci-dessus, il a fallu que je passe par la solution csshover.js (commenté dans d'autres post sur d'autres site) plutot que par la solution csshover.htc

De plus il a fallu que je la mette en action pour IE7 (en plus de IE5 et IE6) pour que cela fonctionne

il semble donc que IE7 a encore des progres à faire dans la gestion de la pseudo class HOVER

 

[frenchhorn]

dans l'exemple ci dessous c'est la ligne "CSSsd f fsdf sdf sdf sdf sdf" qui ne revient pas à la ligne

normal...rien n'indique un retour à la ligne. un petit <br /> serait la solution?

 

[saluts92]

je parlais d'un retour automatique à la ligne etant donné que j'ai definit une largeur d'objet plus petite que la ligne