html, body, div /*L'élément prend bien 100 % de la hauteur de , qui à son tour prend 100 % de la hauteur de .
Ce dernier prenant 100 % de la hauteur du cadre d'affichage du navigateur.*/
{
height: 100%;
margin: 0 auto;
}
body
{
max-width: 1000px;/*1200 tout le design est concerné par la limite. En gros cela permet de garder le site avec de bonnes proportions*/
margin: 0 auto; /*le design se centrera tout seul si la largeur de la définition d'écran dépasse la valeur de max-width.*/
/*Seulement, si la largeur affichée est inférieure, il n'y aura tout simplement pas de marge. Pour résoudre ce problème, il suffit
d'ajouter une marge externe à gauche pour #menu et une marge externe à droite pour #contenu.*/
background: #000080 ;
min-width: 768px; /*ajouter pour faire en sorte qu'il y ait un ascenseur horizontal pour éviter les chevauchements de bloc*/
overflow:auto;
background-image: url('couleur7.png');
no-repeat center center fixed; /*cette ligne + les quatre en dessous pour que l'image de fond soit étiré sur toute la surface*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header
{
text-align: center; /*centrer le contenu du header*/
font-family: "Comic Sans MS", Arial, Times, sans-serif;
height: 230px; /*hauteur du header qui est égal a la hauteur en px de l'image */
margin: 20px auto;/*centre le bloc*/
width:100%;
}
#header, img {
border-style:none;
}
#menuhaut
{
/*border: 1px solid black; bordure pour mieux voir ou se situe le menu haut*/
text-align: center; /*centrer le contenu du menu haut*/
font-family: "Comic Sans MS", Arial, Times, sans-serif;
height: 40px; /*hauteur du menu haut qui est égal a la hauteur en px de l'image */
margin: 10px auto;/*centre le bloc*/
min-width:100%; /*il s'agit du fond gris qui se situe SOUS la navigation (sous les différents onglets)*/
margin-bottom: 0px; /*pour mettre une marge entre le menuhaut et le contenu + menu droite*/
background-color: #333333;
white-space:nowrap;
z-index:10; /*pour que le menu passe bien au dessus du bandeau d'actu (qui est en z-index:1)*/
position:relative;
}
#contenu
{
/*border: 1px solid black; ajout de la bordure pour le contenu*/
background-color: #333333;
overflow:auto; /* cache tout ce qui dépasse: si on l'enlève le fond gris s'en va (puisque on a height auto aussi)
sans height auto et en laissant overflow hidden on a le fond gris du contenu et le centre blanc qui sont de mm hauteur mais
le centre est coupé*/
height:auto;
width:auto;
}
#contenu h2
{
margin: 10px 0 10px 20px; /*eshtétique du titre "présentation du site" pour le contenu */
}
#centre {
float:left;
width:70%; /* 70% 600px */
height:100%;
margin: auto;
margin-left: 1%;
margin-top: 1%;
margin-bottom:1%;
}
#menu
{
float: right; /*pour que le menu flotte a droite => le contenu arrive alors collé
a la bordure droite du menu (si on laisse le css avec que ca donc il faut mettre une marge*/
margin-left: 0px; /*10 px bordure entre le contenu et le menu de droite*/
margin-right:35px; /*35 px bordure entre le contenu et le menu de droite*/
width:23%; /*25% largeur du menu de droite*/
}
#menu1, #menu2, #menu3
{
margin-top:4%;
width:100%; /*largeur du menu1 de droite: c'est 100% du div menu*/
height:40%;
text-align:center;
}
#footer
{
text-align: center; /*on peut juste le centrer puisque le conteneur prend deja toute la largeur disponible*/
background-color:#333333;
margin-top:0px;
height:60px;
position:relative; /*A ENLEVER QUAND PROBLEME DU CONTENU SERA RESOLU*/
}
/*------------------------------style de police du footer --------------------------------*/
.footer {
font-size: 14px;
font-weight: bold;
font-family: Calibri;
color: #FFFFFF;
text-align:center;
}
/*------------------------------style des bordures des blocs --------------------------------*/
.fieldset4
{
border:1px solid #C0C0C0;
-moz-border-radius:8px; /*pour firefox*/
-webkit-border-radius:8px; /*pour chrome*/
border-radius:8px;
background-color: #FFFFFF;
}
/*-----------------------------style du menuhaut horizontal--------------------------- */
#nav, #nav ul{
margin: auto; /*centre le menu */
padding: 0;
list-style-type:none; /* pour éviter qu'il y ait des puces comme pour une liste */
list-style-position:outside;
position:absolute;
line-height:2em; /*hauteur des lignes du menu */
font-size: 16px;
font-family: "Kristen ITC", Trebuchet MS, Calibri;
}
#nav a{
display:block;
padding:0px 4px; /*marge a droite entre bordures menus et texte*/
border:1px solid #333;
color:#fff; /*couleur du texte du menu (blanc)*/
text-decoration:none; /*pas de soulignement des liens*/
background-color: #333; /*couleur de fond du menu (gris clair)*/
}
#nav a:hover{
background-color:#fff; /*couleur de fond lorsque la souris passe dessus*/
color:#333; /*couleur du texte lorsque la souris passe dessus (gris clair)*/
}
#nav ul {
position:absolute;
display:none;
width:12em; /*largeur de la case de second niveau = a celle de premier niveau*/
top:2.1em; /*espace entre la case du premier niveau et celle du deuxième niveau. Si pb (espace entre les deux cases qui fait que
on ne peut pas accéder a la case de second niveau) alors mettre 2em. La c'est 2.1 pour éviter que la première case du second
niveau se retrouve chevauché légèrement sous la case de premier niveau*/
}
#nav li{
float:left;
position:relative;
}
#nav li ul a{
width:12em; /*largeur de la case de second niveau = a celle de premier niveau*/
height:auto;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em; /*espacement à droite entre une case de deuxième niveau et une case de troisième niveau = a la largeur de la case de deuxième niveau (12em)
(qui est égal a la largeur de la case de premier niveau) pour que la case de troisième niveau soit collée à celle de second niveau*/
margin:0px 0 0 10px; /*marges pour le menu de second niveau*/
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}