Discussion :

[defacta]

Salut,

Je suis entrain de travailler sur une page ou il doit y avoir du texte a droite d'une photo. Voila a quoi cela doit ressembler:
http://boxfly.free.fr/tmp/photo_prev...oto_border.jpg

Pour l'instant j'ai fait ceci:
http://boxfly.free.fr/tmp/photo_preview/photo.html

Au droite de la photo je n'arrive pas a mettre un bandeau dans lequel il y aurait ecrit Download Image.

Vous sauriez comment faire avec les <div> ?

Merci,
Vincent.

[Madfrix]

Tu peux définir en absolu la position de test div :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="d1">texte</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#d1{
position:absolute;
top:100px;
left:25%;
width:50%;
height:220px;
border:solid black 1px;
}

[chaminette]

Sinon tu peux utiliser les objets flottants 'float' !

[defacta]

En fait ce serait mieux les objets flotants float, mais je n'arrive pas a m'en debrouille!
Avec absolute, a mon avis c'est pas possible puisque cela doit etre colle a la photo, regardez:
http://boxfly.free.fr/tmp/photo_prev...oto_border.jpg

Mais avec les float, je n'y arrive pas non plus! Je suis en train d'apprendre les <div>

Vous auriez une idee ?

Merci,
Vincent.

[clb56]

Salut,

1. ne met pas .preview-photo-download en float

2. ne lui donne pas de width

3. Donne lui un margin-left et un margin-top.

<edit>
Petit rajout,

4. enlève le width de .preview-photo-left

5. Donne lui un margin-right de quelques pixels
</edit>

[clb56]

Re salut

Tiens, après m'y être arrété un peu plus longtemps, voici un petit exemple en ligne pour te montrer comment partir d'un code html cohérent avec ce que tu veux structurer et un rendu comme ce que tu indiques dans ton image : Test defacta