position absolue ?

Bonjour,

j'ai un bloc qui contient deux éléments, un bouton et du texte,
je voudrais positionner le bouton en bas du conteneur et le texte, juste au dessus de ce bouton. Comme si ces deux éléments étaient collés.

Code:

---

1 2 3 4 5 6 7

<div class="contenuBtnAjouter"> <h2 class="prix">{$aSelection4[0]->prix} €</h2> <span class="btnAjouter"> <img src='images/ajouter.gif' border='0' alt=""> </span> </div>

---

mon style :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.btnAjouter{   width: 105px; position: absolute; top: 25px; left: 00px; z-index:1;   } .contenuBtnAjouter{ width:70px; position:absolute; left:00px; clear:both; /* pour IE !! */ }   h2.prix {   position: absolute; width: 85px; color: red; font-weight: bold; font-size: 12px; text-align: right; left: 10px; z-index: 2;   }

---

si j'ai bien compris, mes deux éléments doivent s'aligner sur leur parent. donc si je mets : top :25px à mon bouton, je devrais mettre top 20px à mon texte ? et si je mets 20 çà arrive sur mon bouton ?

je voulais savoir si mon code était correct et le z-index utile (car je ne vois pas la différence avec ou sans)..

merci :)

position absolut n ai pas trop conseillé

tu peux utiliser l' attributs margin-top qur tu mettra a ton élément du bas : l image
margin-top défini la distance de ton élément par rapport a l'élément supérieur ici ton titre
donc tu met margin-top:0px et je pense que ca devrait être good :D

En effet il faut privilégier les positionnement en flux normal.
Quelques remarques:
> pas besoin d'imbriquer ton image dans un span, la class peut très bien être appliquée directement sur l'image.
> Les valeurs d'attribut doivent être comprises entre des guillements et non des simples quotes.
> Toujours préciser les dimension de l'image pour accélérer la restitution du document et indiquer aux navigateurs d'appareils portatif s'il peuvent ou non afficher l'image.
> Supprimer les attributs comme border qui font partie des attributs déconseillés et qui sont invalides si ton document est en DTD Strict.

Code:

---

1 2	<img src="images/ajouter.gif" alt="" height="" width="" class="btnAjouter">

---

Pourquoi ne pas mettre les deux éléments dans un bloc div chacun, tout simplement, avec un text-align center et un padding,margin 0 ?
hum :mrgreen: