Discussion :

[S apprenti sorcier]

Bonjour,

J'ai créé un bouton dans lequel j'ai inséré une image et du texte et je souhaite que celui-ci se trouve en haut de mon bouton(pas au-dessus à l'intérieur) .

Voici mon code html:

Code :

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

1
2
3
4
5
6
7
        <div id="container">
		<button href="#" type="submit" id="bouton1"><FONT size="2pt"><u>Facile:</u><br>Pour les débutants qui souhaitent être aidés du par l'Organisation et recvoir beaucoup de gadgets pour la mission.</FONT></button>
		<div class="espace"></div>
		<button href="#" type="submit" id="bouton2"><FONT size="2pt"><u>Moyen:</u><br>Vous êtes de ceux qui trouvent que les gadgets c'est utile mais que c'est encore mieux de se creuser les méninges.</FONT></button>
		<div class="espace"></div>
		<button href="#" type="submit" id="bouton3"><FONT size="2pt"><u>Difficile:</u><br>Les gadgets? Vous n'en avez plus besoin depuis longtemps car vous faites partie de l'élite de l'élite des agents secrets.</FONT></button>
	</div>

et CSS:

Code CSS :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#bouton1 { 
background-image: url("noir2.jpg");
background-size: cover; 
width: 150px; 
height: 300px;
cursor: pointer;
color: white;
padding-right: 10px;
vertical-align: text-top;
}
 
#bouton2 { 
background-image: url("noir1.jpg");
background-size: cover;
width: 150px; 
height: 300px;
cursor: pointer;
color: white;
padding-right: 10px;
}
 
#bouton3 { 
background-image: url("noir3.jpg");
background-size: cover;  
width: 150px; 
height: 300px;
cursor: pointer;
color: white;
padding-right: 10px;
}
 
#container{
 text-align: center;
}
 
.espace{
   width:2px;
   height:auto;
   display:inline-block;
}

J'ai pensé à utiliser vertical-align: text-top; mais je ne sais pas où le placer afin qu'il ne puisse agir que sur le texte (car dans le cas présent il agit sur le bouton dans son entièreté).

-S-

[mathieu]

je crois que je m'approche de ce que vous cherchez en mettant un "padding" en dessous du texte :
https://codesandbox.io/s/elastic-noy...yles.css:10-32

je ne sais pas si c'est le plus optimisé donc attendez peut-être d'autres avis. en revanche je vous conseille fortement de ne plus utiliser les balises "font" et "u" et de les remplacer par du code css.

[S apprenti sorcier]

Merci,

Je n'y avais pas pensé et cela fonctionne très bien. Quand au balises "font" et "u" je m'en occupe (c'est vrai que ça fait un peu cafouillis).

-S-