28106 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et tous,

Je reviens parmi vous (ça fait bien longtemps !!) parce que je sèche sur quelque chose de sûrement très simple.

Je viens de terminer une formation dans l'informatique (technicien sup réseau système) et suis en train de réaliser un site web CV perso (un resume cv).

Voici ce sur quoi je bloque:

J'ai un menu horizontal en css et je souhaite ajouter une puce sous chaque lien (image ci-dessous), je ne vois pas comment la placer en dessous au milieu du lien.

upload/1527500774-5963-menupuce.jpeg

je veux ajouter cette puce très simple de chez fontawesome: https://fontawesome.com/icons/circle?style=solid


      <nav>
                <ul>
                    <li><a href="#">A propos</a></li>
                    <li><a href="#">Expériences</a></li>
                    <li><a href="#">Formation</a></li>
                    <li><a href="#">Compétences</a></li>
                    <li><a href="#">Intérêts</a></li>
                    <li><a href="#">Contact</a></li>
                </ul> 
     </nav>


nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

nav ul li{
    float: left;
    padding-right: 16px;
    
}

nav ul li a{
    display: block;
    color: #2c3e50;
    font-family: 'Poppins light', sans-serif;
    font-size: 17px;
    text-decoration: none;
}

nav ul li a:hover{
    color: #2980b9;
}


pouvez-vous m'aider ?

merci à vous Smiley biggrin
Modifié par Iro (28 May 2018 - 14:03)
Salut,

Tu es obligé de passer par les pseudos éléments css, before / after.
Dans le before ou after de ton éléments <li> tu ajoute un content qui ressemble à ta puce (à voir avec les icons) et tu joue sur l'emplacement du before pour le caler en dessous.
Modifié par JENCAL (28 May 2018 - 12:10)
Un grand merci à vous deux pour cette réponse rapide !
J'étais parti à un moment sur :after mais sans savoir comment positionner ma puce par la suite, maintenant je sais.

Vous êtes mes sauveurs Smiley smile

ça marche !

encore merci Smiley cligne
bazooka07 a écrit :

After est un pseudo-élément. Donc c'est "::"


héhé Smiley smile

Mais j'ai jamais compris le coup des "::" ou ":"
la différence .. les deux fonctionnent ... ?
Iro a écrit :
Un grand merci à vous deux pour cette réponse rapide !
J'étais parti à un moment sur :after mais sans savoir comment positionner ma puce par la suite, maintenant je sais.

Vous êtes mes sauveurs Smiley smile

ça marche !

encore merci Smiley cligne


Super, mais ton sujet en Résolu
Modérateur
bazooka07 a écrit :

Les navigateurs acceptent les 2 écritures
Tout simplement car l'écriture avec les deux-points doublés a été introduite en Css3.
En Css2 un seul deux-points suffisait et fonctionnait mais afin justement d'introduire une distinction entre un état/condition (soit quelque-chose de passif) et du contenu généré, le W3C a décrété que dans ce cas doubler le caractère serait mieux.
Néanmoins dans un soucis de rétro-compatibilité les navigateurs ont gardés les deux écritures.
Comme depuis personne n'est revenu là dessus, à chaque mise à jour des navigateurs ceci reste vrai et comme c'est là parti j'ai bien l'impression qu'à la version 199 du navigateur cela le restera encore (heu je m'avance peut-être un peu là Smiley cligne )
Modifié par Greg_Lumiere (29 May 2018 - 11:44)