Position d'une liste avec counter et :before - HTML/CSS - Programmation
Marsh Posté le 22-02-2013 à 01:20:37
Personne?
J'ai l'impression que ce n'est pas possible dans mon cas en utilisant before
Marsh Posté le 22-02-2013 à 09:55:17
Il n'y a pas 36 solutions :
Etant donné que ton élément :before est inline, il est comme ainsi dire partie intégrante du texte, la seule solution potable que j'ai trouvé, est de rajouter un padding-left:40px sur les LI histoire de bouger le texte, et ensuite, pour bouger notre élément afin qu'il ne soit plus collé au texte, j'ai du le sortir complètement du flux en utilisant position:absolute, et en utilise un margin-left:-40px.
Attention, pour déplacer notre élément, je n'utilise pas left, right, top, ou bottom,car ces valeurs se calent par rapport au premier élément position (position:relative, absolute, fixed), et donc ils iraient n'importe où et puis je n'ai pas envie de rajouter un position:relative sur mon LI, donc je déplace l'élément avec une marge negative.
Voilà c'est tout propre, j'ai cleané un tout petit peu ton code :
http://jsbin.com/utanij/7/edit
Code :
|
Marsh Posté le 22-02-2013 à 11:46:53
gatsu35 a écrit : Il n'y a pas 36 solutions :
|
Excellent! Un grand merci pour le coup!
Je me suis dit exactement la même chose au sujet de :before mais je n'avais pas pensé à cette solution du tout.
Merci encore!
Marsh Posté le 21-02-2013 à 03:28:12
Bonjour!
Depuis quelque temps je "m'amuse" à travailler sur un site web. Je n'y connaissais pas grand chose, du moins en CSS. Je suis un gros noob.
Jusqu'à maintenant j'ai réussi à comprendre peu à peu le truc à force d'essais et de lecture, mais là je coince sur la création d'une liste.
En fait j'ai créée un liste avec un "counter" de cette façon:
.number
{
counter-reset: counter;
}
.number li
{
list-style-type: none;
counter-increment: counter;
margin-bottom: 15px;
}
.number li:before {
content: counter(counter);
padding: 0 10px 0;
margin-right: 8px;
vertical-align: top;
background: #ff8b0e;
-moz-border-radius: 60px;
border-radius: 60px;
font-weight: bold;
font-size: 1em;
color: white;
}
Mainenant cela fonctionne parfaitement sauf que j'ai un problème de positionnement lors des retours à la ligne.
En gros j'ai ça:
1. bla bla bla bla
bla bla bla bla
Alors que je veux ça
1. bla bla bla bla
bla bla bla bla
J'ai essayé list-style-position mais ça ne fonctionne pas (je me doute que c'est justement parce que je n'ai pas de list-style en fait).
Bref, je tourne en rond j'ai cherché à droite à gauche mais là je cale
Merci pour vos lumières !