body
{
font-family: Times New Roman;
margin-top: 20px;
margin-bottom: 20px;
background-color:black;
color:white
}
#titre
{
font-family: Impact; color: white;
position: absolute;
top: 1cm; right: 6cm
}
#titre H1
{
font-size: 300%; color: white;
background: #008
}
#titre P, #titre H1
{
margin: 0; text-align: right;
}
#principal
{
position: absolute;
top: 4cm; left: 1cm;
width: 80%; padding: 0.5em;
background: #eee;
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("<a href="http://www.icone-gif.com/gif/sports/athletisme/athletisme011.gif" target="_blank">http://www.icone-gif.com/gif/sports/athletisme/athletis...</a>");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 150px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #FBB117;
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu h3 /* Tous les titres de menus */
{
color: #254117;
font-family: Times New Roman, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("<a href="http://www.icone-gif.com/gif/sports/balle_tennis/balle_tennis001.gif" target="_blank">http://www.icone-gif.com/gif/sports/balle_tennis/balle_...</a>"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #E42217;
font-family: Alba Super, " Alba Super", " Times New Roman", Times, serif;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #46C7C7;
color: white;
}
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: white;
background-color: white; /* Une couleur de fond pour le corps */
background-image: url("images/motif.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
text-align: right;
}
#corps h1 /* Tous les titres h1 du corps */
{
color: white;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}