Sujet Précédent Sujet Suivant

Bug margin

Résolu/Fermé
larvazin Messages postés 103 Date d'inscription vendredi 20 juillet 2018 Statut Membre Dernière intervention 28 juillet 2020 - Modifié le 22 juil. 2018 à 20:04
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 23 juil. 2018 à 10:25
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 :)

2 réponses

Réponse 1 / 2
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 150
22 juil. 2018 à 20:02
Sans le code HTML c'est un peu dur de deviner quel code sert à quoi !
0
larvazin Messages postés 103 Date d'inscription vendredi 20 juillet 2018 Statut Membre Dernière intervention 28 juillet 2020 9
22 juil. 2018 à 20:03
Ah ok dsl
0
larvazin Messages postés 103 Date d'inscription vendredi 20 juillet 2018 Statut Membre Dernière intervention 28 juillet 2020 9
22 juil. 2018 à 20:05
C'est modifié !
0
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 150
22 juil. 2018 à 20:06
Merci c'est mieux :D
0
larvazin Messages postés 103 Date d'inscription vendredi 20 juillet 2018 Statut Membre Dernière intervention 28 juillet 2020 9 > nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019
22 juil. 2018 à 20:15
Vous avez trouvé le problème ?
0
Réponse 2 / 2
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 150
22 juil. 2018 à 20:18
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é
0
larvazin Messages postés 103 Date d'inscription vendredi 20 juillet 2018 Statut Membre Dernière intervention 28 juillet 2020 9
22 juil. 2018 à 22:03
Ok mais je ne comprends toujours pas..
Pourrais tu me corriger mon code ?
0
larvazin Messages postés 103 Date d'inscription vendredi 20 juillet 2018 Statut Membre Dernière intervention 28 juillet 2020 9
22 juil. 2018 à 22:09
Non en fait c'est bon j'ai réussi !
Merci encore.
0
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 150
23 juil. 2018 à 10:00
Si c'est résolu pense à le mettre en résolue
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362 > nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019
23 juil. 2018 à 10:25
+100:)
0

Discussions similaires

Problème Facebook rencontre
Margalle -
Jpf -

17 réponses
Problème musiques étranges sur story instagram
somnorun -
SN -

21 réponses
Iptv beug
leogauthier15 -
bazfile -

1 réponse
Problème avec "Facebook Rencontre"
xouxou77 -
4.Kat3ur -

7 réponses
Bug de chaîne IPTV
GeraltDeRiv13 -
bazfile -

1 réponse