28217 sujets

CSS et mise en forme, CSS3

[résolu] Pb de display : inline sur liste avec puces graphiques

salut a tous, j'aurais besoin d'un petit dépannage (probablement de syntaxe)

je cherche a afficher une liste en ligne avec des puces graphiques (list-style-image),
-en appliquant le display:inline à mon <ul>, cela ne fonctionne pas
-en appliquant mon display:inline aux <li>, cela fonctionne mais n'affiche pas la puce graphique!

j'ai essayé pas mal de variations, mais c'est toujours le même probleme : soit la liste ne se met pas en ligne, soit les puces graphiques disparaissent...

Si un assidu du forum ou autre gourou voulait bien jeter un oeil au code
Smiley biggrin

--------css de l'<ul>:

.soustitre{
color:#663300; /*brun*/
margin:1px;
display: inline;
list-style-type:none;
}

--------css d'une <li>:

li.accueil{
font: 0.8em Arial, Verdana, "Trebuchet MS", sans-serif;
list-style-image:url("charte/home.png");

}

-------- Smiley html :

<ul class="soustitre">

<li class="auteur">Par AnCé</li>
<li class="localisation">Lyon</li>
<li class="saison">Eté 2005</li>
<li class="categorie">intime</li>
<li class="categorie">Souvenir</li>
<li class="visite">6</li>
<li class="commentaire">2</li>
</ul>

---
voici la charte en cours, avec l'effet désiré, mais en placant direct les images dans la page html (ce que je veux eviter!):

http://gabriel.zeta.free.fr/trucs/dixmn/10mnv3.html

le bloc dont je parle est dansle corps de page, juste sous le titre "venise"
Modifié par monsieur zeta (09 Oct 2005 - 20:57)
Salut !!

Pour affecter une liste, avec pour chaque élements, une image différente, je fais comme ceci :


<li class="auteur">Par AnCé</li>

Et pour l'image :

.auteur{
  background-image: url(tonImage.gif) left no-repeat;
  padding-left: La largeur de ton image;
}


list-style-type: image ne sert à rien à moins bien sûr que tous les éléments aient la même image.

Smiley cligne
merci!
mais ca ne fonctionne pas... c'est peut etre que le background-image va se placer tout au bord gauche de l'écran...?

en tout cas display:inline est censés fonctionner pour les <ul> non?
comme certaines <li> de ma liste en question sont egalement presentes ailleurs dans la page (certains menus...), je dois eviter de styler leurs positions, sinon ca ira pas pour tous les endroits de la page. C'est pourquoi c'est cette liste <ul> bien précise que je veux positionner display:inline et non pas les <li>... aarg Smiley bawling
Le display inline s'applique à la balise <li>, voici un exemple de code fonctionnel :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title></title>
  <style type="text/css">
  #taListe{
    list-style-type: none;
  }
  
  #taListe li{
    display: inline;
    margin: 0 15px 0 0;
    padding-left: 25px;
    border: 1px solid #00f;
  }
  
  #item1{
    background: url(image1.gif) left no-repeat;

  }
  
  #item2{
    background: url(image2.gif) left no-repeat;
  }
  
  /* ect.... */
  
  </style>
  </head>
  <body>
  
  <ul id="taListe">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
    <li id="item5">Item 4</li>
  </ul>

  </body>
</html>

Modifié par spirou (09 Oct 2005 - 20:32)
c'était exactement ca ! ca fonctionne nickel apres quelques reglages - merci pour le bout de code!

spirou, si t'as un souci avec spip, je ferais de mon mieux Smiley cligne !
Bonsoir monsieur zeta,

Appliquer un display:inline aux éléments ul n'a aucun effet sur les éléments li, qui continuent à générer des boîtes blocs, et ne peuvent pas s'aligner horizontalement.

Appliquer un display:inline aux éléments li annule leur valeur de display par défaut, list-item, qui permet justement la génération de la boîte de "puce" (boîte de marqueur).

Un alignement horizontal des li à l'aide de float pose un problème similaire: le display prend la valeur block et non plus list-item, bien que les navigateurs aient sur ce point précis des comportements divergents.

Autrement-dit, pour obtenir des puces sur des éléments li alignés horizontalement, il faut générer ces puces en background CSS, ou les inclure directement comme images <img src="..." alt="" />.
Modifié par Laurent Denis (09 Oct 2005 - 21:04)
c'était donc ca Smiley smile !
du coup, c'est vrai que le background-image me convient mieux dans ce cas, j'aurais pas a prevoir un <include> juste pour ce bloc d'infos, et je pourrais modifier toutes les puces à la fois ou quelles soient;

merci encore pour votre réactivité sur le forum **
Bonjour,
je reprends le fil à propos d'une liste d'images.

J'ai fait une liste de la forme :
<ul><li><a href="blablabla1"><img src="...1" alt="" /></a></li>
<li><a href="blablabla2"><img src="...2" alt="" /></a></li>
....
</ul>

Quand j'applique le display: inline aux éléments li, la liste ne s'affiche plus.
Quelqu'un a-t-il déjà eu ce problème ?
Sujet clos
Aller à