Bozo Posté 1 Octobre 2004 Partager Posté 1 Octobre 2004 (modifié) Bonjour, Je souhaiterais savoir s'il est possible de faire afficher les éléments d'une liste les uns à la suite des autres sur une même ligne, tout en conservant l'affichage des puces ? Exemple : item1 * item2 * item3 * item4 * item5 Merci d'avance. Modifié 2 Octobre 2004 par Bozo Lien vers le commentaire Partager sur d’autres sites More sharing options...
Loupilo Posté 1 Octobre 2004 Partager Posté 1 Octobre 2004 Oui, si tu spécifies li {display:inline;}. Pour plus d'informations, tu peux lire Boîtes bloc, boîtes en ligne et propriété display, sur OpenWeb. Amicalement, Loupilo Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 1 Octobre 2004 Partager Posté 1 Octobre 2004 Tu les fait flotter et donnant les marges adéquates et zou c'est réglé. /* CSS */li{ float: left; margin: 0 15px;} <!-- html --><ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li></ul> @++ Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 1 Octobre 2004 Partager Posté 1 Octobre 2004 Non le display: inline ; suprimera les puces. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Loupilo Posté 1 Octobre 2004 Partager Posté 1 Octobre 2004 Non le display: inline ; suprimera les puces. <{POST_SNAPBACK}> Ah ? Ben alors tu mets ça : li {display:inline;list-style-type:disc;} Amicalement, Loupilo Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 1 Octobre 2004 Partager Posté 1 Octobre 2004 Ca marche ton truc loupilo ? Il me semble pas, mais si ca marche, c'est bon a savoir. Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 Non, ça ne marche pas : ce n'est pas la propriété list-style-type qui sert à générer une puce (elle ne fait qu'en spécifier le type). Les puces ne peuvent être générées que grâce à la propriété display:list-item. C'est la valeur par défaut pour l'élément <li>. Et en appliquant un display:inline au <li>, on supprime du coup la génération des puces. Bien-sûr, on peut retomber sur ses pattes à partir du display:inline grâce à un simple li:before avec un content: "•". Mais pas dans IE Lien vers le commentaire Partager sur d’autres sites More sharing options...
Bug Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 et en faisant un tout bête <!-- html --><ul> <li> item1</li> <li> item2</li> <li> item3</li> <li> item4</li></ul> non ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 La puce placée dans le contenu : - apparaîtra en double dans un navigateur graphique avec CSS désactivée (page enregistrée sans sa CSS, utilisateur désactivant la CSS parce que celle-ci lui pose un problème...) - apparaîtra également en double du caractère de liste (* souvent) dans un navigateur texte - sera lue "bullet..." ou "boulet..." dans un navigateur vocal (et quelque-chose d'approchant dans un lecteur d'écran). - ne sera pas modifiable facilement en cas de changement du design si cette technique est appliquée à un grand nombre de pages statiques - etc Bref, tous les défauts habituels d'un élément de présentation géré directement dans le HTML, que permet de contourner la propriété CSS "content". Lien vers le commentaire Partager sur d’autres sites More sharing options...
ElMoustiko Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 Sinon il est possible en utilisant display: inline ; d'attribuer une image de fond aux li en leur donnant un padding adéquat. Cette solution fonctionnera partout. Voir http://openweb.eu.org/articles/puces_images/ pour plus d'explications. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Loupilo Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 Ca marche ton truc loupilo ?Il me semble pas, mais si ca marche, c'est bon a savoir. <{POST_SNAPBACK}> Non, ça ne marche pas : ce n'est pas la propriété list-style-type qui sert à générer une puce (elle ne fait qu'en spécifier le type). <{POST_SNAPBACK}> Ah ben désolé alors Par contre, toutes les autres solutions données marchent... Amicalement, Loupilo Lien vers le commentaire Partager sur d’autres sites More sharing options...
Bug Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 (modifié) Bref, tous les défauts habituels d'un élément de présentation géré directement dans le HTML, que permet de contourner la propriété CSS "content" Par contre, toutes les autres solutions données marchent... même la mienne ? bon, d'accord, je sors ... Modifié 2 Octobre 2004 par Bug Lien vers le commentaire Partager sur d’autres sites More sharing options...
Loupilo Posté 2 Octobre 2004 Partager Posté 2 Octobre 2004 même la mienne ? bon, d'accord, je sors ... <{POST_SNAPBACK}> Je l'avais pas vu Ben oui, elle marche... Elle est vraiment déconseillée mais aux premiers abords ça marche... A+ Loupilo Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant