Discussion :

[stela86]

Bonjour à toutes et à tous,

J'ai un petit soucis avec une image et mes titres.

En effet, mon image fait 56px de hauteur alors que les H1 par defaut en fond 32px. Mon problème vient du fait que si je met mon image dans le H1 le texte du titre est en bas de mon image alors que je voudrai que le texte soit situé en haut.

Code :

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

1
2
 
<h1><img src="images/logo.jpg" alt=""/>Titre</h1>

Voilà ce que ça donne :

Alors que je voudrai le texte en haut, j'espère que vous me comprenez.

MERCI d'avance pour vos réponses

[Erwan31]

Bonjour,
dans ce cas il faut encapsuler le titre dans un élément inline générique (span) pour pouvoir le manipuler indépendamment de l'image. Tu aurais aussi pu intégrer l'image via un background CSS puisqu'elle n'apporte manifestement aucune information.
Ne jamais oublier de préciser les attribut de taille de l'image.

Passer le vertical-align dans la CSS (h1 span {})

Code :

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

<h1><img src="images/acc_peint1.jpg" alt="" height="56" width="100" /><span style="vertical-align: top">Titre</span></h1>

[stela86]

Bonjour Erwan31,

Ta solution marche parfaitement, mais pourrais tu m'aider pour mettre mon image comme fond, parce qu'en faisant comme ceci, c'est mon image et mon texte qui sont centrés et je voulais centré seulement le texte, là il y a un décalage correspondant à la largeur de mon image.

J'espère avoir été claire.

[sebhm]

Bonjour,

je ne savais pas qu'on pouvait utiliser 'vertical-align' dans un h1.
Je croyais que ca marchait que pour les tableaux.. ?

parce qu'en faisant comme ceci, c'est mon image et mon texte qui sont centrés et je voulais centré seulement le texte

je ne comprends pas ce que tu veux dire là.


Mais sinon, pour mettre ton image en fond :

Code :

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

1
2
3
<h1 style="height:56px;background-image:url(img/acc_peint1.jpg);background-repeat:no-repeat;">
 <span style="position:relative;left:55px;">Titre</span>
</h1>

on est obligé de donner à h1 la meme hauteur que l'image sinon ca la tronque

[Erwan31]

J'espère avoir été claire.

Non, pas du tout. Relis toi tu devrais t'en apercevoir

Bonjour,
je ne savais pas qu'on pouvait utiliser 'vertical-align' dans un h1.
Je croyais que ca marchait que pour les tableaux.. ?

Cette propriété s'appliquent aux élément de rendu display:table-cell (c-a-d les cellules de tableaux) et inline (span, strong...), or là je l'applique à un span.

Mais sinon, pour mettre ton image en fond :

Code :

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

1
2
3
<h1 style="height:56px;background-image:url(img/acc_peint1.jpg);background-repeat:no-repeat;">
 <span style="position:relative;left:55px;">Titre</span>
</h1>

Pas besoin du positionnement relatif ici, un simple padding-left d'au moins la largeur de l'image appliqué au h1 suffit

[sebhm]

Pas besoin du positionnement relatif ici, un simple padding-left d'au moins la largeur de l'image appliqué au h1 suffit

oui oui tu as tout à fait raison
je sais pas pourquoi je suis parti vers ca... alors que dans un site que je viens de faire j'utilise le padding-left comme tu le dis

ca montre au moins qu'il y a (presque) toujours plusieurs facons d'arriver à ses fins en CSS