Version imprimable
Bonjour,
Je débute avec le CSS et j'ai un souci d'alignement vertical de mon texte dans un bloc
Voici mon code :
Je ne vois pas l'erreur, pourtant mon texte n'est pas centré verticalement.Code:
2
3
4
5
6
7
8
9
10
Merci de votre aide !
Cette propriété ne fonctionne pas toujours (je me demande d'ailleurs pourquoi elle existe :mouarf:). Si tu veux centrer tu peux utiliser les paddings. Et comme tu as un height fixe tu pourrais tenter ceci :
pour voir ce que ca donneCode:padding-top:10px
ça marche !!! Merci beaucoup !:love:
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 :D.
Ce sera peut-être plus clair avec le code :
Et pour visualiser le bug que ça occasionne : www.oliotechnology.fr/test2/Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Merci encore pour votre aide !
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
Je suis un peu perdue, là :D
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 !
J'ai vu ca :D
Voici un bon exemple traitant sur les ul et li dans un menu...Ne prends que ce que tu as besoin. Vu que tu n'as pas de menu déroulant (en tout cas pour le moment).
Des menus déroulants grâce aux CSS.
Merci !
Avec ça je pense pouvoir m'en sortir convenablement. Je marque résolu... Mais peut-être que je reviendrait l'enlever ! :mrgreen: on sait jamais :roll:
En tous les cas merci pour ton aide rapide :)
Bon he bien, je ne sais pas pourquoi mais je sentais que j'allais rouvrir le topic :D
J'ai donc bien suivi le tuto, mais par contre, du coup je n'ai plus l'alignement vertical du texte :?
Ce que ça donne : page test
Et mon code CSS
Code:
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
Ton a tu lui fais prendre 100% en haut et après tu mets le padding-top.
Le problème c'est que tu as encore mis en background image le li donc ca va faire comme avant. Le back est à mettre sur le lien directement :aie:
Bon j'avais un peu de temps :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Alors alors :)
En effet, l'alignement est bon ! Merci !
Par contre, deux soucis :
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 ? :D
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 ?
lien vers ma page
Merci d'avance ;)
Ne trouvant pas de solutions par moi-même, je ne me suis pas focalisée plus longtemps là-dessus. J'attends toujours des solutions si vous en avez ! ;)
J'ai donc continué un petit peu et j'ai une autre question : Je n'arrive pas à trouver comment régler l'écartement entre l'affichage des différents "<ul>" en css, comment faire ? :D
merci de votre aide :)
tu joues avec le margin ;)
merci (encore ! :))
Et sinon, pas d'idée pour mes deux autres petits problèmes ci-dessus ? :p
dans ce cas tu peux créer une classe juste pour le lien de droite, que tu mettras en float:right avec le background-position à right également.Citation:
Envoyé par Istrella
Je vois pas de clignotementCitation:
Envoyé par Istrella
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é ;)Citation:
Envoyé par Kerod
Par exemple en ajoutant ceci au #menu:Citation:
Envoyé par Istrella
Code:
2
3
4
5
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:Citation:
Envoyé par Istrella
Code:
2
3
4
5
6
Pour ma part, quand je passe la souris au-dessus des boutons, je vois le background noir avant de voir l'image. Idem quand je cesse de survoler, le background apparait avant que l'image réaparaisse. :?
J'ai essayé sur un autre ordinateur, et cela me fait la même chose. J'ai également essayé avec firefox --> pareil :?
Bon, ce n'est pas trop grave pour l'instant, vu que le site n'est pas encore opérationel :)
Je marque résolu et je reviendrai plus tard si je ne trouve pas la solution :)
Merci encore pour ton aide précieuse ! :)
Ah ok perso ça me le fait aussi sur le premier bouton, avant que l'image de fond ne soit chargée. Pour le noir, ça provient de ton li auquel tu as attribué le noir comme fond. Tu peux faire ainsi par exemple:Citation:
Envoyé par Istrella
Mettre gris en couleur de fond de ton ul et l'image de fond du roll-over dans le li (et virer le noir bien sûr ;)), ce cette manière l'image sera chargée et en attendant le fond gris est plus proche de la couleur des boutons que le noir:
ou alors si tu tiens à garder le li en fond noir, tu peux rajouter la couleur de fond gris au a ça fera déjà un moins grand choc:Code:
2
3
#menu li a
Code:{background:#DDDDDD url(images/bouton.jpg) no-repeat;}
Salut! Ca ne fonctionne pas sous IE apparement? Fort dommage, je trouve fort interessant le ">" dans le css!Citation:
Envoyé par Kerod
Oplà j'ai rien dis, j'avais pas vu que c'était transparent...dsl!