28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS LI:BEFORE Problème de décalage du texte

Bonjour,

je suis novice avec le css...

voulu J'ai remplacer le rond de ma liste à puce par un symbole "|" avec un marinb-right de 15px.
Le margin fonctionne bien pour pour la 1ère ligne, mais n'ait pas pris en compte pour la seconde ligne ...

mon code css

#pages div ul li:before {
	content: "|";
    margin-right: 0px;
    float: left;
    margin-right: 15px;

}


Mon résultat
upload/51502-printscree.png

Si une bonne âme avait une idée d'ou provient mon erreur.. Je vous en remercie d'avance Smiley smile
fanfouet
Je me rappel plus de l'astuce, mais je crois qu'il faut mettre un display:block sur le li ou un padding-left.
C'est un problème récurrent Smiley lol
Il faut mettre tout le contenu de ton <li> dans une <div> et lui ajouter un "overflow:hidden".
Tu peux aussi jouer sur les marges du bas de ton contenu généré.
J'ai essayer aussi une autre soluce
dans li:before

#pages div ul li:before {
	content: "|";
    margin-right: 0px;
    float: left;
    margin-right: 0px;
    position: relative;
    left: -15px;

}

et dans le li
li {
  margin-left: 35px;
}


mais la encore le texte fait des "vagues"
upload/51502-Capturede7.png
Modifié par fanfouet (20 Sep 2013 - 16:02)
merci, j'ai essayer mais ca n'a pas fonctionner pour mon cas, quand je met le margin-bottom cela me décale les lignes suivante de travers...

upload/51502-Capturede7.png
tu peux nous mettre un lien avec ton code + css (genre jsFiddle) pour qu'on puisse check ? Smiley smile

(il n'y a pas besoin de js ou autre pour exposer son soucis de css / html)
Mmmmwé, dans ce cas tu n'as besoin ni du "float", ni du "margin-right" et si ton texte faisait des vagues avec margin-bottom, je suppose que c'est à cause de la largeur de ton contenu généré.
Enfin, le padding reste la solution la plus propore.
Sujet clos
Aller à