Discussion :

[judithcle]

Bonjour !

J'ai un problème avec mes boutons sur ce site.

Sous IE, les boutons s'affichent correctement, c'est-à-dire que la hauteur de chaque bouton est la même que celle de l'image mise pour le bouton de la page en cours (par exemple Accueil pour la page index.html).
Mais sous Firefox, comme vous pourrez le constater, la hauteur s'arrête juste au-dessus de la hauteur totale du texte.

Pouvez-vous m'aider ?

Voici mon code (j'ai mis l'exemple pour un bouton) :

Code :

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

1
2
  <div id="bouton2"><a href="qui.html" class="bouton">
  <p class="texte-bouton">Qui sommes-nous ?</p></a></div>

Et mes css :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
#bouton2{
	position: absolute;
	top: 294px;
	left: 127px;
	height: 28px;
	width:125px;
	z-index: 2;
}
 
.bouton:link {
	background-image: url('images/bouton-off.jpg');
	text-decoration:none;
	display: block;
	height:29px;
}
 
.bouton:visited{
	background-image: url('images/bouton-off.jpg');
	text-decoration:none;
	display: block;
	height:29px;
}
 
.bouton:hover{
	background-image:url('images/bouton-on.jpg');
	text-decoration:none;
	font-weight:bold;
	display: block;
	height:29px;
}
 
p.texte-bouton {
	text-align:center;
	color:#1B2F38;
	margin-top:6px;
	font-size: 12px;
	height: 28px;
}

Merci beaucoup,

Judith

[BnA]

Bonjour!

Si tu essaies sans le "margin-top:6px;" , ou sans la balise <p>, tes onglets se mettent à la bonne hauteur (alignés sur le haut du bouton "Accueil", si c'est que tu cherches à obtenir).

Je pense donc que le problème vient de là. Essaie en supprimant <p></p> (mais en gardant évidemment le contenu, puis, pour la mise en forme du contenu, renseigne-toi sur les propriétés "line-height" et "vertical-align" (CSS), qui devraient te tirer d'affaire.

Bonne continuation!

[judithcle]

Merci BnA.

J'ai supprimé le "margin-top:6px;", ça me met mon texte en haut et le fond a la bonne hauteur, mais le vertical-align et le line-height pour le texte ne fonctionnent pas, que je laisse ou que j'enlève les <p>.

Pour tester sans les <p>, j'ai mis le contenu de "p.texte-bouton" (y compris les vertical-align et line-height) dans les .p:link/visited/hover, mais les vertical-align et line-height ne fonctionnent pas plus... Dois-je les mettre ailleurs ?

J'ai donc fait ceci :

Code html :

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

 <div id="bouton2"><a href="qui.html" class="bouton">Qui sommes-nous ?</a></div>

et dans la feuille de style :

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
26
27
28
29
30
31
32
33
34
35
36
37
 .bouton:link {
    background-image: url('images/bouton-off.jpg');
    text-align:center;
    color:#1B2F38;
    margin-top: 6
    vertical-align:bottom;
    line-height:15px;
    font-size: 12px;
    text-decoration:none;
    display: block;
    height:29px;
}
 
.bouton:visited{
    background-image: url('images/bouton-off.jpg');
    text-align:center;
    color:#1B2F38;
    vertical-align:bottom;
    line-height:15px;
    font-size: 12px;
    text-decoration:none;
    display: block;
    height:29px;
}
 
.bouton:hover{
    background-image:url('images/bouton-on.jpg');
    text-align:center;
    color:#1B2F38;
    vertical-align:bottom;
    line-height:15px;
    font-size: 12px;
    text-decoration:none;
    font-weight:bold;
    display: block;
    height:29px;
}

Merci d'avance de ton aide,

Judith

[judithcle]

Personne ne peut m'aider ??