Discussion :

[Istrella]

Bonjour,

Je débute avec le CSS et j'ai un souci d'alignement vertical de mon texte dans un bloc

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
#bouton {width:130;
height:34;
background-image:url(images/bouton.jpg);
background-repeat:no-repeat;
border-style:none;
font:Bolder Rockwell;
text-align:center;
vertical-align:middle;;
float:left;
}

Je ne vois pas l'erreur, pourtant mon texte n'est pas centré verticalement.

Merci de votre aide !

[Kerod]

Cette propriété ne fonctionne pas toujours (je me demande d'ailleurs pourquoi elle existe ). Si tu veux centrer tu peux utiliser les paddings. Et comme tu as un height fixe tu pourrais tenter ceci :

Code :

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

padding-top:10px

pour voir ce que ca donne

[Istrella]

ça marche !!! Merci beaucoup !

[Istrella]

En fait, non, ça pose un problème

Le texte à aligner est en fait un lien qui, lorsqu'on le survole, change l'image de fond.

hors, avec le padding l'image survolée est décalée, même si je rajoute le padding un peu partout .

Ce sera peut-être plus clair avec le code :

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
#bouton {width:130;
height:34;
background-image:url(images/bouton.jpg);
background-repeat:no-repeat;
border-style:none;
font:Bolder Rockwell;
font-size:18;
text-align:center;
/*vertical-align:middle;*/
padding-top:6px;
float:left;
}
 
#bouton a:hover {width:130;
height:34;
background-image:url(images/bouton1.jpg);
background-repeat:no-repeat;
border-style:none;
font:Bolder Rockwell;
font-size:18;
text-align:center;
/*vertical-align:middle;*/
/*padding-top:6px;*/
float:left;
}

Et pour visualiser le bug que ça occasionne : www.oliotechnology.fr/test2/

Merci encore pour votre aide !

[Kerod]

DOnc voilà le problème tu attribues ta classe bouton au div donc ce qui fait que tout son contenu est décalé du padding-top y compris ton lien.
Ce que tu aurais du faire c'est mettre ta classe bouton au a et non au div.

DOnc il faudrait gérer la classe du div et celle du a. Sinon fais ca en js mais bon. Revois tes classes

D'ailleurs je te conseillerai pour un menu d'utiliser ul et li

[Istrella]

Je suis un peu perdue, là

un exemple ? Je comprends mieux avec des exemple désolée...

[edit]ok, j'ai pas vu l'édition du message entre temps. Je crois que je vais replonger le nez dans les références Merci de ton aide !

[Candygirl]

Cette propriété ne fonctionne pas toujours (je me demande d'ailleurs pourquoi elle existe )

Je pense que ce n'est pas qu'elle ne fonctionne pas, mais qu'elle fonctionne raport au line-heigt d'un élément inline et non au height d'un élément de type block. D'ailleurs, au lieu du padding de 6px que tu proposes, si on mettait un line-height de 34px au li (comme le height) il me semble que le texte serait aussi centré

1) La fin de ma barre de liens est censée se terminer par une image en dégradé. Problème : quoique je fasse elle s'affiche (ou pas) à peu près n'importe ou sauf là ou je la veux Un petit conseil ?

Par exemple en ajoutant ceci au #menu:

Code :

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

1
2
3
4
5
#menu {
padding-right:244px;
background:url(images/menu2.jpg) top right;
width:780px
}

2) Quand je passe la souris au-dessus des boutons, j'ai bien l'effet souhaité, si ce n'est cet effet de "clignotement" comment faire pour remédier à cela ?

Je n'ai pas observé non plus de clignotement, à part si on se rue sur un bouton avant la fin du chargement de la page. Ou alors tu parles du sablier sur ie ? Tu peux faire en sorte que sous ie la zone cliquable s'étende sur tout le bouton en ajoutant ceci a ta balise a:

Code :

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

1
2
3
4
5
6
#menu li a
{
display:block;
width:130px;
height:34px;
}