[CSS] H1 image

Version imprimable

23/09/2009, 17h06
stela86

[CSS] H1 image
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:

1 2 <h1><img src="images/logo.jpg" alt=""/>Titre</h1>
Voilà ce que ça donne : http://www.stelagency.com/Capture.JPG

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

MERCI d'avance pour vos réponses :)
23/09/2009, 17h16
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:

<h1><img src="images/acc_peint1.jpg" alt="" height="56" width="100" /><span style="vertical-align: top">Titre</span></h1>
23/09/2009, 17h44
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.
23/09/2009, 21h03
sebhm
Bonjour,

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

Citation:

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:

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
23/09/2009, 23h07
Erwan31
Citation:

Envoyé par stela86

J'espère avoir été claire.

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

Citation:

Envoyé par sebhm

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.
Citation:
Envoyé par sebhm

Mais sinon, pour mettre ton image en fond :

Code:

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 ;)
24/09/2009, 11h41
sebhm

Citation:

Envoyé par Erwan31

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 :mouarf:
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 :roll:

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