De l'aide pour une mise en page

Bonjour,

J'ai utilisé pour mon site perso qui n'est pas encore en ligne, le modèle suivant : http://css.alsacreations.com/modeles/modele7.htm

J'aimerai dans la zone du centre destinée au texte, placer sur la page d'accueil quatre carré (2 en haut et 2 en bas) mais que tous soient bien alignés, j'ai fait un aperçu de ce que je veux :



Le schéma de ce que je veux sont les rectangles gris, en rouge ce sont les dimensions...

Le soucis c'est que je ne sais pas comment m'y prendre du tout

Est-ce que quelqu'un peut m'aider à produire un petit morceau de code ?

Merci par avance

Zguen
Modifié par Zguen (19 Feb 2006 - 21:31)

Si tes carrés sont des div alors tu n'as qu'à leur donner la propriété float:left à tous.

pour la syntaxe exacte cela depend de ce que tu veux mettre dedans.

Liste, div, liste de définition ou autre !!
Bref a toi de choisir.

Sinon quelque soit le type d'élément choisi (sauf exeption) ils auront comme propriétés CSS

width: 300px;
height : 160px;
background-color: grey;
float: left;

Apres pour forcer le passage à la ligne quelque chose dans le style clear: both (faire recherche sur forum) pourra te rendre service !!

Merci pour vos réponses... c'est un peu flou pour moi...

j'ai commencé à créer en XHTML :

<div class="cadreaccueil">
	<h3>Actualités</h3>	
	<p></p>
</div>
<div class="cadreaccueil">
	<h3>Forums</h3>	
	<p></p>
</div>
<div class="cadreaccueil">
	<h3>Accès membre</h3>	
	<p></p>
</div>
<div class="cadreaccueil">
	<h3>Photos</h3>	
	<p></p>
</div>
<div class="cadreaccueil">
	<h3>Photos</h3>	
	<p></p>
</div>
<div class="clear"></div>

Et en CSS :

.cadreaccueil{
	width: 300px;
	height : 160px;
	padding : 0.5em;
	border:1px black;
	background-color: grey;
	float: left;
}
.clear{
	clear: both;
}

Mais je n'ai pas trop ce que je voulais... en fait j'aimerai avoir quatre rectangles bien distinct centré dans ma zone de contenu...

Merci