Bug margin Résolu

Question

Bonjour, j'ai un problème avec mon code :

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 :)

Michael Jackson

FAN CLUB

Merci de l'aide par avance :)

nulenmathe · Answer

Sans le code HTML c'est un peu dur de deviner quel code sert à quoi !

nulenmathe · Answer

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é

Bug margin

2 réponses

Discussions similaires

Newsletters