Position

[kiwivoyou]

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.



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.

[PieceOfCake]

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 !

[lomart]

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

[kiwivoyou]

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

[lomart]

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

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

[ghazal]

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

[PieceOfCake]

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

[kiwivoyou]

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