Position d'une liste avec counter et :before

Position d'une liste avec counter et :before - HTML/CSS - Programmation

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 !
 

Reply

Marsh Posté le 21-02-2013 à 03:28:12   

Reply

Marsh Posté le 22-02-2013 à 01:20:37    

Personne?  :cry:  
J'ai l'impression que ce n'est pas possible dans mon cas en utilisant before


---------------
Mittel Starkestoff
Reply

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 :
  1. .number
  2. {
  3. counter-reset: counter;
  4. }
  5. .number li
  6. {
  7.     list-style-type: none;
  8.     counter-increment: counter;
  9.     margin-bottom: 15px;
  10.     padding-left:40px;
  11. }
  12. .number li:before {
  13.     content: counter(counter);
  14.     padding: 0 10px;
  15.     vertical-align: top;
  16.     background: #ff8b0e;
  17.     -moz-border-radius: 60px;
  18.     border-radius: 60px;
  19.     font-weight: bold;
  20.     font-size: 1em;
  21.     color: white;
  22.     position:absolute;
  23.     margin-left:-40px;
  24. }



---------------
Blablaté par Harko
Reply

Marsh Posté le 22-02-2013 à 11:46:53    

gatsu35 a écrit :

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 :
  1. .number
  2. {
  3. counter-reset: counter;
  4. }
  5. .number li
  6. {
  7.     list-style-type: none;
  8.     counter-increment: counter;
  9.     margin-bottom: 15px;
  10.     padding-left:40px;
  11. }
  12. .number li:before {
  13.     content: counter(counter);
  14.     padding: 0 10px;
  15.     vertical-align: top;
  16.     background: #ff8b0e;
  17.     -moz-border-radius: 60px;
  18.     border-radius: 60px;
  19.     font-weight: bold;
  20.     font-size: 1em;
  21.     color: white;
  22.     position:absolute;
  23.     margin-left:-40px;
  24. }




 
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!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed