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. |
1 réponse
-
Salut,
A mon avis ton container est trop petit pour ton menu, il se met donc en bas !
PS : C'est moi ou c'est la charte graphique de Neko-San ?
-
-
J'ai résolu le problème.
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> -
-
