Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1505 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Position d'une liste avec counter et :before

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Position d'une liste avec counter et :before

n°2176728
Mittel
Posté le 21-02-2013 à 03:28:12  profilanswer
 

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 !
 

mood
Publicité
Posté le 21-02-2013 à 03:28:12  profilanswer
 

n°2176984
Mittel
Posté le 22-02-2013 à 01:20:37  profilanswer
 

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


---------------
Mittel Starkestoff
n°2177009
gatsu35
Blablaté par Harko
Posté le 22-02-2013 à 09:55:17  profilanswer
 

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
n°2177033
Mittel
Posté le 22-02-2013 à 11:46:53  profilanswer
 

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!


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Position d'une liste avec counter et :before

 

Sujets relatifs
Liste simplement chainéeChanger code php via un bouton (changer affichage Mosaique ou liste)
overflow hidden et position:absoluteC++ liste chainée
affichage d'une liste dans une fenêtreaffichage d'une liste dans une fenêtre
Tri d'une liste doublement chainée[Need HELP !] Garder la dernière version dans une liste
[VBA] Créer une liste depuis une celluleCréer une liste numérotée en PHP
Plus de sujets relatifs à : Position d'une liste avec counter et :before


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR