28172 sujets

CSS et mise en forme, CSS3

[resolu] Alignement vertical texte / picto

Bonjour,

Après de longues heures de recherche, et un cerveau qui commence à fatiguer, je vous pose mon problème :

Je souhaite aligner verticalement une image et un texte dans un onglet de menu sachant que la hauteur de ce menu n'est pas fixe et que l'image ne fait pas toujours la même hauteur.

Un exemple valant mieux que de long discours :
http://240plan.ovh.net/~lesitede/testmenu/test-menu.php

J'ai essayé le 
vertical-align:middle
. Lorsque le texte est un peu long, le début est bien centré verticalement, mais le texte qui revient naturellement à la ligne passe sous l'image.

Mon code n'est pas très propre, pas nettoyé...

Je vous remercie pour votre aide précieuse.

Floolf
Modifié par floolf (18 Apr 2009 - 07:28)
Administrateur
Bonjour et bienvenue floolf, Smiley smile

Où sont les doctype, <html>, <body> et <head> ? C'est pas une page web que tu as pour l'instant mais des bouts de code HTML+CSS ...

Pour cette partie-là: si c'est un menu alors utilise une liste non ordonnée et des items de liste pour chaque bloc.

Ensuite le plus courant est de faire flotter à gauche l'image d'une part, le texte d'autre part (ça oblige probablement à avoir
 <li>
<img />
<p>...</p>
</li>

et pas 
 <li>
<p><img />...</p>
</li>

mais j'ai plus testé la 2ème version depuis longtemps et j'ai pas le temps)

Tes flottants doivent avoir une largeur fixe
(exemple)
li: 400px
img: 100px
p: 300px

Problème induit: <li> n'ayant plus que du contenu *flottant*, il n'en a plus dans le flux par définition (indispensable lecture de ces 3 articles) et <li> n'a donc plus de hauteur. Hauteur nulle = plus de fond visible!
Une solution est alors de rajouter un élément HTML rien que pour ça:
<div class="clear"> </div>

après les 2 flottants juste avant le </li> final avec comme CSS:
.clear {
	font-size: 1px;
	line-height: 0.01;
	clear: both;
	height: 1px;
}

Mais de meilleures méthodes doivent se trouver là: http://www.css4design.com/blog/retablir-le-flux-apres-des-elements-flottants-en-css-sans-balise-html-supplementaire
Modifié par Felipe (18 Apr 2009 - 16:55)
Merci Felipe pour ta réponse.
Elle rejoint la solution que j'avais trouvée également.

Pour les Doctype, body... c'est parce qu'il s'agit d'un fichier d'include PHP, que j'ai grossièrement extrait pour mettre l'exemple en ligne. Pour la CSS également. J'ai bien deux fichiers en temps normal que j'ai fusionné pour aller plus vite dans la démo.

Floolf
Sujet clos
Aller à