[Résolu] Créer une classe pour aligner des images

Bonjour,

Dans la réalisation d'un site web, je souhaite afficher à gauche du texte des images pour illustrer le contenu.
Au début, je plaçais l'image en dessous du texte, et il n'y avait pas de problème.
Maintenant, je n'arrive pas à les placer à gauche correctement.
Au début j'utilisai :

#pictures			/*IMAGES DU SITE*/
{
	border:1px black dashed;		/*Bordure des images*/
	display: absolute;			    /*Necessaire pour afficher les images*/
    margin-left: auto;			           /*Necessaire pour centrer les images*/
    margin-right: auto;				  /*Necessaire pour centrer les images*/
	top:10px;				    /*Marge au dessus des images*/
	bottom:10px;				  /*Marge en dessous des images*/
}

J'ai transformé en :

#pictures				/*IMAGES DU SITE*/
{
	border:1px black dashed;	/*Bordure des images*/
	float: right;			       /*Necessaire pour afficher les images*/	
}

Mais les images dépassent le contenu (elles dépassent le bas du cadre où j'écris mon texte...).

Quelqu'un aurait une idée ? Merci d'avance.

PS : Aperçu du problème :
http://img502.imageshack.us/img502/4461/screenrm8.th.jpg
Modifié par gcvoiron (28 May 2007 - 12:19)

Bonjour,

Un petit lien pour répondre à ton interrogation :
Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?

Salut

Tu dois avoir un problème avec ton conteneur mais sans code HTML il est absolument impossible de t'aider

Merci Cygnus pour le lien, mais je n'y suis pas arrivé. Voici ce que ça me donne :
http://img522.imageshack.us/img522/8269/screen2dp5.th.jpg
Avec en css :

.jaune {
float: right;
margin: 0;
}
.spacer {
clear: both;
}
div#contenu															/*CONTENU DES PAGES - TEXTE*/
{
	background-color:#d3efae;	/*dea*/											/*Couleur d'arrière plan*/
	border:2px solid #9b2;												/*Bordure*/
	font-size:12px;														/*Taille du texte*/
	margin-left:auto;													/*Necessaire pour le centrage du contenu*/
	margin-right:auto;													/*Necessaire pour le centrage du contenu*/
	padding-bottom:15px;												/*Marge entre la bordure basse et le texte*/
	padding-left:45px;													/*Marge entre la bordure gauche et le texte*/
	padding-right:45px;													/*Marge entre la bordure droite et le texte*/		
	padding-top:15px;													/*Marge entre la bordure haute et le texte*/
	text-align:justify;													/*Alignement du texte*/
	width:700px;														/*Largeur*/
}

Et ma page :

<h2>1999 - A71</h2>
<div id="contenu">
<div class="jaune"><img src="images/references/1999.png" alt=""></img></div>
<div class="spacer"></div>
<ul>
	<li>Maître d'Ouvrage : Société des Autoroutes Paris - Rhin - Rhône</li>
	<li>Objet : PC de communication régional</li>
	<li>Caractéristiques :
		<ul>
			<li>surveillance des sites d'émission</li>
			<li>Info-route 107,7 MHz pour contrôle d'accès et alarmes techniques</li>
			<li>télésurveillance technique des infrastructures radio d'exploitation.</li>
		</ul>
	</li>
	<li>Travaux réalisés par S.E.E. :
		<ul>
			<li>Etude de couverture, ingénierie des, dossiers</li>
			<li>Etude et développement des matériels</li>
			<li>Montage, installation, mise au point, réception.</li>
		</ul>
	</li>
	
</ul>

	</div>

Modifié par gcvoiron (28 May 2007 - 12:05)

C'est bon ! Ca a marche en modifiant le CSS :

.jaune {
float: right;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:0px;
}
.spacer {

}

Par contre ça ne marche pas avec Opera (l'image reste sur la gauche).

Résolu !
HTML :

<div class="jaune"><img src="images/references/1999.png" alt=""></img></div>

CSS :

.jaune {
float: right;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:0px;
}

Compatible avec IE, Firefox, et Opera !
Merci pour l'aide !