Bonjour,

J'ai un mini menu en position absolute:

.is-content{
    overflow: hidden;
    margin-top: 63px;
    margin-left: -11px;
}

.is-content a{
    float: left;
    color: #7f8c8d;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: 1s;
    margin-left: 34px;
    border: 1px solid #ecf0f1;
    border-radius: 50px;
    z-index: 8;
    position: absolute;
    top: 70%;
}

Et enfait j'aimerais qu'elle soit espacés (les <a>) soit espacé, car la ils l'un sur l'autre.

Quelqu'un pourrait m'expliquer ? Merci !

Salut,

pour essayer de comprendre et t'aider

Pourquoi tu veut mettre tes balises <a> en absolute ?

Bonjour, quel est le HTML correspondant?

Le fait d'indiquer une position (autre que static) ferra sortir les éléments du flux courant. En indiquant une position absolute de tous tes liens dans cette class, tu leurs demandent de ce mettre tous au même endroit, et donc un sur l'autre. 

Que souhaites tu faire exactement?

PS : on n'utilise pas de position absolute sans avoir référent, c'est à dire un parent ou ancêtre en position relative.

Bonjour,

Alors enfait, on m'a expliquer pour que les objets sois les mêmes partout, il fallait une position absolute lorsque la box est en relative.

Le HTML:

<div class="navbar is-content">
                    <a href="" class="active"> <strong>Posts</strong>  </a>
                    <a href="http://nemosia.fr/profile.php?usermentions=all&id=<?= $user['id'] ?>">  Mentions  </a>
                    <a href="http://nemosia.fr/profile.php?usernemos=all&id=<?= $user['id'] ?>">  Nemos  </a>
                    <a href="http://nemosia.fr/profile.php?userlikes=all&id=<?= $user['id'] ?>">  J'aimes  </a>

</div>

Ce que je souhaite faire, c'est le menu, qui ne bouge pas en fonction des pages, car, j'ai eu le probleme auparavant.

Merci.

>> pour que les objets sois les mêmes partout

Il leurs faut des propriétés identiques que l'on regroupe dans une class par économie de code et parce c'est plus pratique ainsi.

Pour que le menu ne bouge pas, c'est le menu qu'il faut positionner pas les liens qui sont dans ce menu. (d'ailleurs si c'est un menu de navigation la balise sémantique correspondante est <nav> pas <div> qui n'a aucun sens sémantique) 

Pour fixé le menu de façon à ce qu'il ne bouge pas c'est position fixed. Il restera fixe. Avec une position absolute sur le  menu soit

• Il n'y a pas de référent et c'est le body qui sert de référent pour le positionnement (équivaut plus ou moins à fixed)
• Tu as un parent ou ancêtre en position relative et le menu est fixe par rapport à ce parent, mais le parent lui bouge dans la page.

Réfléchi également aux diverses tailles d'écrans, avant d'utiliser les positions. Le fait de fixé à un endroit le menu de navigation peut le rendre inaccessible pour certain utilisateur si tu ne prévois pas de modification de ce positionnement pour leur device.

Pour un avis plus clair, en fonction de votre projet, il serait bien d'avoir une vue d'ensemble de la page entière (si mes explications ne suffisent pas à faire ton choix).

-
Edité par AbcAbc6 28 janvier 2020 à 18:32:46

Pour espacer tes liens proprement  tu as flexbox qui propose plusieurs CAS en fonction de ce que tu souhaites, il y a un cours très complet et simple à comprendre sur Openclassroom :

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox