/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| | FEUILLE DE STYLE | |------------------------------------------------------------------------------| | | | feuille de style principale : | | balises principales et architecture du site | | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| | 3.0.0 Benjamin COIFFARD - juin 2010 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/ /* Styles des balises génériques -------------------------------------------------------------------------------- Les balises génériques sont celles utilisées sur l'ensemble des pages du site. Ce sont par exemple les liens, les titres, etc ... ------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------- Les marges et padding sont réinitialisées à zéro pour toutes les balises ------------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } /* ----------------------------------------------------------------------------- Les liens ne sont pas soulignés, et de couleur bordeau, intensifié lors du survol ------------------------------------------------------------------------------*/ a { text-decoration: none; color: #c30; } a:hover { color: #f90; } /* ----------------------------------------------------------------------------- Chaque niveau de titre a son style défini ------------------------------------------------------------------------------*/ h1 { position: absolute; top: 24px; left: 120px; color: #336699; font-size: 2.4em; cursor: default; } /* Découpage et organisation des blocs principaux de la page -------------------------------------------------------------------------------- Les pages du site sont organisées de façon similaire sur l'ensemble des pages du site. L'oganisation est la suivante : ------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------- La balise englobe l'ensemble du contenu de la page. C'est à ce niveau que sont définies les couleurs de fond de page, ainsi que les styles génériques, telles que les polices et couleurs de texte. ------------------------------------------------------------------------------*/ body { background-image: url(../image/ambiance/degrade.png); background-color: #ccc; background-repeat: repeat-x; font-family: verdana, arial, helvetica, sans-serif; color: #000; } /* ----------------------------------------------------------------------------- L'élément "global" est le bloc racine de l'arbre HTML des blocs visibles. C'est à dire que tous les éléments de la page sont contenus dans cet élément. Du fait de sa largeur fixe, et de son positionnement automatique, il concentre les éléments du site sur une colonne de 1000 pixels de larges au centre de la fenêtre. ------------------------------------------------------------------------------*/ #global { position: relative; width: 1000px; margin: 0 auto auto auto; z-index: 0; } /* ----------------------------------------------------------------------------- L'élément "entete" est un bloc située en haut de la page, et en occupe toute la largeur. ------------------------------------------------------------------------------*/ #entete { position: relative; width: 1000px; height: 100px; margin: 10px auto 0 auto; z-index: 10; background-image: url(../image/ambiance/entete.png); } #entete_soustitre { position: absolute; top: 70px; left: 120px; font-size: 0.8em; font-style: italic; color: gray; cursor: default; } /* ----------------------------------------------------------------------------- L'élément "corps" est le bloc principal de la page, puisque c'est celui qui contient le contenu actif de la page. ------------------------------------------------------------------------------*/ #corps { position: relative; float: left; width: 1000px; background-image: url(../image/ambiance/corps.png); background-repeat: repeat-y; z-index: 20; } /* ----------------------------------------------------------------------------- L'élément "menu" est un bloc située sur la gauche de la page ------------------------------------------------------------------------------*/ #menu { position: relative; float: left; width: 260px; } /* ----------------------------------------------------------------------------- L'élément "contenu" est un bloc située sur l'espace restant à droite du menu, c'est à dire la plus grande partie de la page ------------------------------------------------------------------------------*/ #contenu { position: relative; float: left; width: 700px; } /* ----------------------------------------------------------------------------- L'élément "pied" est un bloc située en bas de page ------------------------------------------------------------------------------*/ #pied { position: relative; clear: both; width: 1000px; height: 40px; margin: 0 auto auto auto; z-index: 30; background-image: url(../image/ambiance/corps.png); background-repeat: repeat-y; } #pied p { position: relative; width: 940px; top: 20px; left: 10px; text-align: center; font-size: 0.8em; cursor: default; border-top: 1px solid gray; } #pied p em { color: gray; } #pied p a { color: gray; } #pied p a:hover { color: black; }