Pour faire une mise en page en css, il ne faut plus raisonner comme avec les tables.
D'abord, il faut mettre en place des "zones principales", lesquelles vont correspondre à des div "de structure", dans lesquels tu insèreras éventuellement d'autres div, comme par exemple : tes petits carrés.
Dans ton site, nous avons :
- 1 header
- 1 colonne de gauche, dans laquelle il y a les carrés
- 1 colonne à droite, pour le contenu
Ce qui correspond à ce gabarit :
http://css.alsacreations.com/modeles/modele4.htm
Ne tiens pas compte de ce qu'il y l'intérieur des modèles proposés, donné pour exemple ...
Il faut que tu récupères uniquement le squelette, à savoir :
#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
<div id="conteneur">
<div id="header">
</div>
<div id="gauche">
</div>
<div id="centre">
</div>
<div id="pied">
</div>
</div>
Et c'est à l'intérieur de ces conteneurs principaux (qui délimite les parties de la page) que tu vas définir tes carrés :
<div id="gauche">
<div id="carre1">contenu de carré 1 <div>
<div id="carre2">contenu de carré 2 <div>
<div id="carre3">contenu de carré 3 <div>
</div>
ou, si tes carrés ont tous la même apparence :
<div id="gauche">
<div class="carre">contenu de carré 1 <div>
<div class="carre">contenu de carré 2 <div>
<div class="carre">contenu de carré 3 <div>
</div>
Et dans ta css, tu vas définir les styles de tes carrés :
soit un style particulier pour chaque carré (exemple 1 : chaque carré a été identifié de façon unique avec : id="carre1", id="carre2", id="carre3" :
#carre1 {
styles de carrés 1
}
#carre2 {
styles de carré 2
}
#carre3 {
styles de carre3
}
ou, si tu as définis tes carrés avec une classe :
.carre {
stayles de tes carrés
}
Comprends-tu le principe ?
Avant de chercher à obtenir exactement le résultat visuel que tu attends, fais fonctionner un peu tout cela.
Car, à travers ces exemples, je t'ai "mâché" tout le travail d'aprentissage que tu aurais découvert tout seul dans les liens que nous t'avons donnés.
Alors, fais un petit effort, maintenant !
Modifié par Vero (10 Apr 2006 - 19:57)
(09 Apr 2006 - 20:11)
!!