Faire des carrés centrés

**GaMi95** · 17/06/2013, 10h32

Bonjour,

Je voudrais faire sur la page d'accueil de mon site web, plusieurs carrés contenant chacun une image, ces carrés renverraient chacun vers une page.
J'aimerais essayer de ne pas utiliser les tableaux parce qu'il me semble que c'est un peu de la triche ^^

Je vous met un schéma pour vous expliquer un peu mieux ce que je cherche à faire:

Si vous pouvez m'aider, merci d'avance

**Torgar** · 17/06/2013, 10h39

Salut,

Tu as deux possibilités :
- utiliser le flottement (float suivi de clear)
- utiliser les propriétés table, table-cell, table-row.

Quelques détails sur cette page.

Invité · 17/06/2013, 10h43

Salut.

Tu dois mettre tes éléments (des div) en float:left.
Ainsi tu peux leur attribuer un " margin " pour les positionner à ta guise.
Si tu veux que tes 3 carrés soient centrés par rapport à ta page, il faut que tu calcules la largeur de chacun pour la leur attribuer avec un " width ". Calcules aussi les margin de manière à ce qu'elles soient les mêmes, ça fait plus joli !

Ensuite tu adaptes

**rodolphebrd** · 17/06/2013, 11h22

Envoyé par GaMi95

J'aimerais essayer de ne pas utiliser les tableaux parce qu'il me semble que c'est un peu de la triche ^^

Ce n'est pas vraiment "de la triche" c'est plutôt ce qu'il ne faut pas faire en termes de bonnes pratiques.

**JefReb** · 17/06/2013, 21h49

Voici un code simple, à "la louche"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
#conteneur  { width:115px; height:115px; margin:0px; border:2px solid blue; }
.boite1     { float:left; width:20px; height:20px; margin:10px 5px 5px 10px; border:1px solid red; }
.boite2     { float:left; width:58px; height:20px; margin:10px 5px 5px 10px; border:1px solid green; }
hr { clear:both; display:none; }
</style>
<body>
<div id="conteneur">
<div class="boite1"></div>
<div class="boite1"></div>
<div class="boite1"></div>
<hr>
<div class="boite1"></div>
<div class="boite1"></div>
<div class="boite1"></div>
<hr>
<div class="boite2"></div>
<div class="boite1"></div>
<hr>
</div>
</body>
</html>