# comment coder en CSS le schema suivant ?

Bonjour, je reposte mon sujet d'une autre maniere
(http://forum.alsacreations.com/topic.php?fid=4&tid=4904[/url])

voici ce que je souhaiterai obtenir :

http://chrys.free.fr/pb_css/je_veux_ca.gif

http://chrys.free.fr/pb_css/je_veux_ca.gif[/url]

Quel est le code CSS pour faire en sorte que mes 4 photos puissent etre alignées de cette façon. Je n'y arrive pas ? et j'ai pas envie de repasser par des tableaux....

Help ! un GRAND merci !
Modifié par chrysonline (28 Jun 2005 - 14:59)

float right sur les photos 2,3,4 .

Ensuite tu ajuste les marges

Ou float gauche sur le 1. Ainsi tu conserves l'ordre 1,2,3,4.
Et mettre tes images en display : block si tu ne veux pas avoir de problèmes de marges.

La solution de marvin est même mieux

ça te permet de les placer dans l'ordre 1 2 3 4 dans le code.

Donc :

float left pour la 1

et tu ajuste les autres avec des marges.

Salut : trop super !

l'une de vos soluces marche : la voila :

CSS

#conteneur {
	margin:0 auto;
	width: 753px;
}


#photo {
	width: 752px;
}
.image1 {
	display: block;
	float: left;
}	
.image2 {
	display: block;
}
.image3 {
	display: block;
}
.image4 {
	display: block;
}



HTML

<div id="conteneur">	 
	<div id="photo">
	<img src="images/bande_index.jpg" class="image1" width="520" height="150" />
 	<img src="images/m_ref_0.gif" class="image2" width="232" height="51" />
	<img src="images/m_act_0.gif" class="image3" width="232" height="50" />
	<img src="images/m_pla_0.gif" class="image4" width="232" height="49" />
	</div>
</div>

Modifié par chrysonline (29 Jun 2005 - 14:17)

La soluce de "Marvin le rouge" fonctionne à 100 % : celle de "TriadPtale" fonctionne à 95 % : en effet, un petit espace blanc se loge entre l'image 3 et 4 si on utilise float : right

je sais pas pourquoi...?