html,body
{
background-color : white;
}
p,ul,li,td
{
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : rgb(33, 0, 102);
}
h1
{
font-size : 200%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : rgb(33, 0, 102);
text-align: center;
}
h2
{
font-size : 130%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : rgb(102, 51, 0);
padding-bottom:8px;
padding-top:25px;
text-align:left;
border-bottom : 1px solid
}
/* %%%%%%%%% PAGE ET ELEMENTS COMMUNS %%%%%%%%%% */
#page{
width:1024px;
background-color : rgb(253, 255, 229) ;
background-image : url('images/fond-menubar-230.png');
background-repeat: repeat-y; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
border: 1px solid black;
margin-left : auto;
margin-right : auto;
}
#entete {
width:1024px;
height:100px;
background-color:rgb(255, 204, 102);
border: 1px solid black;
border-bottom-style:none;
margin-left : auto;
margin-right : auto;
margin-top : auto;
margin-bottom : auto;
padding:0;
background: transparent url(images/entete.jpg) top left no-repeat; /* arrière-plan général du menu - image simple 1024*100px */
}
#entete ul, li , p{ /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
#entete ul {
width: 1024px;
position : relative;
top :5px;
}
#entete li {
display: inline;
} /* correction pour IE5 et IE5.5 */
#entete li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de pour lui donner des dimensions */
height: 24px;
width: 1000px;
text-decoration: none;
line-height: 20px; /* hauteur de ligne pour éviter les paddings */
margin-bottom: 0px;
}
#entete a{
display : block;
text-align : right;
text-decoration : none;
color : rgb(0, 0, 0);
padding-right : 20px;
font-weight: bolder;
}
#entete li a:hover {
color: #fff;
background: transparent url(images/entete.jpg) top left no-repeat; /* image de fond */
}
#entete a#lien1:hover {
background-position: 0% -105px; /* décalage de l'arrière-plan pour chaque bouton */
}
#entete a#lien2:hover {
background-position: 0% -129px; /* décalage de l'arrière-plan pour chaque bouton */
}
#entete a#lien3:hover {
background-position: 0% -153px; /* décalage de l'arrière-plan pour chaque bouton */
}
#entete a#lien4:hover {
background-position: 0% -177px; /* décalage de l'arrière-plan pour chaque bouton */
}
#piedpage {
clear: both;
width:100%px;
height:35px;
padding:10px;
background-color:rgb(255, 204, 102);
text-align: center;
border-top: 1px solid black;
}
#menubar {
float:left;
width:230px;
background-color:rgb(255, 204, 102);
}
#menu {
list-style-type:none;
margin:0;
padding:0;
padding-top:20px;
}
#menu a {
display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
/*height: 22px; Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
line-height: 200%; /* Centrer le texte verticalement sur la ligne */
/* background: url('images/bouton-bleufonce-bleu.png'); Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
text-align: left; /* Centrer le texte sur la colonne du sous-menu */
text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */
color:rgb(102, 51, 0); /* Le texte est marron */
margin: 2px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
padding:0;
padding-left : 20px;
}
#menu a:hover, /* Au survol de la souris */
#menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */
background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
background-position: 0 -22px; /* =44 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}
#menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
font-weight: bold; /* Gras... */
text-decoration: underline; /* ... et souligné */
}
#sous-menu {
list-style-type:none;
margin:0;
padding:0;
padding-bottom:5px;
}
#sous-menu a {
display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
/*height: 22px; Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
padding-top : 2px;
padding-bottom:6px;
padding-left:40px;
line-height: 110%; /* Centrer le texte verticalement sur la ligne */
/* background: url('images/bouton-bleufonce-bleu.png'); Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
}
#hauteur-minimale {
float : left ;
width: 0px ;
height : 600px ;
}
/* %%%%%%%%% CONTENU %%%%%%%%%% */
#contenu {
margin: 25px 25px 25px 256px; /* 211px = 230px (largeur du menu) + 1 (bordure droite du menu) + 10 (la marge que l'on veut donner au contenu) */
}
#contenu h1{
margin-bottom: 2em;
margin-top:2em;
}
#contenu p {
text-align:justify;
text-indent: 2em;
margin-bottom: 2em;
font-size : 110%;
}
#contenu p.legende{
text-align : center;
font-size : 90% ;
font-style : italic ;
width:300px;
}
#contenu li {
padding-bottom : 0.5em;
}
#contenu .arret-float{
clear:both;
height : 0px;
padding : 0px ;
margin : 0px ;
}
#contenu .prof-cadre{
margin-top : 20px ;
margin-right : 10px;
margin-bottom : 20px;
margin-left : 10px;
width :702px;
border: 6px solid rgb(255, 204, 102);
}
#contenu .prof-encart {
float:left ;
width : 210px ;
height : 300px ;
border: 6px solid rgb(255, 204, 102);
margin : 0x; /* marges négatives, attention avant et après ! */
padding : 6px;
text-align : center;
}
#contenu .prof-encart p {
text-align: left;
margin : 15px ;
padding : 0px;
font-size : 100%;
text-indent:0em;
}
#contenu .imgauche{
float : left ;
margin-right : 30px;
}
#contenu .imdroite{
float : right ;
margin-left : 30px;
}
a:link {color: green; text-decoration:underline;}
a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}