Une structure sur mesure avec les marges négatives

Publié le par Francisek

Les structures définies dans le CSS sont la plupart du temps définies de manière fixe : chaque colonne de la structure (colonnes de navigation et colonne de contenu) a une largeur exprimée en pixels (pour over blog, environ 200px pour les colonnes de modules et 400 à 600 pour la colonne des articles, le tout contenu dans un élément de 800px) et une position flottante.
Le code HTML associé à cette structure est de la forme (chaque élément est colorisé pour les repérer dans les schémas):
<div id="header">Entête</div>
<div id="colonnes">
<div id="main">
<div id="content">Contenu</div>
</div>
<div id="rightnav">Barre de navigation</div>
</div>
<div id="footer">Pied de page ici</div>


Vous aurez noté que le <div id="colonnes"> n'existe pas dans la structure d'over-blog, il se nomme, selon le modèle troisCol, deuxColDroite ou deuxColGauche.
Passez la souris sur l'illustration ci-dessous pour avoir un aperçu de ce que donne ce type d'affichage sur un écran de résolution inférieure aux 800px nécessaires.

#header (800px)
L'entête est ici

#content (600px)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (200px)
Barre de navigation

#footer
Pied de page ici


Dans le CSS, nous aurons :
#global{width:800px}
#top{}
#main{width:600px;float:left;}
#rightnav{width:200px;float:left;}
#footer{clear:left;}

C'est la solution la plus simple (et donc la plus arbitraire) pour définir un positionnement de colonnes. Là où le bas blesse, c'est que sur de petits écrans (PC en 800x600, WebTV et pourquoi pas WAP), ça déborde de tous les cotés (à droite et en bas) tandis que sur de grandes résolutions, on perd en lisibilité.

La solution la plus généralement utilisée est de définir les largeurs de ces éléments en pourcentages. Cette solution simple, donne un résultat qui semble être satisfaisant.

#header (100%)
L'entête est ici

#content(80%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (20%)
Barre de navigation

#footer
Pied de page ici

Le CSS correspondant sera alors :
#global{width:100%}
#main{width:80%;float:left;}
#rightnav{width:20%;float:left;}
#footer{clear:left}
Le problème avec cette structure, c'est que sur de petits affichages la colonne de droite risque fort d'être beaucoup trop étroite pour afficher son contenu. Nous aimerions bien que sa largeur soit fixe malgré tout (à 200px).
Pour cela, nous pourrions placer les colonnes en position absolue, la colonne principale ayant une marge de droite de 200px, à condition que les deux colonnes soient placées dans un élément #deuxColDroite:

#header (100%)
L'entête est ici

#content(100%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (200px, position: absolute)
Barre de navigation

#footer
Pied de page ici

Le CSS correspondant sera alors :
#global{width:100%}
#colonnes{width:100%;position:relative;}
#main{width:100%;position:absolute;top:0;left:0;margin-right:200px}
#rightnav{width:200px;position:absolute;top:0;right:0}
#footer{clear:left}
Ca complique pas mal les choses, d'autant que le pied de page est recouvert par nos deux colonnes centrales (à cause du positionnement absolu). Cette solution n'est donc pas très adaptée. Pourtant l'idée de soustraire les 200px de la colonne principale est intéressante.
Nous allons donc l'exploiter avec une autre technique que utilisera des positions relatives.
Nous savons réserver une partie de la largeur de la colonne principale, il ne nous reste plus qu'à y placer la colonne de droite. Celle-ci va immencablement être renvoyée au dessous de la colonne principale. Et si nous lui affections une marge de gauche négative ?

#header (100%)
L'entête est ici

#content (100%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (200px)
Barre de navigation

#footer
Pied de page ici

Le CSS correspondant sera alors :
#global{width:100%}
#main{width:100%;margin-right:-200px;float:left;}
#content{margin-right:200px;}
#rightnav{width:200px;margin-left:-200px;float:right;}
#footer{clear:left}
Cette fois, nous obtenons le resultat escompté. De plus, en donnant une couleur de fond à #main dans le CSS, nous donnerons l'impression que les colonnes centrales et de droite on la même hauteur!

Publié dans CSS et Design

Commenter cet article

Mc O 26/05/2006 02:19

Ni la taille des images je suppose, j'ai donc abandonné.
Merci quand meme.

Francisek 29/05/2006 00:12

 Pour les images, c'est différent du texte. Tu peux fixer une dimension de l'image proportionnellement à celle de son contenant, sachant qu'utiliser la largeur est beaucoup plus compatible. Par exemple, associe la classe imgW100pc à tes images dans le HTML de l'article.Puis dans le CSS, place la définition de imgW100pc :.imgW100pc { width:100% }Si tu insères l'image depuis l'éditeur, n'oublie pas de supprimer ses dimensions !

Mc O 24/05/2006 14:49

salut , merci pour ton article d'aide.
Je me demandais si il etait possible de garder les meme proportion dans son blog , malgré des résolutuions different (autant en en 1280*960 qu'en 1024*768 ou 800*600) est ce avec les bannieres?
merci

Francisek 24/05/2006 23:02

 Il faut pour cela exprimer toutes les dimensions en pourcentage. Mais ça ne permet pas de changer la taille du texte.

Jeanette 28/04/2006 11:56

Bonjour francisek,
J'ai une question, je cherche sur ton site oh combien intéressant, les codes des smileys.
Je ne les trouve pas, je manque surement de pratique, mais pourquoi n'as-tu pas de recherche de mot clé sur ton site pour ton site ?
Est-ce impossible sur over-blog ?

Francisek 28/04/2006 14:50

  Bonjour, l'article en question est Des smileys dans ton blog, et hop, j'en profite pour ajouter le module de recherche (merci pour la suggestion).

Mademoiselle C. 20/04/2006 03:01

Super:):)Merci de ta réponse, je serais attentive à tes explications:)
A bientot

Mademoiselle C. 16/04/2006 16:41

Bonjour Francisek, superbe démonstration et explication que la tienne. Si j'ai bien compris, tout cela aboutit à avoir ce qu'on appelle un design fluide?
Quelles seraient les modifications à apporter pour un blog à 3 colonnes dans ce cas? Evidemment je prêche pour ma paroisse:):)mais je pense ne pas être la seule à utiliser un blog 3 colonnes:):)
Si tu peux m'aider sans que cela ne t'indispose trop, j'attends tes sages conseils:):)
A bientôt:)

Francisek 20/04/2006 00:06

 C'est un peu plus qu'un design fluide puisque l'une des colonnes a une taille fixe et l'autere une taille variable. Pour le trois colonnes, j'y reviendrai plus tard...