En-tête étirable, 2 images d'arrière-plan, à gauche et droite [résolu

Bonjour

J'ai un en-tête qui se présente comme ceci:

HTML

<h1><a href="/"><img src="h1.png" width="366" height="47" alt="le nom de mon site"></a></h1>

CSS

h1{text-align: center; margin: 0.67em auto; background: #000 url(arriere-plan-h1.png) no-repeat 100% 50%; border: 1px solid #fff;}

Vous l'aurez compris, l'image h1.png vient se mettre au milieu du bloc, et l'image arriere-plan-h1.png vient se coller à droite.


Ma problématique: dupliquer arriere-plan-h1.png symétriquement à gauche.
J'ai plusieurs pistes de réflexion:
- Les backgrounds multiples en CSS 3. Mais ça ne marche que sur Safari à l'heure actuelle.
- h1::before {background-image: url(); content: url();}. Mais ça ne fonctionnera pas sur IE (même version 8 dixit MS)
- Un bon gros tableau. Je ne préfère pas
- Un enchevêtrement de <div>. Je préfère encore faire un tableau.
- Une balise <img> quelque part dans le code positionée en absolute. C'est crado.

Que me conseillez-vous ? En gros je cherche le meilleur rapport sémantique/compatibilité.


Merci beaucoup
Modifié par LeTenia (21 Feb 2009 - 01:02)

Bonjour,

LeTenia a écrit :
Que me conseillez-vous ? En gros je cherche le meilleur rapport sémantique/compatibilité.

Utilisons les bons mots, et sachons de quoi on parle: la sémantique, donc, et ici la sémantique HTML. La sémantique, tu l'as déjà: un H1, un lien. Rien à rajouter. Maintenant, si pour des questions de mise en page tu as besoin d'encadrer ton H1 dans un DIV, ça n'affaiblit ou n'enrichit absolument pas la sémantique du document.

Rajouter un balisage neutre (DIV, SPAN, voire des TABLE qui sont finalement plutôt neutres, ou du moins pas si gênant qu'on veut bien le dire) n'a finalement aucun impact sur la sémantique. Ça peut par contre avoir un impact:
- sur la complexité du code HTML;
- sur sa lisibilité;
- sur son poids.
La question du poids est ici négligeable (si si). Celle de la complexité/lisibilité, qui va de paire avec la «maintenabilité» (capacité d'un code à faciliter la maintenance ultérieure, y compris par un autre intervenant), est par contre plus intéressante.

Mais, franchement, rajouter un DIV est loin d'être méchant pour la complexité du code HTML. Ne soyons pas plus royalistes que le roi, arrêtons de nous prendre la tête inutilement, et évitons d'utiliser des clichés langagiers («plus royaliste que le roi», franchement...).

Ceci dit si on peut éviter de rajouter du code HTML, pourquoi pas. Tu peux éventuellement utiliser l'élément A, et le passer en display: block.
Modifié par Florent V. (21 Feb 2009 - 00:28)

Merci de ta réponse.

Florent V. a écrit :
Ceci dit si on peut éviter de rajouter du code HTML, pourquoi pas.

Voilà, en plein dans le mille, c'est exactement ça.
(même si je suis parfaitement d'accord avec le reste de ce que tu as dit mais je voulais éviter de rajouter un <div> juste pour une pauvre petite image de rien du tout...)

Florent V. a écrit :
Tu peux éventuellement utiliser l'élément A, et le passer en display: block.

Ah ben oui tiens, je n'avais pas pensé à ça... où avais-je la tête ?
Ça marche très bien, le problème est résolu en rajoutant cette ligne dans la CSS:

h1 a {display: block; width: 100%; background:transparent url(arriere-plan-h1.png) no-repeat 0% 50%;}

Merci beaucoup Florent