Centrage vertical et lien sur image

Bonjour tout le monde,

Voilà je rencontre quelques soucis à l'élaboration de mon site en xhtml avec des feuilles de style en css...

J'ai un menu horizontal fait d'une succession de div et j'essaie de centrer le texte verticalement dans ces div depuis un moment et je n'y arrive pas !

Suis-je obligé d'abandonner le xhtml strict pour pouvoir centrer correctement ?

J'ai bien lu la méthode énoncée ici : http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction mais je n'y comprends pas grand chose

J'ai le même problème au sujet du sous-menu vertical qui lui par contre est une seule div fait d'une liste, le texte ne veut pas se placer au milieu !

D'autre part j'ai aussi un problème avec les liens sur mes images, mes images sont toutes entourées d'une bordure bleue alors que je n'en veux pas, j'ai essayé de lui mettre le paramètre "text-décoration : none;" mais sans succès, quel paramètre dois-je définir pour cela ?

Si une âme charitable m'aider...

Merci beaucoup

salut.

Pour réaliser un menu, on utilise généralement les listes non ordonnées (<ul>) plutôt que des div, les menus étant considérés comme des "listes de liens". Vouloir placer des div les uns à côté des autres ressemble drôlement à un vieux réflexe hérité de la mise en page par tableaux, non ?

Pour l'alignement vertical de ton texte, j'imagine que l'intitulé des liens du menu horizontal ne doit pas occuper plusieurs lignes ?? Pour que les lignes de texte occupent toute la hauteur du menu, tu dois utiliser la propriété line-height.

Idem pour le menu vertical, jouer sur le line-height devrait permettre de bien placer le texte.

Je ne vois pas pourquoi tu veux abandonner le xhtml strict à cause de cela ?

En ce qui concerne les liens images, comme tu l'as dit, tu as une bordure bleue autour des images ... il faut donc supprimer la bordure, et pas le text-decoration

Je m'en débarasse en général dès le début de ma feuille de style avec

a img {
   border: 0;
}

Salut Sopo,

Un grand merci pour ta réponse, j'ai réussi grâce à toi à virer le cadre autour de mes images !

Par contre oui, le problème c'est que j'ai plusieurs lignes de texte que ce soit pour le menu horizontal (fait de <div> ! hihi) ou sur le menu vertical (fait avec une liste <ul>). Ce qui fait que quand c'est sur 2 lignes c'est à peu près centré mais lorsqu'il n'y a qu'une ligne, elle se cale en haut !

J'ai fait ma liste horizontale avec des div et un positionnement flotant car je pensais qu'on ne pouvait pas faire autrement. Est-ce possible de faire une liste horizontale qui soit bien disposée avec des background alignés et espacés nickel ? Si oui, pourrais-tu m'expliquer comment procéder stp ? Peut-on ajouter ensuite des images dans cette liste, genre picto qui représente le menu ?

Merci pour ta réponse...

Salut.

En ce qui concerne le centrage vertical, ça devient plus compliqué avec 2 lignes, effectivement. La hauteur des éléments du menu est-elle fixée ? Tu devrais pouvoir obtenir en résultat correct via les marges & padding, mais il faudra probablement traiter un peu différemment les cas où il y a une seule ou plusieurs lignes. Je te renvoie à la FAQ pour le centrage vertical ...

Pour le menu horizontal, oui, c'est possible avec une liste Voir ce tutoriel, où il y a un très zoli menu fait comme cela ...