Positionner des boutons.
Résolu
Utilisateur anonyme
-
Dinath Messages postés 1697 Statut Contributeur sécurité -
Dinath Messages postés 1697 Statut Contributeur sécurité -
Bonjour (c'est encore moi),
Comment feriez vous pour positionner les boutons entourés et encadrés dans l'image ci-dessous juste a côté de J-Anime ? En suivant de multiple tutoriel je n'arrive pas a sélectionner tous sa et le bouger.
J'ai essayé padding mais sans résultat mise a part l'écart entre chaque bouton.
HTML :
CSS:
Comment feriez vous pour positionner les boutons entourés et encadrés dans l'image ci-dessous juste a côté de J-Anime ? En suivant de multiple tutoriel je n'arrive pas a sélectionner tous sa et le bouger.
J'ai essayé padding mais sans résultat mise a part l'écart entre chaque bouton.
HTML :
</header>
<!-- Menu de navigation -->
<nav class="navigation">
<ul>
<li class="btn">
<a href="#" rel="nofollow noopener noreferrer" target="_blank">Accueil</a>
</li>
<li class="btn">
<a href="Liste Anime.html" rel="nofollow noopener noreferrer" target="_blank">Anime</a>
</li>
<li class="btn">
<a href="Youtube.html" rel="nofollow noopener noreferrer" target="_blank">Youtube</a>
</li>
</ul>
</nav>
CSS:
nav.navigation ul li.btn{
display: inline-block;
}
nav.navigation ul li.btn{
list-style-type: none;
}
nav.navigation ul li.btn a{
color: white;
font-weight: bold;
background-color: #FF9600;
padding: 20px;
}
nav.navigation ul li.btn:hover a{
color: #FF9600;
background-color: white;
transition: 0.5s all;
}
nav.navigation ul li.btn{
margin: 0 auto;
padding: 50px;
}
nav.navigation ul li.btn a{
position: 10px
}
| EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI Merci d'y penser dans tes prochains messages. |
A voir également:
- Positionner des boutons.
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
- Positionner des points sur une carte - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Comment déverrouiller un samsung avec les boutons - Guide
Oui c'est la pseudo mascotte de Neko-San mais puisque je suis du staff, je me permet quelque folie et je prends l'image que j'avais sous la main :) (c'est de l'apprentissage).
Merci de ta réponse :)
J'ai tout mis dans le header comme ceci:
<body> <header> <div id="headlogo"> <div class="logo"> <img src="http://neko-san.fr//img/ui/logo.png" style="width: 50px"> </div> <div class="head"> <p class="J">J-Anime</p> </div> <div class="navigation"> <ul> <li class="btn"> <a href="#" rel="nofollow noopener noreferrer" target="_blank">Accueil</a> </li> <li class="btn"> <a href="Liste Anime.html" rel="nofollow noopener noreferrer" target="_blank">Anime</a> </li> <li class="btn"> <a href="Youtube.html" rel="nofollow noopener noreferrer" target="_blank">Youtube</a> </li> </ul> </div> </div> </header>Bien joué en tout cas :)