Problème Alignement

22 juillet 2018 à 20:08:49

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

Je ne parviens pas à recentrer mon menu principal.

Voici le code :

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>

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: auto;
    
    
    
}


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); }

Merci d'avance pour l'aide !

AbcAbc6

22 juillet 2018 à 20:17:31

Bonsoir, le <header> doit être à l'intérieur du <body> pas en dehors. Tout ce qui est de l'affichage dans le body.

ensuite plutôt que d'écrire des margin négative un

body {
    margin: 0;
}

conviendra mieux. Cela reset les marges par défaut pour cet élément.

Pour ton menu de navigation soit tu utilises flexbox pour centrer, soit un margin: 0 auto; avec un width. Au choix.

lefou4

23 juillet 2018 à 10:51:04

Bonjour

En premier lieu, je vous conseillerais d'utiliser une référence pour le menu car si vous avez d'autres ul et li dans le site les styles s'appliqueront aussi sur ceux-ci. Un truc du genre :

<nav id="menu">

Ensuite niveau CSS rajouter un center sur le ul (en tenant compte de ma remarque ci-dessus) :

#menu ul
{
    background-color: beige;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

#menu li
{
    list-style-type: none;
    font-size: 20px;
    display: inline-block;
    width: 120px;    
    text-align: center;
}

EDIT : Désolé pour la colorisation du code mais pas moyen après édition de la remettre correctement

-
Edité par lefou4 23 juillet 2018 à 10:54:15