/* Design du site Utilise le CSS */ /* ################################################# ##OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO## ##OO DEBUT DU FICHIER DE STYLE. OO## ##OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO## ################################################# */ /**************************** ############################* ## Balise ##* ############################* *****************************/ body /* On travaille sur la balise body, donc sur TOUTE la page */ { width: 92%;/*780px;*/ margin: 1%; /*auto; Pour centrer notre page *//*20px*/ margin-top: 5px; margin-bottom: 5px; /* Idem pour le bas du navigateur */ background-color: rgb(10, 24, 10); /* black; /* Le fond de la page */ } /*************************************************************************************************** ################################################## ## ## ## Styles basiques (titres, liens...) ## ## ## ################################################## *****************************************************************************************************/ /****************** Titres *******************/ h1 { font-size: xx-large; text-align: center; color: black; background-color: white; } h2 { font-size: large; text-align: center; color: white; /*yellow; */ border-bottom: 1px solid white; /*rgb(185, 40, 1);*/ } h3 { font-size: large; /*medium*/ color: silver; text-decoration: none; /*underline; /*border: 1px dotted rgb(185, 40, 1);*/ } .date { font-size: 20px; } #menu h3 { font-size: medium; color: gray; /*teal; white*/ /*background-color: black;*/ text-decoration: none; } h4 { font-size: medium; color: black; /*white gray*/ } #menu h4 { font-size: medium; color: gray; /*teal; white*/ /*background-color: black;*/ } h5 { color: blue; } h6 { color: silver; } /******************END "titres" *******************/ /*************** Toutes les liens : ****************/ a { color: rgb(80, 109, 195); /*lime; /*green; */ text-decoration: none; } a:hover /* Toutes les liens selectionnés*/ { color: rgb(87, 116, 202); /*lime;*/ text-decoration: underline; } /*******************END "Tous les liens" **********************/ img { border: none; vertical-align:middle; } img:screen { width: 80%; } /*********************************************************************************************************** ######################################### ## END Styles basiques ## ######################################### **************************************************************************************************************/ /***************************************** #########################################* ## id : header - menu - body - footer ##* #########################################* ******************************************/ /********************************************************************************************** ################## ## HEADER ## ################## ************************************************************************************************/ #header { width: 778px;/*100% 730px; 957 */ height: 140px; /* 107px;*/ margin: auto; margin-bottom: 10px; background-image: url("../img/sombre/head.png"); background-repeat: no-repeat; } /********************************************************************************************** ################ ## MENU ## ################ ************************************************************************************************/ #menu { float: left; /* Le menu flottera à gauche */ width: 13%; /* Taille du menu */ border: 2px solid white; /*red; */ font-size: small; font-weight: bold; font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif; background-color: rgb(79, 2, 2); } /* se trouvant dans un menu : */ .menu_base { margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */ } .menu_base ul /* Toutes les listes à puces se trouvant dans un menu */ { list-style-image: url("../img/ulBold.png"); /* On change l'apparence des puces */ padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */ padding-left: 30px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 30 pixels */ margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */ margin-bottom: 5px; /* On modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */ } .menu_base a /*, .options a, .sites a Toutes les liens*/ { color: red; } .menu_base a:hover /*, .options a:hover, .sites a:hover Toutes les liens selectionnés*/ { color: white; /*lime;*/ text-decoration: none; } /********************************************************************************************** ################ ## BODY ## ################ ************************************************************************************************/ /* Le corps de la page */ #body { width: 90%; margin-bottom: 20px; /* Pour éviter que le corps colle trop au pied de page en-dessous */ margin-left: 14.5%; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe pas sous le menu 164px*/ padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ /* padding-top: 0px;*/ /* tailleTotale - tailleMenu = 90% - 15% = 75% width: 75%;*/ border: 2px solid white; /* red; Une bordure pour bien marquer les limites du corps et pour faire joli */ /*margin-left: 300px; width: 500px; auto; medium*/ font-size: small; font-family: "Trebuchet MS", "Comic Sans MS", Georgia, serif; text-indent: 30px; /* Decalage de 30 pixels sur la droite */ background-image: url("../img/sombre/degr.bmp"); background-repeat: repeat-y; /* Un degradé de 1 pixel en fond qui se répètera verticalement */ background-color: rgb(0, 0, 0); color: white; /*#FF0000; red*/ } #body p { margin: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe pas sous le menu */ margin-bottom: 0px; /* Pour éviter que le corps colle trop au pied de page en-dessous */ padding: 0px; /* Et pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ } #body hr { border: 1px solid white; } #body ul /* Toutes les listes à puces se trouvant dans un menu */ { list-style-position: inside;/**/ list-style-type: circle; /*list-style-image: url("../img/cb.bmp"); On change l'apparence des puces */ } /*padding: 0px; Tous les côtés ont une marge intérieure de 0 pixels */ /*padding-left: 10px; ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 10 pixels */ /*margin: 0px; Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */ /*margin-bottom: 0px; Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */ .screen { width: 486px; margin: auto; } /* #body p img alt="Screen shot 2" { width: 708px; margin: auto; /* margin-bottom: 2px;*//* }*/ /********************************************** ** Definotion des styles de "base" : ** ** - question ** ** - info ** ** - warning ** ** - erreur ** ** Et les liens. ** ***********************************************/ .question { background-image: url('../img/symbols/question.png'); background-position: 0px 0px; background-repeat: no-repeat; color: blue; font-style: bold; } .info { background-image: url('../img/symbols/info.png'); background-position: 0px 0px; background-repeat: no-repeat; color: green; /*lime*/ font-style: bold; } .warning { background-image: url('../img/symbols/warning.png'); background-position: 0px 0px; background-repeat: no-repeat; color: orange; font-style: bold; } .error { background-image: url('../img/symbols/error.png'); background-position: 0px 0px; background-repeat: no-repeat; color: red; font-style: bold; } /* .symbole { width: 29px; height: 31px; /*margin: no;*//* }*/ .clear { clear: both; } /***************************** * Style pour les codes ou * * citations, etc... * *****************************/ .code { border: 1px dashed gray; text-indent: 0px; /* on vire le decalage ! */ background-color: white; /* on remet un fond blanc */ } /************ ** END DEF ** *************/ /************************************** ** Definitions de styles avancés : ** ***************************************/ .head-graph { padding: 30px; /* Une marge interne à gauche pour donner un style "decalé" */ /*color: rgb(103, 0, 15); color: black; #FF0000; red*/ } .no-indent { text-indent: 0px; /* On annule le decalage pour ces paragraphes */ } /* Uniquement pour la licence : texte overflow */ .licence { height: 250px; overflow: auto; padding: 5px; /* Et pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ margin: 5px; font-family: "Trebuchet MS", Georgia, serif; /* Le fond sera comme le fond de */ /*background-image: url("../img/sky.png"); background-repeat: no-repeat;*/ background-color: rgb(102, 244, 105); color: black; } /* #body p .licence { margin-left: 150px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe pas sous le menu *//* margin-bottom: 20px; /* Pour éviter que le corps colle trop au pied de page en-dessous *//* padding: 5px; /* Et pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure width: 70%;*//* }*/ #body form p { text-indent: 0px; /* On annul le decalage de 30 pixels sur la droite créé dans "#body" */ padding: 5px; /* Et pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure width: 70%;*/ padding-left: 40px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe pas sous le menu */ } #body table { border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */ } #body td { border: 1px solid white; } #body th { border: 1px solid white; } #mail { width: 300px; } textarea:focus Quand le curseur est sur un champ (ne marche pas sur IE) input:focus, { background-color: #0A0505; } /************************************************************************************************* ################ ## END BODY ## ################ ***************************************************************************************************/ /***************************************************************************************************** #################################################### ## Le pied de page (qui se trouve tout en bas, ## ## en général pour les copyrights) ## #################################################### ******************************************************************************************************/ #footer { width: 90%; padding: 0px; margin-left: 14.5%; text-align: center; font-size: small; font-weight: normal; font-family: "Courier New", "Comic Sans MS", "Trebuchet MS", Georgia, serif; color: rgb(103, 0, 155);/* #B3B3B3; */ background-color: rgb(99, 2, 2); border: 2px solid rgb(17, 238, 22);/* white; */ } /************************************************************************************************ ################# ## END FOOTER ## ################# ***************************************************************************************************/ /* ################################################# ##OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO## ##OO FIN DU FICHIER DE STYLE. OO## ##OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO## ################################################# */ /* Polices basiques : * Arial * Arial Black * Comic Sans MS - - - Utilisée * Courier New - - - - Pas mal * Georgia * Impact - - - - - - A Tester ! * Times New Roman - - ... * Trebuchet MS - - - Site du Zer0 * Verdana */