Discussion :

[poupouille]

bonjour

jai positionné mon texte au dessus d'une image en utilisant background-image. Mais je n'arrive pas à positionner mon texte en bas de la photo. Avez-vous une idée?

Merci
Sophie

<div id='image'>
<div id="sponsor">sponsored by: adidas</div>
</div>


#image{
display:inline;
float:left;
vertical-align:text-bottom;
width:400px;
height:115px; background-image:url(./image/img.jpg);}

#sponsor{
vertical-align:text-bottom;
width:400px;
height:20px;
color:white;
background-color:#9FA09A;
}

[Lidya]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id='image'>
       <div id="sponsor">
              sponsored by: adidas
       </div>
</div>
       

#image{
       display: inline;
       float: left;
       vertical-align: bottom;
       width: 400px;
       height:115px; 
       background-image: url(./image/img.jpg);
}

#sponsor{
       vertical-align: bottom;
       width:400px;
       height:20px;
       color:white;
       background-color:#9FA09A;
}

Je ne sais pas quelle est la taille de ton image mais il est aussi simple de mettre un padding-top: TailleImagepx; ton texte, sera donc au dessous de l'image de fond, et penser a background-repeat: no-repeat. Enfin si j'ai bien compris ce que tu veux faire. Avec cette technique tu n'as pas besoin d'avoir deux div.

Si tu souhaites le faire avec deux div, tu peux mettre un margin-top sur sponsor de la hauteur de l'image.

[poupouille]

Merci de ton aide

j'ai trouvé un truc tout bêt

Code :

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

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
<div id='image'>
<div id="sponsor">sponsored by: adidas</div>
</div>


#image{
       display:inline;
       float:left;
       width:400px;
       height:115px;
       font-family:arial;
       font-size:12px;
       background-image:url(./image/img.jpg);
}
                
       #sponsor{
             width:390px;
             height:18px;
             margin-top:95px;
             padding-left:10px;
             padding-top:2px;
             color:white;
             background-color:#9FA09A; 
}

j'ai tout simplement rajouter un margin-top !
Merci
bonne soirée
Sophie