L'application de CSS à la liste ordonnée - couleur de fond, sous les numéros?

J'ai une liste ordonnée que j'ai coiffés en deux façons:

  1. De couleur les chiffres différemment le texte de la liste
  2. Appliquer une couleur de fond et une bordure à chaque élément de la liste

Voir la liste sur le côté droit de cette page

Les numéros sont mis à orange par la première application de la orange style à la <li>, puis en appliquant le style noir pour le texte de la liste uniquement à l'aide de jQuery:

jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');

Je préfère utiliser les CSS, mais bon.

Donc, la question qui reste en suspens est de savoir comment étendre la couleur d'arrière-plan/frontière sous les numéros de trop.

Merci pour le contrôle de ma question!

  • Quel nombre voulez-vous le style?
  • Désolé ce n'était pas clair! Les numéros dans la liste sur le côté droit. Modifier ma question. Merci.
InformationsquelleAutor Caroline Elisa | 2012-06-14
  1. 8

    Révisé Réponse: jsFiddle Pur CSS Solution

    Ici est une nouvelle méthode qui n'utilise pas le cas des OP d'origine du framework jQuery, une demande qui n'a pas été accomplie dans ma réponse précédente. Cette méthode a utilisé jQuery pour appliquer une durée de wrapper pour la li élément depuis direct HTML modification n'a pas été possible.

    Cette nouvelle méthode utilise CSS sélecteurs de Pseudo :before et :after avec CSS 2.1 counter fonction qui peut avoir son numéro de liste stylisée de sorte qu'aucun jQuery wrapper est nécessaire. En fait, le jsFiddle révision montre les nombres à l'aide de Google @font-face de la police.

    L'application de CSS à la liste ordonnée - couleur de fond, sous les numéros?

    À l'aide de la CSS en fonction de compteur est effectué par la déclaration d'une variable de nom à utiliser dans la ul élément, puis incrémenter le compteur dans le :before élément ainsi que de l'utiliser comme contenu réel.

    Exemple Simple: jsFiddle CSS Counter

    L'application de CSS à la liste ordonnée - couleur de fond, sous les numéros?

    HTML:

    <ul>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
</ul>

    CSS:

    ul{
    list-style-type: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 210px;
    height: 200px;
    overflow: auto;
    border: 3px solid royalblue;
    /* Setup the counter. */
    counter-reset: yourVariableName;
}
li:before{
    /* Advance the number. */
    counter-increment: yourVariableName;
    /* Use the counter number as content. */
    content: 'Item ' counter(yourVariableName) ': ';
    color: royalBlue;
    font-family: 'Impact';
}

    Plus à propos de CSS compteurs ICI.


    Mon original daté réponse qui utilise existant dans le cadre des OP question est indiqué ci-dessous.

    J'ai regardé votre Question attentivement et ensuite regardé votre page web.

    Ici est la solution dont vous avez besoin:
    jsFiddle

    Pour résumer, ce sont le remplacement des Règles CSS qui la faire fonctionner:

    #secondary ol {
    color:#F60;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

    Résultat:

    L'application de CSS à la liste ordonnée - couleur de fond, sous les numéros?

    Supplémentaire: Cette variante exemple met l'accent sur les nombres: jsFiddle

    • Merci arttronics! J'ai eu à peu près renoncé à ce!
    InformationsquelleAutor arttronics
  2. 3

    Pour votre deuxième question, une possibilité serait de modifier le list-style-position à l'intérieur de votre li tags:

    li { list-style-position: inside; }

    Cela vous permettra de déplacer le numéro en ligne avec le reste du texte, et vous permettent de style de l'ensemble. Ce n'est toutefois arrêter l'alignement du texte séparément.

    Pour votre première question, il est possible de style les numéros séparément, en théorie, à l'aide de la pseudo-élément marker comme suit:

    li::marker { color: orange; }

    Cependant, je pense que ce n'est actuellement pas pris en charge dans n'importe quel navigateur. Vous pouvez utiliser mozilla spécifiques ::-moz-list-number mais qui ne fonctionne évidemment pas dans les autres navigateurs.

    Vous pouvez voir tous ces morceaux dans mon exemple ici: http://jsfiddle.net/XmtxL/

    • Merci John. Oui, list-style-position: inside va déplacer les numéros à l'intérieur de l'arrière-plan ou à la frontière, même si j'avais été dans l'espoir de garder le texte de la liste alignés comme un bloc. Hmmmm...
    InformationsquelleAutor John Lawrence
  3. 2

    il est facile à atteindre avec css:

    #secondary ol {
 color: <orange>;
}

#secondary li {
 color: <black>;
}

    remplacer les espaces réservés avec le bon code de couleur!

    vous pourriez avoir à le modifier en fonction de votre css, mais le principe est le suivant:

    • appliquer la couleur que vous voulez les "chiffres" pour apparaître comme, à la <ol>
    • appliquer la couleur du texte à l' <li> tags

    comme pour le reste de votre question, envelopper le <ol> dans un div conteneur et d'appliquer le fond désiré pour elle.

    • "Donc, la question qui reste en suspens est de savoir comment étendre la couleur d'arrière-plan/frontière sous les numéros de trop." Vous semblez avoir mal lu la question.
    • Merci luca, mais que les changements les chiffres en noir (j'utilise FF si cela fait une différence). J'ai réussi à contourner ce problème à l'aide de jQuery dans ma question ci-dessus, alors maintenant, mon accent est mis sur l'obtention de la couleur d'arrière-plan pour étendre sous les numéros...
    • my bad, j'ai modifié ma réponse pour répondre à la question
    • Merci encore Luca! Mais, #secondaire li affecte les numéros de trop. Aussi, si j'applique la couleur à l'ol ou li, il ne s'étend pas sous le nombre. Peut-être que cela a quelque chose à voir avec mon CSS? J'utilise Eric Meyer à zéro.css puis appliquer margin-left:20px à l'ol.
    InformationsquelleAutor Luca
  4. 0

    Comme pour la question #1:
    Il semble que vous avez déjà colorés différemment? (Je peux modifier cette réponse si vous avez encore besoin de la solution)

    Pour la #2:

    ul#idname li {
   background:#ddd;/*whatever colour*/
}

    où idname est l'id de la <ul>

    • aussi, si vous voulez augmenter/diminuer la taille de la couleur d'arrière-plan, modifier le remplissage.
    • Grâce peopje, je me rends compte que ma question est trompeuse. J'ai réussi à les couleurs les nombres à l'aide de jQuery (essayé votre CSS mais ne fonctionne pas), alors maintenant, mon accent est mis sur l'obtention de la couleur d'arrière-plan pour étendre sous les numéros.
    • utilisation padding-bottom
    • Sur le li? Ne fonctionne pas pour moi. Désolé si je suis pas clair... je voudrais avoir le gris étendre sous les numéros.
    InformationsquelleAutor paddotk
  5. 0

    Pour ceux, qui ont besoin juste une image de fond comme je l'ai fais il y a un css seule solution pour cela:

    ol
    margin: 0
    padding: 0
    margin-left: 30px
    position: relative
    z-index: 2
    > li
      padding-left: 16px
      margin-bottom: 20px
      font-style: normal
      font-weight: 700
      position: relative
      z-index: initial
      &:before
        position: absolute
        content: url(../images/ol-li-1.png)
        top: -8px
        left: -34px
        z-index: -1

    Voir codepen

    InformationsquelleAutor hugo der hungrige