Partage
  • Partager sur Facebook
  • Partager sur Twitter

placer un élément avec position:fixed

    23 novembre 2019 à 7:20:23

    salut 

    j'ai une liste, et les élément sont en overflow auto je souhaiterais placer une flèche à  gauche à droite de cette liste,

    j'ai réussi avec position relative, mais les flèches se déplacent au moment du scroll, j'ai donc utilisé position: fixed , mais je ne peux le placer au même endroit en fonction de la taille de l'écran et cela même avec un position:relative pour le container. 

    j'espère avoir pu m'expliqué

    <div class="container">
    <ul class="box"
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    <li class="item">item</li>
    </ul>
    </div>
    .container{
    position:relative;
    }
    	ul.box::before{
    		font-family: "Font Awesome 5 Free";
    		font-weight: 900;
    		content: "\f104";
    		color: black;
    		font-size: 5em;
    		position: fixed;
    		left: 0;
    		top: 300px;
    	}
    	ul.box::after{
    		font-family: "Font Awesome 5 Free";
    		font-weight: 900;
    		content: "\f105";
    		color: black;
    		font-size: 5em;
    		position: fixed;
    		right: 0;
    		top: 300px;
    	}

    merci à l' avance


    • Partager sur Facebook
    • Partager sur Twitter
      23 novembre 2019 à 10:16:25

      Bonjour born1;

      Pour moi position: fixed cela veut dire que ton élément aura comme point d'origine le coin haut gauche de la fenêtre

      donc je pense pas que cela soit ce que tu veux.

      D'autre part, je pense que tu vas avoir du mal à assigner un event sur tes deux éléments

      -
      Edité par AliasDmc 23 novembre 2019 à 10:24:49

      • Partager sur Facebook
      • Partager sur Twitter
      Découvrez les Css avec la zonecss.fr
        27 novembre 2019 à 16:05:31

        @alias, avec beaucoup de temps pour te répondre , oui un peu  pas spécialement en haut à gauche mais toujours au même niveau, histoire que les utilisateurs voient qu'ils peuvent slider de gauche à droite pour voir les li en overflow
        • Partager sur Facebook
        • Partager sur Twitter
          29 novembre 2019 à 16:22:26

          Salut,

          un position:relative sur container et un position:absolute sur les :before et :after.

          Mais comme le pense AliasDmc, tu ne pourras pas assigner un event à :before et :after tout simplement parce qu'ils ne sont pas présents dans le DOM.

          Mets plutôt des <button>.

          • Partager sur Facebook
          • Partager sur Twitter
          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
            29 novembre 2019 à 17:55:16

            Bonjour born1,

            Un exemple  :

            https://codepen.io/Zonecss/pen/ExxzyxG

            • Partager sur Facebook
            • Partager sur Twitter
            Découvrez les Css avec la zonecss.fr
              3 décembre 2019 à 3:05:53

              oui le visuel est là, 

              mais sans js, en rajoutant tout simplement à chaque bord en css avec une fonticone un flèche pour que l'utilisateur sache , 

              • Partager sur Facebook
              • Partager sur Twitter

              placer un élément avec position:fixed

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