28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous!
Je poste ici mon premier message, étant débutant en CSS.

Voilà le problème.
Dans un conteneur déterminé (#illustrations), je voudrais placer
- une photo dans le coin supérieur gauche
- le titre centré au-dessus entre la photo et la marge droite du conteneur
- le texte en-dessous, autour de la photo.

Pas de problème sur Safari et Firefox (Mac et PC), par contre sur IE PC, le texte se place désespérément en-dessous de la photo plutôt qu'autour.

Le code source donne:
<img src='xx.jpg' width='75' height='100' class='spip_logos' align='left' alt='' />
<div class="titre">Titre</div>
<p><p class='spip' align='justify'>Texte</p></p>


Les classes sont:

#illustrations img.spip_logos{
	float: left;
	margin-left: 20px;
	margin-right: 8px;
	margin-bottom: 6px;
}

#illustrations .titre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	color: #FFFFFF;
	text-indent: 0px;
	text-align: center;
	margin-bottom:0px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
}

#illustrations p.spip {
	width:250px;
	margin-top:0px;
	margin-left: auto;
	margin-right: auto;
	background-color:#333333;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
	vertical-align: middle;
}


Pour voir le résultat: http://www.gsenamur.com/essai.php3

Merci de votre aide!

Geoffroy
Modifié par Geoffroy (28 Apr 2005 - 20:53)