28220 sujets

CSS et mise en forme, CSS3

[Résolu] Les LI rendent t ils fous ?

Bonjour,

Encore un probleme de LI. Il s'agit d'une différence entre IE et FF

Sous IE
upload/444-ie.gif

et sous FF
upload/444-ff.gif

Voici mon source :

a écrit :
<div id="menu">
<div id="main_nav">
<ul class="nav">
<li><a href="#"><span>Menu 1</span></a> |</li>
<li><a href="#"><span>Menu 2</span></a></li><!--
<li><a href="#"><span>Menu 3</span></a> |</li>
<li><a href="#"><span>Menu 4</span></a> |</li>
<li><a href="#"><span>Menu 5</span></a></li>-->
</ul>
</div>


et voici la css :

a écrit :



#menu {
float: left;
width: 760px;
height: 26px;
padding: 0px;
background: url("/mcl/images/navigation_background.gif");
background-repeat:repeat-x;
background-position:top;
}
#main_nav {
float: left;
height: 26px;
margin: 0px 0px 0px 15px;
padding: 0px;
}
#menu ul.nav {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#menu ul.nav li {
display: inline;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
color: #ffffff;
font-size: 12px;

}
#menu ul.nav li a{
margin: 0px 0px 0px 0px;
padding: 1px 3px 1px 3px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

#menu ul.nav li a:hover{
background-color: #006;
padding: 1px 3px 1px 3px;
text-shadow: 2px 3px 3px #369
margin: 0px 0px 0px 0px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}


Y'a til un truc que je fais pas bien ? Je remarque un truc

merci beaucoup...
Modifié par moon (26 Aug 2005 - 11:11)
Hello,

Tu peux déjà simlplifier ton code source :
a écrit :
<ul id="menu">
<li><a href="#">Menu 1</a> |</li>
<li><a href="#">Menu 2</a> |</li>
<li><a href="#">Menu 3</a> |</li>
<li><a href="#">Menu 4</a> |</li>
<li><a href="#">Menu 5</a></li>
</ul>
Et donc simplifier la feuille de style:
a écrit :


ul#menu {
float:left;
width:760px;
height:26px;
padding:0;
margin:0;
background:url("/mcl/images/navigation_background.gif");
background-repeat:repeat-x;
background-position:top;
}
ul#menu li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
font-family:"Lucida Grande", Verdana, Arial, sans-serif;
color:#FFF;
font-size:12px;
line-height:26px;
}
ul#menu li a{
margin:0;
padding:1px 3px;
font-family:"Lucida Grande", Verdana, Arial, sans-serif;
color:#FFF;
font-weight:bold;
text-decoration:none;
}

ul#menu li a:hover{
background-color:#006;
padding:1px 3px;
text-shadow:2px 3px 3px #369;
margin:0;
font-family:"Lucida Grande", Verdana, Arial, sans-serif;
color:#FFF;
text-decoration:none;
}


Pour le centrer verticalement j'ai rajouté le line-height Smiley cligne

Pour les marge, margin:0; suffit, pas besoin de mettre margin:0px 0px 0px 0px; De plus, que ce soit des pixels ou des poires, on s'en fou, de toutte façon yen a pas... Smiley lol

a+
Merci beaucoup ca marche beaucoup mieux comme ca ! Par contre je n'arrive pas a décaler le contenu vers la drooite car dans mon fond d'image j'ai le degradé gris.. J'ai beau jouer avec les padding/margin ca deconne. Je dois créer encore un div supplémentaire dans lequel je vais décaler et inclure le menu ?
moon a écrit :
Merci beaucoup ca marche beaucoup mieux comme ca ! Par contre je n'arrive pas a décaler le contenu vers la drooite car dans mon fond d'image j'ai le degradé gris.. J'ai beau jouer avec les padding/margin ca deconne. Je dois créer encore un div supplémentaire dans lequel je vais décaler et inclure le menu ?
Essaye de mettre une marge à l'id #menu . Sinon, montres-moi un exemple en lignes, je ne vois aps très bien ce que tu veux dire.

@Keran > Je confirme, je viens de passer ma matiée à en faire une... Et elle est même pas compatible IE Mac... Smiley bawling

a+
Modifié par agilis (26 Aug 2005 - 15:45)
@agilis

Attention à IE/mac qui semble jouer de mauvais tours avec les CSS en fichier cache. Il faut penser à supprimer ce "IE Cache.waf" manuellement s'il le faut (je me suis fait un raccourcis du dossier contenant sur le bureau). Le vidage des prefs IE via IE ne fait pas tout le travail semble-t'il.
@zzzazzz > Merci, je suis conscient de se problème qui m'as déjà fait perdre beaucoup de temps, depuis j'en tient compte Smiley smile . Mais ici, le problème n'est pas là, il positionne mal en absolu j'ai l'impression... C'est peut-être moi qui positionne mal aussi, mais ca marche dans tout les autres naviguateurs sauf IE Mac et Safari. Enfin bon...
Bonjour.

Je trouve la démarche d'éradication des <table>, <tr>, <td> etc trés interressante, mais je me pose la question si le remplacement par <ul> et <li> est la meilleure alternative...
En effet, ces balises sont elles-mêmes des balises ultra-spécialisées, et leur comportement est différent selon les navigateurs. Ceci est du au fait que chaque navigateur met en oeuvre une feuille de style maîtresse et que nos feuilles de styles personnelles ne font que la surcharger.

Il existe la balise <div> qui a le mérite d'être neutre, et passe partout. avec cette balise, on peut indifféremment faire du inline ou block, et obtenir les menus qu'on désire, et ceci sans surcharger ou annuler les propriétés spécifiques de <li> et <ul>

Ainsi, un menu peut être défini comme suit:

<div class="mon_menu">
	<div><a href="#">Première option</a></div>
	<div><a href="#">Deuxième option</a></div>
	<div><a href="#">Troisieme option</a></div>
</div>


et la feuille de style :

version menu vertical
.mon_menu {text-align:left;width:80%;background-color:inherit}
.mon_menu div {padding-bottom:4pt;display:block}
.mon_menu a {text-decoration:none; font-family:tahoma; font-size:8pt; font-weight:bold; color:navy; padding-left:10pt; padding-right:10pt}
.mon_menu a:hover { background-color:yellow;color:white}


version menu horizontal
.mon_menu {text-align:left;width:80%;background-color:inherit}
.mon_menu div {padding-bottom:4pt;display:inline}
.mon_menu a {text-decoration:none; font-family:tahoma; font-size:8pt; font-weight:bold; color:navy; padding-left:10pt; padding-right:10pt}
.mon_menu a:hover { background-color:yellow;color:white}


... seule la propriété display est choisie entre block et inline

On limite grandement les différentes interprétations entre les navigateurs.

Qu'en pensez-vous ? et que voyez vous comme inconvénients...
Sujet clos
Aller à