Position

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Position

    Bonjour,

    En bas de ma zone de texte, j'ai inséré un bouton pour revenir au choix des différentes activités proposées.

    Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture.JPG 
Affichages : 1 
Taille : 26,6 Ko 
ID : 1819867

    J'ai le code suivant pour les "boutons" créés :
    .boutonactivites {text-align: right; position: absolute; top: 505px; left: 470px;}
    .boutonactivitesrando {text-align: right; position: absolute; top: 810px; left: 470px;}
    .boutonactivitestarif {text-align: right; position: absolute; top: 505px; left: 470px;}
    a.retouractivites {background: #806E5A; color: #fff; padding: 6px; border-radius: 6px; font-weight: bold;}

    Par contre, si je modifie le texte, la hauteur du bloc texte sera plus ou moins haute et à chaque fois je devrais donc modifier aussi la valeur pour "top".
    Comment puis-je procéder pour que ce bouton soit automatiquement placé en bas de page ?
    J'ai essayé en changeant la position absolute par relative... mais je ne trouve pas la solution ?

    Merci d'avance de votre aide.

  • #2
    Re : Position

    Il y a plein de solutions en CSS pure, moi j'aime bien celle de AlsaCreations, où celle plus didactiques (et plus ancienne, mais aussi plus universelel) de pompage.net

    Comme quoi, il y a du choix, Google est notre ami !
    Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

    Commentaire


    • #3
      Re : Position

      Bonjour,

      Si c'est pour mettre le bouton après le texte de l'article, pas besoin d'en faire autant.
      un simple bloc flottant à droite avec le bouton suffit.
      on peut prévoir un clear après
      UP, le plugin universel à découvrir sur https//up.lomart.fr
      bgMax
      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

      Commentaire


      • #4
        Re : Position

        Le but est bien en effet de mettre le bouton après le texte de l'article, mais pas forcément tout de suite après.
        Je m'explique, si le texte ne fait par exemple que 2 lignes, je ne veux pas que le bouton soit juste en dessous de ces 2 lignes car il serait situé au milieu de la zone rt-container, alors que je souhaite qu'il soit situé juste un peu au dessus de la limite de cette zone rt-container.

        N'étant pas une grande spécialiste du CSS, j'ai effectué des recherches sur google (qui est bien sûr un bon ami !) mais je patine.

        Et pour le moment, bloc flottant, clear, float, absolute, relative...., j'ai un peu de mal à y voir clair

        Commentaire


        • #5
          Re : Position

          Le seul moyen est d'ajouter de l'espace au cas par cas. Soit avec des sauts de ligne ou un margin-top avant le bouton
          Code:
              <style>
                  a.retouractivites {background: #806E5A; color: #fff; padding: 6px; border-radius: 6px; font-weight: bold;}
                  .right {float:right;}
                  .clear{clear:both;}
                  .decalage-50 {margin-top:50px;}
                  .decalage-100 {margin-top:100px;}
              </style>
          
              <p>texte</p>
              <div class="right decalage-50"><a class="retouractivites">Bouton</a></div>
              <div class="clear"></div>
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            Re : Position

            Salut,
            pour apprendre les CSS, et si tu n'as peur de l'anglais, w3schools est pas mal, avec des exercices en ligne, cf click sur "Try it yourself".
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Re : Position

              Tu as mal lu l'article de pompage.net, mais au cas où celui que je t'ai passé ne te suffirait pas (c'est vrai que leur exemple ne montre pas tout à fait ce que tu voulais), regarde donc celui là que j'ai utilisé longtemps comme modèle pour faire flotter en bas de page un container quelconque (qui contiendra ce que tu veux donc éventuellement un ou des boutons, et surtout SANS position:absolute, qui sont tout sauf fluide et responsive)
              Le titre de l'article devrait te plaire : "Les pieds (de page) dans le plat"
              http://www.pompage.net/traduction/pieds
              Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

              Commentaire


              • #8
                Re : Position

                Merci pour vos conseils, mais je continue à patauger...

                J'ai lu et relu de long en large et en travers le modèle pompage.net, j'ai essayé de l'adapter à mon site, mais rien n'y fait.
                J'y reviendrai plus tard pour de nouveaux essais

                Commentaire

                Annonce

                Réduire
                Aucune annonce pour le moment.

                Partenaire de l'association

                Réduire

                Hébergeur Web PlanetHoster
                Travaille ...
                X