[Résolu] Titre H1 avec une image de chaque coté

Bonjour,

J'ai un peu de mal pour réaliser un titre H1 avec de chaque coté (à gauche et à droite) de mon titre une image 1 et une image 2

Comment puis-je m'y prendre ? existe-t-il des astuces en CSS2 ou CSS3 ?

Merci pour votre aide


Modifié par kiwoo (16 Jan 2012 - 09:11)

Salut Kiwoo,

Il faut que tu utilises le positionnement flottant. Cherche du côté de la propriété css "float".

En gros si tu appliques ceci à tes éléments titre et images, ça devrait fonctionner :

float: left;

Hello,

Essaie plutot avec les pseudo-éléments :after/:before...

h1:before{
content:url('image1.png');
}


h1:after{
content:url('image2.png');
}

PS: la syntaxe CSS3 est ::after et ::before.

J'ai utilisé h1:before et after et cela marche plutot bien, merci de l'astuce

J'ai juste un problème pour appliquer un background derrière mon titre centré horizontalement, le background s'affiche tout le long au lieu de rester juste à la longueur du texte de mon titre, une idée ?

Et le titre est placé tout en bas au lieu d'être centré en hauteur au milieu

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	height: 35px;
	padding-bottom: 10px;
	background-image: url(img/fond-h1.jpg);
	display: block;
	text-align: center;
	font-weight: normal;
	text-transform: uppercase;
}
h1:after {content:url(img/h1d.jpg);}
h1:before {content:url(img/h1g.jpg);}

kiwoo a écrit :
le background s'affiche tout le long au lieu de rester juste à la longueur du texte de mon titre

Oui c'est normal, un background c'est un fond d'élément et ton élément titre prend toute la largeur disponible dans son conteneur vu qu'il est en display:block.

Tu peux éventuellement utiliser un type de rendu différent. Les suspects habituels seront display:table (pas mal, petit bug de fusion des marges dans Firefox jusqu'à une version récente) et display:inline-block (peut-être moins adapté).

kiwoo a écrit :
Et le titre est placé tout en bas au lieu d'être centré en hauteur au milieu

Si tu ne gères pas le vertical-align sur tes images, c'est normal.

Merci pour votre aide