ul li display: inline
Posté : 19 déc. 2007, 01:19
Bonsoir,
je m'amuse à faire un bon script en CSS (quelle intro' merdique
). Je m'explique.
Pour des mises en page un brin compliqué, on est forcément obligé de faire des hacks IE en CSS à tout bout de champs. Ou alors, on ajoute des div et des span dans tous les sens. Mon but ici, est d'aller au plus simple possible. Ça demande pas mal d'études des bugs des différents navigateurs, et surtout de trouver des alternatives simples. Comme par exemple utiliser display: inline-block à la place d'overflow: auto/hidden pour IE dans certains cas (car la compréhension de cette attribut est partielle pour IE, oui partielle, mais allé en savoir plus
).
Bref, je me passe le temps avant les fêtes (les examens sont finis, je me vide la tête un peu).
Mais voilà que j'ai un problème très étrange.
Pour afficher une liste horizontalement, rien ne vaut un display: inline (oui float: left et right pose des problèmes sous IE, je rappelle que l'on va au plus simple). Malheureusement, display: inline sur ul li m'affiche un espace entre les éléments de la liste (items). Je peux contrer ce défaut avec une marge négative mais le résultat n'est pas le même sur Safari, Opera, Firefox et IE (qui lui n'affiche pas d'espaces, un comble).
Un exemple du code se trouve ici : http://hoa-project.net/AndroidBay/ ; où Index.html est la page de test, et Css/Layout.css la feuille de style qui nous intéresse. On notera l'utilisation de Css/Reset.css un sample CSS du W3C modifié qui fait office de Reset.
Le code qui nous intéresse dans l'immédiat :
Merci 
.
je m'amuse à faire un bon script en CSS (quelle intro' merdique
). Je m'explique.Pour des mises en page un brin compliqué, on est forcément obligé de faire des hacks IE en CSS à tout bout de champs. Ou alors, on ajoute des div et des span dans tous les sens. Mon but ici, est d'aller au plus simple possible. Ça demande pas mal d'études des bugs des différents navigateurs, et surtout de trouver des alternatives simples. Comme par exemple utiliser display: inline-block à la place d'overflow: auto/hidden pour IE dans certains cas (car la compréhension de cette attribut est partielle pour IE, oui partielle, mais allé en savoir plus
).Bref, je me passe le temps avant les fêtes
(les examens sont finis, je me vide la tête un peu).Mais voilà que j'ai un problème très étrange.
Pour afficher une liste horizontalement, rien ne vaut un display: inline (oui float: left et right pose des problèmes sous IE, je rappelle que l'on va au plus simple). Malheureusement, display: inline sur ul li m'affiche un espace entre les éléments de la liste (items). Je peux contrer ce défaut avec une marge négative mais le résultat n'est pas le même sur Safari, Opera, Firefox et IE (qui lui n'affiche pas d'espaces, un comble).
Un exemple du code se trouve ici : http://hoa-project.net/AndroidBay/ ; où Index.html est la page de test, et Css/Layout.css la feuille de style qui nous intéresse. On notera l'utilisation de Css/Reset.css un sample CSS du W3C modifié qui fait office de Reset.
Le code qui nous intéresse dans l'immédiat :
Code : Tout sélectionner
div#menu {
overflow: hidden; /* for div#menu ul li display */
float: right;
padding: 0 0 0 1em;
border:1px #000 solid;
background: #2f80ba;
}
div#menu ul {
margin: 0;
padding: 0 1em 0 0;
list-style-type: none;
background: #ba802a;
}
div#menu ul li {
display: inline;
border: 1px #000 solid;
padding:.3em 1em;
background: #fff;
}Code : Tout sélectionner
<div id="menu">
<ul>
<li>Weblog</li>
<li>Galerie</li>
<li>À propos</li>
</ul>
</div>.
À moins que tu ne veuilles ne pas contenter le validateur CSS du W3C en recourant à -moz-border-radius, -khtml-border-radius et à -webkit-border-radius (histoire de satisfaire les utilisateurs de Firefox, de Safari et de tous les navigateurs utilisant Gecko, KHTML ou WebKit comme moteur de rendu).