/* ---------------------------------------------------------------- *
Feuille de style CSS
* --------------------------------------------------------------- */
/**************************************************************************/
/* page d'introduction */
/**************************************************************************/
#general_accueil{ /* caractéristiques du bloc général de la page d'introduction */
position:relative;
margin-left : auto;
margin-right :auto;
position : absolute; /* définition des marges pour centrer le bloc horizontalement et verticalement */
left :50%;
top:50%;
margin-top:-290px;
margin-left:-500px;
width: 1000px; /* largeur du bloc*/
height: 580px; /* hauteur du bloc*/
line-height: 50px; /* centrer le texte dans le bloc */
border: 0px solid #000000 ;
background-image:url(../images/complexe_sportif5.jpg); /* insertion de l'image en fond d'écran */
background-attachment:fixed;
background-repeat: no-repeat;
-moz-border-radius: 0px;
overflow:hidden; /* valeur permettant d'arrondir le cadre*/
}
/**************************************************************************/
.titre /* caractéristiques du titre de la page d'introduction */
{
position:relative; /* positionnement de la zone en valeur relative */
top:50px; /* définition en nombre de pixels de l'espace entre le haut et le texte*/
font-family:Arial,Helvetica; /* style et taille de police choisis pour le texte contenu dans cette zone */
font-size:30pt;
}
/**************************************************************************/
.image_gauche /* caractéristiques des images défilantes */
{
position:relative; /* positionnement de la zone en valeur relative */
top:240px; /* définition en nombre de pixels de l'espace entre le haut et le texte*/
left:100px; /* positionnement par rapport à la gauche */
width:277px; /* largeur du bloc */
height:200px; /* hauteur du bloc */
font-family:Arial,Helvetica; /* style de police choisis pour le texte contenu dans cette zone */
border: 2px solid #000000 ;
}
/**************************************************************************/
.image_droite /* caractéristiques des images défilantes */
{
position:relative; /* positionnement de la zone en valeur relative */
top:40px; /* définition en nombre de pixels de l'espace entre le haut et le texte*/
left:618px; /* positionnement par rapport à la gauche */
width:277px; /* largeur du bloc */
height:200px; /* hauteur du bloc */
font-family:Arial,Helvetica; /* style de police choisis pour le texte contenu dans cette zone */
border: 2px solid #000000 ;
}
/**************************************************************************/
.entree /* caractéristiques du bloc contenant le texte d'entrée sur le site */
{
position:relative; /* positionnement de la zone en valeur relative */
top:-100px; /* définition en nombre de pixels de l'espace entre le haut et le texte*/
font-family:Arial,Helvetica; /* style de police choisis pour le texte contenu dans cette zone */
text-decoration:none;
}
/**************************************************************************/
.visite /* caractéristiques du bloc contenant le compteur de visites */
{
position:relative; /* positionnement de la zone en valeur relative */
top:-80px; /* définition en nombre de pixels de l'espace entre le haut et le texte*/
font-family: sans-serif; /* style de police choisis pour le texte contenu dans cette zone */
color : black;
text-align:center;
}
/**************************************************************************/
/* page d'accueil */
/**************************************************************************/
#general{ /* caractéristiques du bloc général de la page d'accueil */
position:relative;
margin-left : auto;
margin-right :auto;
text-align:left; /* définition des marges pour centrer le bloc horizontalement et verticalement */
position : absolute;
left : 50%;
top:50%;
margin-top:-290px;
margin-left:-500px;
width: 1000px; /* largeur du bloc*/
height: 580px; /* hauteur du bloc*/
line-height: 0px; /* centrer le texte dans le bloc */
border: 1px solid #000000 ;
-moz-border-radius: 0px; /* valeur permettant d'arrondir le cadre*/
overflow:hidden; /* suppression du scroll du bas */
}
/**************************************************************************/
.bandeau_horizontal /* caractéristiques du bandeau horizontal */
{
position:relative; /* positionnement de la zone en valeur relative */
top:0px;
left:150px;
width:850px; /* largeur du bandeau */
height:120px; /* hauteur du bandeau */
border: 1px solid #000000 ;
}
/**************************************************************************/
.bandeau_vertical /* caractéristiques du bandeau vertical */
{
position:absolute; /* positionnement de la zone en valeur relative */
top:0px;
width:150px;
left:0px; /* largeur du bandeau */
height:580px; /* hauteur du bandeau */
border: 0px solid #000000 ;
background-image:url(../images/bandeau_vertical.bmp); /* insertion de l'image en fond d'écran */
background-repeat: no-repeat; /* ne pas répéter le fond d'écran */
/* superposer le bandeau par dessus le main */
}
/**************************************************************************/
.fete /* caractéristiques du bloc contenant la date du jour et la fête */
{
position:relative; /* positionnement de la zone en valeur relative */
top:30px;
width:146px; /* largeur du bloc */
height:50px; /* hauteur du bloc */
border: 0px solid #000000 ;
font-size:8pt; /* taille du texte */
line-height:12pt; /* hauteur de ligne */
}
/**************************************************************************/
.saison /* caractéristiques du bloc contenant les années de la saison */
{
position:relative; /* positionnement de la zone en valeur relative */
top:80px;
left:1px;
width:145px; /* définition de la largeur */
height:20px; /*définition de la hauteur de la zone en nombre de pixels */ /* alignement des traits à gauche, les HR étant du texte la de centrage du texte dans la zone */
font-family:Arial,Helvetica;
font-size:12pt;
color:white; /* couleur de texte blanc */
border: 0px solid #000000 ;
line-height:10pt;
}
/**************************************************************************/
/* menu vertical */
/**************************************************************************/
dl, dt, dd, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu_vertical { /* caractéristiques du bloc contenant le menu vertical */
position: absolute; /* positionnement du bloc en valeur absolue en nombre de pixels*/
top: 170px;
left:0px;
width:149px; /* définition de la largeur */
height:80px; /* définition de la hauteur */
border: 0px solid #000000;
z-index:2;
}
#menu_vertical dt { /* caractéristiques du 1er niveau de menu */
color: #000000;
cursor: pointer;
background: #FF0000;
height: 35px;
width:145px;
line-height: 10px;
margin: 0px;
border: 1px solid #EEEEFF;
text-align: center;
font-size:12pt;
padding:2px;
}
#menu_vertical dt:hover { /* caractéristiques du 1er niveau au passage de la souris */
background: #FFFFFF;
display: block;
text-transform: uppercase;
font-weight:bold;
color:black;
}
#menu_vertical dd { /* caractéristiques du 2ème niveau de menu */
position: absolute;
left: 145px;
margin-top: -35px;
width: 150px;
border: 1px solid #EEEEFF;
background: #FF0000;
}
#menu_vertical ul {
padding: 0px;
}
#menu_vertical li {
text-align: left;
font-size: 12pt;
line-height: 8px;
margin-top:8px;
margin-bottom:8px;
}
#menu_vertical li a {
color: #FFFFFF;
text-decoration: none;
display: block;
background: #FF0000;
}
#menu_vertical li a:hover { /* caractéristiques du 2ème niveau au passage de la souris */
text-decoration: underline;
text-transform:capitalize;
color:black;
}
/**************************************************************************/
.news /* caractéristiques du bloc contenant les années de la saison */
{
position:relative; /* positionnement de la zone en valeur relative */
top:190px;
left:0px;
width:145px; /* définition de la largeur */
height:230px; /*définition de la hauteur de la zone en nombre de pixels */ /* alignement des traits à gauche, les HR étant du texte la de centrage du texte dans la zone */
font-family:Arial,Helvetica;
font-size:12pt;
color:white; /* couleur de texte blanc */
border: 0px solid #000000 ;
line-height:10pt;
}
/**************************************************************************/
#brech{ /* Bloc contenant le module de recherche du site */
position:absolute;
top:515px;
left:1px;
margin-top:1px;
width:148px; /* largeur du bloc*/
height:50px; /* hauteur du bloc*/
line-height:20px; /* centrer le texte dans le bloc */
border: 1px solid white;
background-color:;
text-align: left;
font-family:Arial,Helvetica;
font-size:10pt;
color: white;
}
/**************************************************************************/
#main{ /* caractéristiques du main */
position:absolute;
top:152px;
left:150px;
width:849px; /* largeur du bloc*/
height:427px; /* hauteur du bloc*/
text-align:justify;
line-height: 25px; /* centrer le texte dans le bloc */
border: 0px solid #000000 ;
color: #000000;
overflow: scroll; /* insertion d'un scroll */
font-family:Arial,Helvetica;
z-index:1; /* placer le main en dessous du bandeau vertical */
}
/**************************************************************************/
/* menu horizontal */
/**************************************************************************/
#menu {
LEFT:150px; POSITION: ABSOLUTE; TOP: 130px
}
#menu {
WIDTH: 850px}
#menu DT {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #fff ; MARGIN: 2px 0px; BORDER-LEFT: black 1px solid; CURSOR: pointer; LINE-HEIGHT: 20px; BORDER-BOTTOM: black 1px solid; HEIGHT: 20px; TEXT-ALIGN: center
}
#menu DD {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid
}
#menu LI {
BACKGROUND: #c0c0c0; TEXT-ALIGN: center
}
#menu LI A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: black; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: black; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
BACKGROUND: #eee
}
#menu DT A:hover {
BACKGROUND: #eee
}
.mentions {
LEFT: 10px; COLOR: #000; POSITION: absolute; TOP: 300px; BACKGROUND-COLOR: #ddd
.menu, .ssmenu {
background-color:#AA8922;
color:white;
font-size:12px;
font-weight:bold;
font-family:"MS Sans Serif", "sans-serif", Verdana, Arial;
border:1px solid #EFB;
padding:1px;
/* width et margin sont au cas où le javascript est désactivé. */
width:15em;
margin:1em;
}
/* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */
.menu {
text-align:center;
}
/* .ssmenu = Les parties "déroulantes" qui s'affiche au survol d'un .menu */
.ssmenu {
/* aller pour faire joli sur IE, un petit effet de dégradé !
Pour voir d'autres effets :
http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm
Par exemple :
transparence à 25% = opacité à 75%:
FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=75);
"Glow" :
FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ffdead,strength=5);
Ombre en bas à droite, 5 px :
FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#ff8c00,strength=5);
*/
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AA8922,endColorStr=#543210);
white-space : no-break;
}
.menu span, .ssmenu span {
/* Ne pas toucher
C'est pour cacher les ; en fin de , ce qui permet aux synthèse vocales de prendre une
pause dans l'élocution */
display:none;
}
.ssmenu ul, .ssmenu li {
/* Ne pas trop toucher.
Les items (les ) des sous-menus, notamment pour enlever les puces des liste */
padding:0;
margin:0;
list-style-type:none;
}
.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
/* Les liens qui ne sont pas sous le curseur. */
color:white;
padding:2px 1px;
text-decoration:none;
/* Ne pas modifier le block */
display:block;
/* Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison
aucun width et height:100% marche sur tous, donc ne pas toucher ces 2 lignes */
/* height:100%;
margin:0px;*/
margin:0px;
width:100%;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
width:auto;
}
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
/* Les liens sous le curseur.
On change les couleurs du texte et de fond, et on enlève le soulignement.
*/
background-color:#EFB;
color:black;
text-decoration:none;
}
img {
/* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure
car c'est vilain :-p */
border:none;
}
.ssmenu img {
/* un petit espacement entre l'image et le texte du lien blabla */
margin-right:2px;
}
.ssmenu img.hr {
/* Encore un peu expérimental, un
entre deux items pour faire un "séparateur"... */
margin-top:1px;
margin-bottom:1px;
margin-left:0;
margin-right:0;
width:100%;
display:block;
}
/*
Bref... pour résumer, ce qu'il y a à modifier à la base, c'est :
- couleurs, police, bordure.
- l'effet spécial IE pour les ssmenu si on aime ça...
- police et couleurs des liens "non survolés" et "survolés".
*/