Image d'habillage a gauche titre h2 dans presentation en "em&

Bonjour

Je cherche à ajouter une image à gauche de mes titres h2.
Je souhaite avoir une présentation fluide qui conserve ma mise en page/proportion, quelle que soit la mise en page. J’utilise donc des dimensionnements (marge, hauteur, largeur…) exprimer en « em »

L’image associée au titre est toujours la même. C’est un élément de décoration et ne devrait donc pas être présent dans le HTML.

La technique la plus courante consiste à placer l’image en fond du titre h2. Malheureusement, elle n’est pas dimentionnable en fonction de la taille du texte de l’élément h2.

Deuxième solution : utiliser « Before », mais la encore je n’ai pas la main sur la taille de l’élément.

Les autres solutions que je connais (span, img….) impose l’insertion de l’image dans le HTML ce qui m’obligerait à modifier toutes mes pages dans le cas d’un changement de présentation de mon site.

Quelqu’un aurait-il une solution ?
Modifié par loloH77 (15 Jun 2010 - 18:53)

Bonjour,

Quelles sont les dimensions de l'image? S'il s'agit d'une décoration de petite taille, ne surtout pas se prendre la tête à essayer d'en faire varier la taille en fonction de la largeur de la fenêtre ou de la proportion de gauchers dans la population guatémaltèque. Ce serait gaspiller son temps.

S'il s'agit d'une décoration plus large, genre 300px «par défaut», là ça vaut le coup de se poser des questions et de chercher des solutions. Les solutions, s'il y en a, vont dépendre de ton design (et à l'inverse le design devrait exploiter les solutions existantes). On peut voir à quoi c'est censé ressembler, si possible dans deux cas de figure différents?

Quelqes remarques générales:
- Redimensionner les images en fonction de la largeur d'un conteneur par exemple (ou tout autre critère), c'est impossible en CSS et ça donne des résultats miteux en HTML. En règle générale, on ne redimensionne pas les images.
- Un design complètement fluide qui s'adapte à la largeur du viewport (zone de visualisation du navigateur), ça peut donner des choses excessivement étroites ou à l'inverse extrêmement longues avec des lignes de texte trop longues pour être lues confortablement.
- Pour s'adapter à des petits écrans comme ceux des smart-phones, il y a les Media Queries en CSS3 qui peuvent être utiles.

Merci de cette réponse claire et pertinente.

Effectivement, je suis dans le cas d’une petite image où il n’est peut-être pas nécessaire de jouer sur sa taille.

Il y a peut-être d’autres solutions plus élégantes (même si au niveau des couleurs c’est vraiment limité) :
Utilisation d’un caractère spécial dans un « before » tel que (&#8251 ou &#8227 ou &#10144 ou &#9635 ou &#10162 ou &#10162

Ou d’utiliser une police de caractère exotique, mais que je n’ai jamais testée. Auriez-vous un exemple et sera-t-il visible de tous les navigateurs hors IE6 ?

Mais encore une question. Dans les nouvelles fonctionnalités CSS de Background existe-t-il une fonctionnalité pour jouer sur la taille de l’image ?