Tutorial - Faire un site centré extensible sur trois colonnes avec en-tête et pied de page
Pour la création du design de Pixtiz, j'avais décidé que mon design serait plutôt classique avec header pour le multi-langue et footer pour le menu annexe.
Pour le contenu, il serait réparti sur
trois colonnes: à gauche le menu et les sites partenaires, au centre le contenu et à droite la publicité et les utilisateurs en ligne.
Le tout serait bien sur au centre de la page et pas aligné sur un bord.
Au cours de la création de mon fichier CSS, j'ai été confronté à beaucoup de bugs et d'obstacles qui semblent revenir souvent dans la création de ce type de design.
Le code est
propre, n'utilise
aucun hack CSS, et
fonctionne parfaitement sous Internet Explorer que sous Firefox.
Le but de ce tutorial est de vous montrer comment contourner ces problèmes.
Un fichier CSS "modèle" est en téléchargement sur cette page.
La structure de div à adopter
Le design adopté ici sera adapté à une résolution de 800 par 600.
Si vous voulez le transformer en design pour une résolution 1024, vous n'aurez que quelques chiffres à changer ;).
Disposition générale des div:
Dans la disposition que j'ai choisi, le header est situé à l'extérieur du bloc global pour pouvoir faire facilement le raccord
au niveau du dégradé de fond et finalement, cela se révèle très pratique.
Les menus et le footer sont compris dans le div #global pour pouvoir les placer facilement.
L'ordre du flux dans le fichier HTML
L'ordre dans lequel il faut donner
le flux n'est pas classique et n'est pas celui auquel on s'attendrait à avoir intuitivement.
On serait tenté de faire header/menu_gauche/page_principale/menu_droite/footer et pourtant pour des problèmes de positionnement,
vous devrez adopter l'ordre suivant :
<div id="header">
<!-- contenu du header -->
</div>
<div id="global">
<div id="menu_gauche">
<!-- contenu du menu de gauche -->
</div>
<div id="menu_droite">
<!-- contenu du menu de droite -->
</div>
<div id="page_principale">
<!-- contenu de la page principale (étirable) -->
</div>
<div id="footer">
<!-- contenu du footer -->
</div>
</div>
Le menu de droite se place ici avant le menu principal.
Si vous ne le faîtes pas, votre menu de droite apparaît sous la page principale.
Centrer son design (header et page principale)
Pour centrer son design, il faut
utiliser le margin:auto css.
Vous devez aussi
préciser la hauteur (height) pour afficher complètement le background CSS du header.
Pour un design 800x600, prenez une largeur de
775 pixels.
Tout d'abord, pour corriger un bug d'affichage sous Internet Explorer, placez ce code dans la balise body de votre CSS:
margin: 0px;
text-align: center;
Dans le cas du bloc #global, ne précisez pas hauteur afin de rendre cette partie extensible
margin-left: auto;
margin-right: auto;
width:775px;
Positionner les menus en float
Pour pouvoir positionner les menus correctement et pas les une en dessous des autres, vous allez utiliser
la commande CSS float:.
Toujours pour afficher le background CSS complètement, on fixe la hauteur de bloc à 395 pixels.
Ainsi, pour le menu de gauche, on aura :
float:left;
position:relative;
width: 18%;
height:395px;
Et on fixe le menu de droite en float:right; :
float:right;
position:relative;
height:375px;
width: 137px;
Faire une page principale étirable entre les menus
Grâce à cette portion de code CSS, votre page principale va
se coller au menu de gauche.
Ici, on ne précise pas la hauteur puisque c'est la page
étirable suivant le contenu.
Pour le design de cette partie, vous pouvez assigner un background répétitif sur l'axe des Y qui s'étendra avec la page.
float:left;
position:relative;
left:0px;
width:485px;
Conclure la page avec un footer qui suit l'étirement de la page principale
Placez toujours vos blocs en position relative.
Cette fois-ci, vous devez utiliser la commande CSS
clear:both.
Cela aura pour effet de
placer le footer en dessous de tous les blocs précédents,
le footer
suivra donc l'allongement de la page principale automatiquement.
position:relative;
width: 770px;
height:80px;
clear:both;
Modifications et problèmes possibles
Pour
effectuer tous vos tests, je vous conseille d'utiliser la
WebDeveloper Toolbar qui vous permettra des modifier votre CSS et de voir le résultat en temps réel.
Pour adapter votre design à une autre résolution ou pour afficher correctement les background CSS, vous devez changer les valeurs de width.
Si votre background CSS ne s'affiche pas entièrement, précisez les paramètres width / height de votre bloc CSS.
Si tout n'est pas réglé au pixel près sous Internet Explorer, vous pouvez utiliser des
hacks CSS pour IE ou des commentaires conditionnels.
Télécharger les fichiers source HTML et CSS
Voici un exemple simple qui vous permettra de commencer votre site 3 colonnes.
Placez ces deux fichiers dans le même dossier pour que le ciblage fonctionne.
Pour enregistrer ces fichiers, clic droit > Enregistrer la cible sous ...
Si vous avez des problèmes avec l'intégration CSS de votre site, laissez un commentaire sur cet article.
