Bug margin
Résolu
larvazin
Messages postés
104
Date d'inscription
Statut
Membre
Dernière intervention
-
bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour, j'ai un problème avec mon code :
Je ne parviens pas à recentrer mon menu principal.
Voici le code :
CSS :
HTML
Merci de l'aide par avance :)
Je ne parviens pas à recentrer mon menu principal.
Voici le code :
CSS :
/* GENERAL */
header
{
background-color: black;
height: 300px auto;
color: white;
margin-top: -47px;
margin-left: -8px;
margin-right: -8px;
text-align: center;
}
header h1
{
font-size: 70px;
font-family: 'Cinzel', serif;
font-weight: lighter;
margin-bottom: 0px;
border-bottom: 1px solid white;
align-content: center;
width: 50%;
margin: auto;
padding-top: 75px;
padding-bottom: 10px;
padding-left : 0px;
padding-right: 0px;
}
header h2
{
font-family: 'Cinzel', serif;
font-weight: lighter;
padding-top: 5px;
padding-bottom: 50px;
margin-bottom: 0px
}
li
{
list-style: none;
padding-top: 11px;
text-align: center;
font-size: 20px;
display: inline-block;
width: 120px;
margin-left:
}
a{
text-decoration: none;
color: black;
font-family: 'Cinzel', serif;
font-weight: bold;
}
ul
{
background-color: beige;
margin-top: 0px;
margin-left: -8px;
margin-right: -8px;
height: 50px;
}
.albums:after {
display:block;
content: '';
border-bottom: solid 3px black;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
width: 83px;
margin: auto;
}
.albums:hover:after { transform: scaleX(1); }
.contact:after {
display:block;
content: '';
border-bottom: solid 3px black;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
width: 100px;
margin: auto;
}
.contact:hover:after { transform: scaleX(1); }
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Michael Jackson - Fan Club</title>
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
</head>
<header>
<h1>Michael Jackson</h1>
<h2>FAN CLUB</h2>
</header>
<body>
<nav>
<ul>
<li><a class="albums" href="">ALBUMS</a></li>
<li><a class="contact" href="">CONTACT</a></li>
</ul>
</nav>
</body>
</html>
Merci de l'aide par avance :)
2 réponses
Sans le code HTML c'est un peu dur de deviner quel code sert à quoi !
larvazin
Messages postés
104
Date d'inscription
Statut
Membre
Dernière intervention
9
Ah ok dsl
larvazin
Messages postés
104
Date d'inscription
Statut
Membre
Dernière intervention
9
C'est modifié !
nulenmathe
Messages postés
425
Date d'inscription
Statut
Membre
Dernière intervention
152
Merci c'est mieux :D
larvazin
Messages postés
104
Date d'inscription
Statut
Membre
Dernière intervention
9
>
nulenmathe
Messages postés
425
Date d'inscription
Statut
Membre
Dernière intervention
Vous avez trouvé le problème ?
Bon
Déjà il y a un énorme problème la balise <body> n'est pas une balise "classique" c'est la balise "Principale" du code html tout code html doit impérativement être à l'intérieur (excepté la balise HEAD qui elle aussi n'est pas une balise classique)
Cela n'empêche pas le code de fonctionné mais ne respecte pas la "norme" html et peux amener à des comportement bizarre des mauvaise gestions d'autre code et une certaine irritabilité chez certain codeur
les balise "section" sont ce qui pourrais ce rapprocher le plus du "body" mais la c'est chacun ses choix.
Pour ton problème
Ta balise ul est dans la balise nav qui est dans la balise body
body > nav > ul
Ces balises "structurante" ont pour width 100% par défault donc elle prennent tout la largeur de la page
(tu peux le voir avec ton navigateur en tapant F12 tu peux voir la place que prennent les blocs)
Tu a mis un margin auto à tes balise donc elle ce centreront dans leur parent en fonction de leur width et comme leurs width prennent toute la page et bien le texte reste à gauche c'est normal.
Il faut donc que tu modifie la width de ta balise ul pour qu'elle ce centre ou tu met des li vide devant et derrière DANS ton ul avec une width de 100% pour qu'elle centre automatique les autres
Il y'a beaucoup de façon de centrer des balises ul li tout dépent de comment tu souhaites qu'elle se positionnent
En espérant t'avoir aidé
Déjà il y a un énorme problème la balise <body> n'est pas une balise "classique" c'est la balise "Principale" du code html tout code html doit impérativement être à l'intérieur (excepté la balise HEAD qui elle aussi n'est pas une balise classique)
Cela n'empêche pas le code de fonctionné mais ne respecte pas la "norme" html et peux amener à des comportement bizarre des mauvaise gestions d'autre code et une certaine irritabilité chez certain codeur
les balise "section" sont ce qui pourrais ce rapprocher le plus du "body" mais la c'est chacun ses choix.
Pour ton problème
Ta balise ul est dans la balise nav qui est dans la balise body
body > nav > ul
Ces balises "structurante" ont pour width 100% par défault donc elle prennent tout la largeur de la page
(tu peux le voir avec ton navigateur en tapant F12 tu peux voir la place que prennent les blocs)
Tu a mis un margin auto à tes balise donc elle ce centreront dans leur parent en fonction de leur width et comme leurs width prennent toute la page et bien le texte reste à gauche c'est normal.
Il faut donc que tu modifie la width de ta balise ul pour qu'elle ce centre ou tu met des li vide devant et derrière DANS ton ul avec une width de 100% pour qu'elle centre automatique les autres
Il y'a beaucoup de façon de centrer des balises ul li tout dépent de comment tu souhaites qu'elle se positionnent
En espérant t'avoir aidé
