Décalage d'une balise vers le bas

Bonjour,

Lorsque le texte d’un titre <h3> est trop long, il se place sur deux lignes et décale la photo
et le titre < p> vers le bas.

Comment remédier à ce cas de figure ?

Lien de ma page :

http://arsf.free.fr/Comite-Directeur/Test-1.html

Photos Gymnastique Maintien en Forme.

Merci pour votre aide.

Salutations.
Modifié par jmde1 (12 May 2009 - 15:17)

Hello,

jmde1 a écrit :
Comment remédier à ce cas de figure ?

Eh bien je dirais qu'il faut prévoir un cadre plus haut que celui utilisé actuellement (l'idéal serait un cadre qui s'étire en fonction du contenu comme cela est expliqué dans cet article) et rajouter un peu de padding au H3 comme par exemple :

h3 {
   ...
   padding: 0 5px;
}

Modifié par Heyoan (12 May 2009 - 12:30)

Salut jmde1,

Il s'agit plus d'un problème graphique que technique.

Comme te le propose Heyoan, tu peux faire en sorte que tes blocs soient étirables (hauteur et/ou largeur), mais tu peux aussi choisir de :
- réduire la taille de police
- abréger le texte (gymnastique ==> gym)
- tronquer le texte (Gymnastique Maintien en Fo...)
- réduire la taille de tes photos
- placer ta photo à gauche et le titre à droite
- placer ta photo à gauche et le nom à droite
- mettre "Gymnastique Maintien en Forme" comme titre de section, à placer au-dessus des photos
- etc., etc., etc.

Bref, il te faut tout d'abord décider d'une solution graphique. Ensuite on pourra t'aider si tu as des difficultés techniques pour la réaliser. Mais pour le moment...

PS : attention à l'enoncé de ton post, le problème n'est pas avec le <h1> mais avec les <h3> (tu peux l'éditer si tu souhaites corriger)
Modifié par marcv (12 May 2009 - 14:24)

Bonjour Heyonn, Marcv,

Merci pour vos réponses.

Pour le plaisir je vais essayer la solution d'Heyonn, mais je penses que
je modifirais la dimensions des images.

Salutations