Alignement Image et Texte de titre

07 oct. 2005, 17:26

Bonjour,

j'ai définit h2 ainsi :

h2 {
	background: Navy;
	color: #FFA500;
	text-align: left;
	margin-right: 10%;
	margin-left: 10%;
	height: 30px;
}

J'ai créé deux images "gauche.gif" et "droite.gif" chacunes représentent un demi cercle couleur Navy. Je souhaite les placer de part et d'autre de mon titre h2 pour obtenir un "rectangle arrondi"

J'ai donc ecrit ce code HTML .... mais c'est loin d'être ce que je veux.

Code : Tout sélectionner

<img src="./gauche.gif" height="30" ><h2>Ceci est un test de titre</h2><img src="./droite.gif" height="30" >

J'ai aussi essayé ceci :

Code : Tout sélectionner

<h2><img src="./gauche.gif" height="30" >Ceci est un test de titre<img src="./droite.gif" height="30" ></h2>

Pouvez m'indiquer ce que je dois faire ?

07 oct. 2005, 17:33

Rectification :

Code : Tout sélectionner

<h2><img src="./gauche.gif" height="30" >Ceci est un test de titre<img src="./droite.gif" height="30" ></h2>

Fonctionne sous FireFox, mais pas terriblement sous IE. IE ne semble pas tenir compte du height de h2. (c'est moche)

10 oct. 2005, 03:43

Le code de ta page(En supposant les images à 60 px de largeur):

Code : Tout sélectionner

<html>
<body>
<img src="gauche.gif" width="60">
<font size="30" style="margin-left:60px; margin-right:60px;">
Ceci est un test de titre
</font>
<img src="droite.gif" width="60">
</body>
</html>

ça devrait marcher

J'ai pas mis un <h2> parce que c'est un block, ça exige un retour à la ligne. J'ai juste grossis le titre et si tu veux, tu peux mettre le tout dans un .css, ça serait mieux que direct dans les balises (j'étais pressé et je voulais tester!)[/code]

10 oct. 2005, 09:07

Tu peux parfaitement empêcher le retour de ligne après un <h2> en mettant un style CSS : display: inline

10 oct. 2005, 11:57

tout d'abord, lorsque tu écrit :

Code : Tout sélectionner

<img src="./gauche.gif" height="30" >

ecris plutot :

Code : Tout sélectionner

<img src="./gauche.gif" style="height:30px" >

bien que le top serait de créer une class pour ton image.
Pour l'alignement de ta hauteur qui passe sous FF mais pas sous ie je te conseil:

Code : Tout sélectionner

h2 {
   background: Navy;
   color: #FFA500;
   text-align: left;
   margin-right: 10%;
   margin-left: 10%;
   height: 30px;
   _height : 30px; /* là tu joue la hauteur uniquement pour IE donc tu mets ce que tu veux */
}

pensez a coder W3C

ok je le fait peut etre pas toujours mais j'essaye et c'est qd même mieux ca évite d'avoir des pb d'affichage sous les divers explorateur

Alignement Image et Texte de titre

Qui est en ligne