18041 sujets

Questions générales et questions de débutants

Position fixe et espacement du menu

Bonsoir Smiley smile

Après avoir bidouiller et même accepter de faire avec des choses en fonction de ce qui voulait bien se faire, je bloque sur un énième paramètre de mon code (et on peut difficilement croire que c'est fait exprès cette fois-ci !).

Je souhaiterai tout d'abord séparer les deux mots, mon nom à gauche et "contact" à droite. (J'ai essayé les display, les justify-content, text-align mais rien n'y fait...)

Le tout ça serait de créer un header blanc en haut avec une border et qui ne bouge pas alors je mets une position fixed MAIS le fond blanc est juste derrière la typo et pas partout...

Si quelqu'un à des éléments de réponses je prend Smiley smile merci
Modifié par Maiss (04 Jul 2020 - 02:26)
Oups, mon image n'est pas passé ! Voici le code que j'ai pour les 3 éléments :

<header id="header">
<a href="index.html" class="nom1">NOM</a>
<a href="contact.html" class="contact">Contact</a></header>


#header {
    display: inline;
    grid-column:1/-1 ; 
    /* position: fixed;  */
    border-bottom: 0.75px solid black;
    justify-content: space-between;
    margin-bottom: 12px;  /* ces deux margin sont soulignés */
    margin-top: 24px; 
    /* vertical-align:middle; */
    background-color: white;
    /* padding-inline: auto; */
}

.nom1{
    margin-bottom: 18px;
    font-family: 'Millimetre_Condensed Regular';
    font-size: 34px;
    color:rgb(0, 0, 0);
    /* grid-column: 1/2;  */
    text-decoration: none;
    cursor: crosshair;
    text-align: left;
}

.contact{
    margin-top: 24px;
    margin-bottom: 18px;
    font-family: 'Millimetre_Condensed Regular';
    font-size: 30px;
    color:rgb(44, 11, 235);
    /* grid-column: 3/-1;  */
    text-decoration: none; 
    cursor: crosshair;
    /*align-content: right;
    text-align: right;
    align-items: center;*/
}
Tu utilises la propriété justify-content sans que ton block soit en display flex,ajoute aussi une dimension à tes éléments <a>
En effet ça marche avec un display flex !!
Je ne savais pas que le fonctionnement de justify-content en dépendait.
Merci beaucoup à tous Smiley smile
Modifié par Maiss (10 Jul 2020 - 15:38)
Sujet clos
Aller à