Partage
  • Partager sur Facebook
  • Partager sur Twitter

Espacement CSS

    28 janvier 2020 à 17:46:33

    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 !

    • Partager sur Facebook
    • Partager sur Twitter
      28 janvier 2020 à 17:52:53

      Salut,

      pour essayer de comprendre et t'aider

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

      • Partager sur Facebook
      • Partager sur Twitter
        Staff 28 janvier 2020 à 17:54:47

        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.

        • Partager sur Facebook
        • Partager sur Twitter
          28 janvier 2020 à 18:03:28

          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.

          • Partager sur Facebook
          • Partager sur Twitter
            Staff 28 janvier 2020 à 18:30:49

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

            • Partager sur Facebook
            • Partager sur Twitter
              28 janvier 2020 à 18:38:38

              J'ai bien mis en position fixed. Mais pour les espacer, que dois-je faire ?
              • Partager sur Facebook
              • Partager sur Twitter
                28 janvier 2020 à 19:03:49

                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

                • Partager sur Facebook
                • Partager sur Twitter

                Espacement CSS

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown