/* 1. Les sélecteurs */ /* 2. Les sélécteurs d'identifiant id */ /* 3. Les classes*/ /* 4. Les pseudo-classes */ /* 1. Les sélecteurs */ body { /* Définition des marges extérieures et intérieures de l'élément . */ margin:0; padding:0; /*overflow:hidden;*/ text-align:center; /* Permet de palier à un bug d'IE et de centrer le design*/ font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#FCF8E5; background-image:url(../medias/images/design_site/fond.png); background-repeat:repeat-x;/* Par défaut, l'image de fond est répétée horizontalement et verticalement, et occupe tout l'espace disponible de l'élément. Pour modifier cette caractéristique, nous pouvons limiter le type de répétition à l'aide de la propriété background-repeat. Avec la valeur repeat-x, l'image n'est répétée que horizontalement en haut de l'élément. */ }/*OK*/ div { height:auto; }/*OK*/ p { margin:0; border:0; padding:0; font-size: 11px; color: #333333; text-align: left; height:auto; line-height:15px; }/*OK*/ br{ margin:0; border:0; padding:0; line-height:15px; }/*OK*/ /* 2. Les sélécteurs d'identifiant id */ /* Le sélecteur d'identifiant #haut contient #en_tete ainsi que l'ensemble des id qui constituent le menu horizontal. Il constitue le haut de la page. */ #haut{ position:relative; margin-left: auto; margin-right: auto; width:1024px; height:227px; }/*OK*/ #bandeau{ position:absolute; left:784px; top:10px; width:220px; }/*OK*/ #en_tete{ height:177px; background-image:url(../medias/images/design_site/en_tete_0.png); background-repeat:no-repeat; background-position:center top; }/*OK*/ /* Le menu horizontal */ #menu_1{ position:absolute; left:0px; top:177px; width:302px; height:50px; background-image:url(../medias/images/design_site/menu_1.png); }/*OK*/ #menu_2 a{ position:absolute; left:302px; top:177px; width:96px; height:50px; background-image:url(../medias/images/design_site/menu_2.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_2 a:hover{ background-position:right; }/*OK*/ #menu_3 a{ position:absolute; left:398px; top:177px; width:158px; height:50px; background-image:url(../medias/images/design_site/menu_3.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_3 a:hover{ background-position:right; }/*OK*/ #menu_4 a{ position:absolute; left:556px; top:177px; width:178px; height:50px; background-image:url(../medias/images/design_site/menu_4.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_4 a:hover{ background-position:right; }/*OK*/ #menu_5 a{ position:absolute; left:734px; top:177px; width:165px; height:50px; background-image:url(../medias/images/design_site/menu_5.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_5 a:hover{ background-position:right; }/*OK*/ #menu_6 a{ position:absolute; left:899px; top:177px; width:95px; height:50px; background-image:url(../medias/images/design_site/menu_6.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_6 a:hover{ background-position:right; }/*OK*/ #menu_7{ position:absolute; left:994px; top:177px; width:30px; height:50px; background-image: url(../medias/images/design_site/menu_7.png); }/*OK*/ /* Le sélecteur d'identifiant #centre contient #gauche, #milieu et #droite. Il constitue le centre de la page. */ #centre{ position:relative; margin-left:auto; margin-right:auto; width:1024px; /* Largeur en pixels du bloc centre. */ background-image:url(../medias/images/design_site/centre.png); background-repeat:repeat-y; background-position:center top; }/*OK*/ #gauche{ float:left; position:relative; width:301px;/* Largeur en pixels du bloc texte_gauche. */ z-index: auto; }/*OK*/ #milieu{ float:left; position:relative; left:0px;/* Signifie que le bloc texte_centre se trouve positionner contre le bord extérieur droit du bloc texte_gauche. */ width:713px;/* Largeur en pixels du bloc texte_gauche. */ }/*OK*/ #milieu_gauche{ float:left; position:relative; left:0px;/* Signifie que le bloc texte_centre se trouve positionner contre le bord extérieur droit du bloc texte_gauche. */ width:306px;/* Largeur en pixels du bloc texte_gauche. */ }/*OK*/ #milieu_droite{ float:left; position:relative; left:0px;/* Signifie que le bloc texte_centre se trouve positionner contre le bord extérieur droit du bloc texte_gauche. */ width:306px;/* Largeur en pixels du bloc texte_gauche. */ }/*OK*/ /* Le sélecteur d'identifiant #footer constitue le bas de la page. */ #bas{ position:relative; width:1024px; height:100%; clear:both; /* Agit, dans la cas présent, sur la position du footer. */ background-image:url(../medias/images/design_site/centre.png); }/*OK*/ /* 3. Les classes*/ .bandeau{ font-size:9px; }/*OK*/ .gauche { margin-left:10px; margin-right:10px; text-align: center; color: #E2E2E2; }/*OK*/ h1.texte_centre { font-size: 12px; color: #333333; background-image:url(../medias/images/design_site/cartouche_titre.png); background-repeat:no-repeat; text-indent:10px; text-align:left; white-space:pre; display:block; margin-top:0px; margin-bottom:10px; margin-left:25px; line-height:35px; }/*OK*/ h3.texte_centre_haut { font-size:11px; color:#FF9900; }/*OK*/ .texte_centre_haut { background-image:url(../medias/images/design_site/cartouche_texte_haut.png); background-repeat:no-repeat; text-indent:10px; text-align:left; white-space:pre; display:block; margin-top:0px; margin-bottom:0px; margin-left:25px; line-height:35px; } .texte_centre { margin-top: 0px; margin-bottom: 20px; margin-right : 25px; margin-left : 35px; text-align:left; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .texte_centre_droite { margin-top: 0px; margin-bottom: 0px; margin-right : 25px; margin-left : 25px; text-align:right; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .texte_bas { margin-top: 0px; margin-bottom: 0px; margin-right : 25px; margin-left : 93px; color:#87AF32; text-align:left; max-width: 200px; } /* 4. Les pseudo-classes */ /* Les pseudo-classes applicables aux liens*/ /* La pseudo classe : link permet d'attribuer un style à un lien qui pointe vers un document non encore vu. C'est l'état normal de tous les liens à l'ouverture de la page. */ a:link { color: #FFFFFF; text-decoration: none; /* Par défaut, les liens sont écrits en bleu et soulignés. Si l'on souhaite qu'ils ne soient plus soulignés, il faut donner la valeur "none" à la propriété "text-decoration" */ }/*OK*/ a.bandeau:link{ color: #000000; }/*OK*/ a.lien_gris:link{ color: #99B1D0; }/*OK*/ /* La pseudo classe : visited permet d'attribuer un style à un lien qui pointe vers un document déjà vu, après un retour sur la page d'origine. */ a:visited { color: #FFCC66; text-decoration: none; }/*OK*/ a.lien_gris:visited{ color: #68676B; }/*OK*/ /* Les pseudo-classes dynamiques*/ /* La pseudo classe dynamique : focus permet d'attribuer un style à l'élément qui a le focus, soit qu'il lui ait été donné par le code XHTML à l'aide des attributs tabindex ou accesskey, soit qu'il l'ait obtenu par un déplacement du pointeur provoqué par l'internaute. */ a:focus { color: #FF9900; text-decoration: none; }/*OK*/ a.lien_gris:focus{ color: #6C94C7; }/*OK*/ /* La pseudo classe dynamique : hover permet d'attribuer un style à un élément visible dont la zone est survolée par le pointeur de la souris. Quand le pointeur quite cette zone, le style est annulé, ce qui peut produire des effets visuels intéressants. */ a:hover { color: #FF9900; text-decoration: none; }/*OK*/ a.lien_gris:hover{ color: #6C94C7; }/*OK*/ a img { border: none; }