18073 sujets

Questions générales et questions de débutants

Liste à puces sauvages ! lol

Hello à tous,

Ben voilà, je ne parviens pas à dompter mes puces !

Alors déjà je n'ai pas l'impression que mon code soit super optimum donc si en passant vous avez des conseils de ce côté-là je suis évidemment client.

Le but de ce topic est de savoir comment faire rentrer ma liste plus dans la partie principale de mon site (plus vers la droite, d'une trentaine de pixels par exemple) tout en veillant à ce qu'elles aient la même apparence sous IE comme sous Firefox.

Voici le code CSS et HTML :
ul.listegauche {
list-style-image:url(images/puce.png);
margin:0px;
padding:0;
text-align:left;
width:438px;
}

li.listegaucheli{
float:none;
padding-top:0em;
_padding-top:0em;
padding-bottom:0em;
_padding-bottom:0.3em;
_line-height:1em;
_margin-left:2px;
}


<ul class="listegauche">
          <li class="listegaucheli">Test liste &agrave; puces</li>
          <li class="listegaucheli">Test ligne 2  </li>
        </ul>


Je vous donne aussi des liens où vous pourrez voir ça directement : la page, la css[

Merci d'avance !
Modifié par karnabal (26 Jun 2006 - 21:28)
Salut, alors je vais essayer de te filer un coup de main Smiley cligne . Pour faire ce que tu veux, je pense qu'il te faudrait quelque chose du genre: 

ul.listegauche {
margin:0;
padding:0 0 0 30px;}

li.listegaucheli{
display: list-item;
	list-style-image: url(images/puce.png);
     margin:0,
	padding:0;
    }


De plus, a moins que tu puisses avoir d'autres style de <li> pour des <ul> ayant les memes propriétés, tu n'es pas obligé de donner une classe specifique pour ces <li>.Tu les fais alors hériter de ton <ul> qui lui a sa classe de déclaré.Ce qui te donnerai un truc du genre
ul.listegauche{....}
et
 ul.listegauche li{...}


Voilà, essaye un peu tout ça, met en ligne, et dis nous ce que ça donne. A+
Merci Broadcastor mais ça ne marche pas.

Le résultat est visible à la même adresse mais sur cette page : indexbroadcastor.html

La CSS avec ta modification est aussi à la même adresse mais le nom est : styles-alsabroadcastor.css
Salut,
alors j'ai regardé ça, pas vu vraiment pk ça marchait pas. Je suppose que ça vient de la façon ou on declare ça.
Teste en mettant vraiment :

ul.listegauche {
margin:0;
padding:0 0 0 30px;}

li{
display: list-item;
list-style-image: url(images/puce.png);
margin:0,
padding:0;
}


Et ne met pas la classe de tes <li> dans le html.
Bon ben j'ai décidé de créer une classe supplémentaire pour mon menu horizontal, ainsi je ne suis plus embêté pour les listes présentes dans le corps de texte. Pour le menu horizontal : 
ul#menuliste {
list-style-type: none;
margin:18px;
padding:0;
padding-bottom:28px;
position: relative; 
top: 0em; /* positionnement du menu, que vous pouvez changer à loisir */
left: 0em;
width: 724px; /* précision pour Opera */
}

#menuliste li {
float: left;
}


Pour la liste dans le corps de texte :


ul#listegauche {
margin:0px -30px 0px 0px;
padding:0 30px 0 0;
text-align:left;

}

#listegauche li{
margin:10px 40px 0px 40px;
padding:0;
list-style-image:url(images/puce.png);
    }


Si quelqu'un avait une idée pour simplifier cela... sinon je garde ce code.
Sujet clos
Aller à