/** * This file is part of beeflora.info - http://www.beeflora.info * * Copyright (C) 2008 Nicolas CHOUALI * * Version : $Id: layout.css 214 2009-04-12 20:06:02Z drakkon $ * * LICENSE: GPL v3 * * This file is free software; you can redistribute it and/or * modify it under the terms of the GNU Library General Public * License as published by the Free Software Foundation; version 3 * of the License. * * This file is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Library General Public License for more details. * * You should have received a copy of the GNU Library General Public License * along with this library; see the file COPYING.LIB. If not, write to * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, * Boston, MA 02110-1301, USA. */ /* CSS Basée sur les tutoriels css.alsacreations.com - http://css.alsacreations.com/modeles/modele15.htm */ /**********/ /* Layout */ /**********/ /* --- POSITIONNEMENT --- */ /* Page */ body { padding: 20px 5px; } #global { width: 900px; margin: 0 auto; /* -> 3 */ } /* En-t�te */ #entete { padding: 20px 20px 0 20px; border-bottom : 1px solid #B1CCAC; } #entete img { float: left; /* margin: 0 20px 10px 0;*/ } #entete h1 img{ margin: 0 20px 10px 0; } #entete .sous-titre { margin: 4px 0 15px 0; } /* Menu de navigation */ #navigation { padding: 12px 0 0 0; } #navigation ul { width: 100%; overflow: hidden; margin: 0; padding: 0; list-style: none; } #navigation li.gauche { float: left; margin-right: 10px; font-size: 1.4em; } #navigation li.droite { float: right; margin-right: 0; margin-left: 10px; padding: 3px 0; } #navigation a { padding: 6px; line-height: 1.5; font-size: .9em; text-decoration: none; font-variant: small-caps; font-weight: bold; } /* Bloc central */ #centre { width: 100%; /* -> 4 */ overflow: hidden; /* -> 4 */ } /* Contenu principal */ #principal { float: left; /* -> 5 */ width: 560px; padding: 10px 20px; } #principal > :first-child { margin-top: 10px; } #principal p, #principal li { line-height: 1.5; } /* Contenu secondaire */ #secondaire { margin-left: 620px; /* -> 6 */ margin-right: 20px; padding: 12px 0; } #pied { width: 900px; margin: 0 auto; /* -> 3 */ } /* Navigation en pied de page */ #navigation-pied { padding: 12px 0 0 0; } #navigation-pied ul { width: 100%; overflow: hidden; margin: 0; padding: 0; list-style: none; } #navigation-pied li { float: right; margin-right: 0; margin-left: 10px; padding: 3px 0; font-size: 1.2em; } #navigation-pied a { padding: 6px; line-height: 1.5; } /* Mention de copyright */ #copyright { margin: 20px 0; font-size: .85em; text-align: center; } #copyright ul { width: 100%; overflow: hidden; margin: 0; padding: 0; list-style: none; } #copyright li { float: left; margin-right: 10px; margin-left: 0; } /* --- NOTES --- 1. Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe div#principal et div#secondaire uniquement. C'est ce conteneur que l'on utilise pour placer une image de fond r�p�t�e en hauteur, qui dessine le fond de la colonne de gauche et de la colonne de droite. Ainsi, quelle que soit la colonne la plus longue, on aura bien, visuellement, deux colonnes de hauteurs �gales. 2. On utilise ici des couleurs de fond pour div#principal et div#secondaire. Et pourtant, nous avons d�j� une image de fond, sur div#centre, qui �dessine� nos deux colonnes. Pourquoi rajouter des couleurs de fond � ces blocs, alors? C'est en fait une s�curit�, au cas o�: - l'image de fond mettrait du temps � se charger (�a arrive); - l'image de fond ne peut pas �tre charg�e (rare, mais �a arrive aussi). Ainsi, si ces probl�mes surviennent, le contenu restera lisible. Notamment le contenu de div#principal, qui est sombre, tandis que le fond de la page est d�j� sombre. Notez que dans certains cas ce genre de �s�curit�� sera difficile � mettre en place, par exemple parce que la couleur de fond des blocs masquerait une image de fond comportant des motifs. Mais, plus g�n�ralement, un bon design de site web devrait rester lisible m�me si les images sont d�sactiv�es (ce qui est une option de beaucoup de navigateurs). 3. Les marges automatiques � gauche et � droite permettent de centrer notre bloc div#global, et donc tout le site. Pour aligner div#global � gauche, on fera: margin-left: 0; margin-rigth: auto; Pour aligner div#global � droite, on fera: margin-left: auto; margin-right: 0; Pour aligner div#global � droite avec un retrait (� droite) de 100px: margin-left: auto; margin-right: 100px; 4. On utilise ces propri�t�s pour emp�cher le d�passement des flottants (cf. http://web.covertprestige.info/test/ 03-elements-flottants-et-element-parent-1.html). Le overflow:hidden cr�e un contexte de formatage qui vient contenir les flottants. Le width:100% a le m�me r�le, mais uniquement pour Internet Explorer 6 (utilisation du HasLayout). Dans l'id�al, on le placera avec des correctifs destin�s � IE6 dans une feuille de styles appel�e via un commentaire conditionnel. 5. C'est la propri�t� "float" qui nous permet de placer deux blocs c�te-�-c�te. Notez bien que l'�l�ment flottant (ici, notre contenu principal) doit �tre plac� en premier dans le code HTML. Il est pr�f�rable de lui donner une largeur, ce que nous faisons ici avec un "width: 560px;" (mais � cause du padding la largeur r�elle sera de 600px). 6. Les �l�ments flottants ne repoussent pas les blocs, mais repoussent uniquement leur contenu. Pour que notre bloc de contenu secondaire forme une colonne distincte du contenu principal, on lui donne donc une marge � gauche de 620px (largeur r�elle de div#principal + 20px). Il existe une autre technique pour adapter la largeur d'un bloc aux flottants qui le pr�c�dent. On pourra lire l'article suivant: http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/ design-trois-colonnes-positionnement-flottant */