Team-Masters.com
Que du Gratuit pour Webmasters
CSS : Une mise en page sur 2 colonnes avec la propriété float
Après avoir examiné dans la section des cours CSS les modes de positionnements des boîtes avec les CSS, voici un exemple concret d’une mise en page sur 2 colonnes, sans tableaux qui utilise une combinaison du mode de positionnement flottant et l’affichage dans le flux normal.
Méthode : Ce modèle consiste simplement à positionner un bloc avec la propriété float qui servira de menu de navigation, et le combiner avec un bloc de contenu qui recevra le texte de la page et qui s’affichera dans le flux courant.
Voici le code HTML de notre modèle :
<body>
<div id="contenu">
Blablabla bal abla bla bla bal abla blablablablablabla
</div>
<div id="menu">
<ul>
<li>lien 1</li>
<li>lien 2</li>
<li>lien 3</li>
</ul>
</div>
</body>Voici maintenant le code CSS :
#contenu {
float: left;
width: 70%;
}
#menu {
margin-left: 75%;
border: 1px solid #000000;
background: #CCC;
}Voici le résultat :
C’est le bloc de contenu que l’on a positionné à gauche. Le menu qui vient ensuite est placé dans le flux normal.
3 septembre 2006
Mise en page : Le positionnement flottant avec les CSS
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
