Bonsoir,

J'aimerais bien mettre un espace au milieu entre chaque lien mais je n'y arrive pas.

exemple:

 HTML 5: Bases     HTML 5 : Structuration     HTML 5 : Images

Voici mon HTML et mon CSS

 <nav>
          <ul>
            <a href="#">HTML 5:Bases</a>
            <a href="#">HTML 5:Structuration</a>
            <a href="#">HTML 5:Images</a>
            <a href="#">HTML 5:Video</a>
            <a href="#">CSS  3:Sélecteurs</a>
            <a href="#">CSS  3:Couleurs</a>
            <a href="#">CSS  3:Positionnement</a>
            <a href="#">CSS  3:Transformation</a>
          </ul>
        </nav>

nav
{
	background-color: #CCCCCC;
	
}

-
Edité par Augustin1340 9 septembre 2017 à 22:23:15

Bonjour,

Tu dois utiliser la propriété css padding.

ul a {
padding-bottom: 20px;
}

Si padding ne marche pas, essaye avec margin.

-
Edité par eclairia 9 septembre 2017 à 22:25:11

Bonjour,

première chose : dans <ul> on ne peut mettre que des <li>. Encapsule donc tes <a> dedans, déjà.

Et mets en effet du padding sur tes liens - je conseille plutôt un padding identique sur top et bottom, pour l'harmonie visuelle.

Bonsoir,

Je viens d'essayer mais cela ne fonctionne pas vraiment.

nav 
{
	background-color: #CCCCCC;
	
}

nav ul a {
	padding-bottom: 20px;
}

Je vais tres certainement dire une truc nase, ... je ne fait que ça en ce moment ...

C'est un truc de ce genre que tu veut?

    <nav>
         <ul>
           <li><a href="#">HTML 5:Bases</a></li>
            
           <li><a href="#">HTML 5:Structuration</a></li>
            
           <li><a href="#">HTML 5:Images</a></li>
           
          <li> <a href="#">HTML 5:Video</a></li>
           
           <li><a href="#">CSS  3:Sélecteurs</a></li>
            
           <li><a href="#">CSS  3:Couleurs</a></li>
            
           <li><a href="#">CSS  3:Positionnement</a></li>
            
           <li><a href="#">CSS  3:Transformation</a></li>
         </ul>
    </nav>

nav
{
    background-color: #CCCCCC;

}
a {
	text-decoration: none;
}
li {
    
    list-style-type: none;
}

ul li{
	    padding-top: 20px;
     padding-bottom: 20px;
}

Apres tu peut aussi pousser ta base un peut plus loin sans utiliser les préfixes.

Un exemple de menu ici

-
Edité par exen 10 septembre 2017 à 1:30:21