*/
width: 280px; /* px ou % Très important : donner une TAILLE à la largeur du
(cadré à droite ou à gauche) */
margin: 10px; /* marge extérieure */
padding: 5px; /* marge intérieure : Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
border: 1px dotted black ; /* solid ou dotted (pointillé) ou none */
font-family: arial, "MV Boli", "Comic Sans MS", "times new roman", Wide Latin, serif;
font-size: 0.9em; /* em ou % ou px ... */
color: #141010; /* bleu gris = 008dbf */
text-align: left;
}
#corps {
font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif;
}
#corps h1 { /* Tous les titres h1 du corps */
font-size: 1.9em; /* ou 20pt; */
font-style: italic; /* Les titres h1 seront en italique ! */
text-align: center;
text-transform: none; /* permet de mettre en majuscule, minuscule ... */
margin: 0px; /* auto : On peut donc demander à ce que le block soit centré */
border: 0px solid black ; /* bordure intérieure = 1 px */
color: #ff704f; /* saumon */
}
#corps h2 { /* Tous les titres h2 du corps */
color: #ff704f; /* saumon */
font-size: 16pt;
text-align: center; /* justify, center, left, right */
text-indent: 0.5cm;
text-transform: none;
}
#corps h3 { /* h3 = utilisé pour les LIENS */
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
font-size: 0.9em; /* ou 12pt */
font-style: italic; /* Les titres h3 seront en italique ! */
color: blue;
text-align: center; /* justify, center, left, right */
text-transform: none; /* permet de mettre en majuscule, minuscule ... */
}
#corps h4 { /* h4 = utilisé pour les lignes en NOIR */
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
font-size: 0.9em; /* ou 12pt */
font-style: italic; /* Les titres h4 seront en italique ! */
color: black;
text-align: center; /* justify, center, left, right */
text-transform: none; /* permet de mettre en majuscule, minuscule ... */
}
#corps h5 { /* h5 = utilisé pour les lignes de titre de paragraphes */
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
font-size: 0.9em; /* ou 12pt */
font-style: italic; /* Les titres h5 seront en italique ! */
color: green;
text-align: center; /* justify, center, left, right */
text-transform: none; /* permet de mettre en majuscule, minuscule ... */
}
#corps h6 { /* h6 sert à mettre des commentaires sur la page */
font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
font-size: 0.7em; /* ou 12pt */
font-style: italic; /* Les titres h6 seront en italique ! */
color: green;
text-align: center; /* justify, center, left, right */
text-transform: none; /* permet de mettre en majuscule, minuscule ... */
}
#corps p {
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
/* color: black; */ /* FONT, TAILLE et COULEUR à SUPPRIMER si on veut utiliser les couleurs paramétrées */
font-size: 1.2em; /* em ou % ou px ... */
font-weight: normal;
text-align: justify;
text-indent: 20px; /* indentation première ligne */
padding: 5px ; /* marge intérieure top, bottom, left, right ou padding tout court */
margin: 5px; /* auto : les blocks seront centrés */
}
#corps p:first-letter { /* La première lettre de chaque paragraphe */
font-weight: bold; /* En gras */
font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
color: blue; /* En bleu */
}
#corps p.cadre {
text-align: right;
line-height: 1.2;
padding: 10px; /* marge intérieure top, bottom, left, right ou padding tout court */
/* background: silver; */
}
#corps a, a:link, a:hover, a:active, a:focus, a:visited {
font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif;
font-size: 1em;
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
text-decoration: underline; /* Les liens sont soulignés "underline" ou non "none" */
background-color: #FFF6A8;
color: #9f3e00; /* ocre foncé = 9f3e00 */
}
#corps a:hover { /* lien : quand la souris passe dessus */
text-decoration: none; /* Les liens sont soulignés "underline" ou non "none" */
}
#corps a:active, a:focus { /* quand on clique sur le lien */
background-color: red;
}
/* IMAGE servant de LIEN */
#corps a img { /* pour les images contenues dans les liens ... */
border: none; /* pas de bordure */
}
#corps img { /* une marge à droite des images pour éviter que le texte ne colle à la photo */
margin-right: 5px; /* Ca c'est pour éviter que le paragraphe ne colle trop à droite de l'image située à gauche */
}
#corps ul { /* Toutes les listes à puces se trouvant dans un menu */
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
list-style-position: inside; /* la puce se met sur la marge du paragraphe et le texte s'aligne sur la ligne précédante ("inside" = le texte de la 2eme ligne s'aligne sous la puce) */
/* list-style-position: outside; /* /* (par défaut) met les puces en deça de la marge du paragraphe */
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
color: blue; /* En bleu */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
margin: auto; /* ou 15px ou 100% ou 0px pour tout initialiser ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-top: 7px; /* 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 */
/* margin: auto; /* auto : les blocks seront centrés */
}
#pied_de_page {
text-align: center;
font-size: 0.8em;
font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
padding: 5px;
/* color: black; /* couleur du texte */
/* border: none; /* border:none (pas de bordure) ou border: 1px solid black; */
}
/*----------------------------------------------------------------------------------
Pour faire une INFO-BULLE ovale avec une taille fixe. (dans "recherche.php")
voir : http://classe.bilingue.free.fr/fr/TDM-html/memento/info-bulles.html#
-----------------------------------------------------------------------------------*/
a.bulle-ovale
{
position:relative;
font-family: arial, "Comic Sans MS", "times new roman", Wide Latin, serif;
font-size: 1em;
/* font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: #9f3e00; /* ocre foncé = 9f3e00 */
/* color:#C800F0; /* jaune = #C800F0 */
text-decoration:none; /* Les liens sont soulignés "underline" ou non "none" */
text-align:center;
}
a.bulle-ovale:hover
{
background: none;
z-index: 50;
}
a.bulle-ovale span
{
display: none;
}
a.bulle-ovale:hover span
{
display: block;
position: absolute;
top: -300px;
left: -10px;
font-family:chalkboard,verdana, sans-serif;
text-align:center;
font-size:17px;
color:#F9EC00;
font-weight:normal;
background: #A2B6F1;
padding: 5px;
width: 500px;
height: 200px;
border-style: 1;
-webkit-border-radius: 75px / 40px;
-moz-border-radius: 75px / 40px;
border-radius: 75px / 40px;
box-shadow:20px 20px 10px #182856;
border:#0843EF solid 1px;
text-indent: 0;
}
#page { /* choix des pages */
font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif;
font-size: 10pt;
margin-left: 10px; /* marge à gauche */
margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous ( bottom = en bas ) */
padding: 0px; /* Pour éviter que le texte ne colle trop à la bordure */
color: black;
}
#news {
clear: both; /* la
se placera sous les autres
flottantes (none; left; right; both (les deux) ) */
background-color:#f6fd8f; /* jaune pâle */
margin: 10px; /* obligatoire : c'est pour éviter que les News ne soient collées
color: black; /* (couleur du texte) */
border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#news h1 { /* h1 = entete des news */
background-color: #c5ff81; /* Vert pâle : Une couleur de fond pour les news */
margin: 0px; /* Marge extérieure (par rapport à l'intérieur de la news) */
padding-top: 10px; /* Marge intérieure (par rapport à l'intérieur de la news) */
padding-bottom: 10px; /* Marge intérieure (par rapport à l'intérieur de la news) */
font-size: 1.5em;
color: #ef3600; /* orange (couleur du texte) */
text-align: center;
}
#news h2 { /* h2 = pied des news */
background-color: #c5ff81; /* Vert pâle : Une couleur de fond pour les news */
margin: 0px; /* Marge extérieure (par rapport à l'intérieur de la news) */
padding-top: 10px; /* Marge intérieure (par rapport à l'intérieur de la news) */
padding-bottom: 10px; /* Marge intérieure (par rapport à l'intérieur de la news) */
font-size: 1em;
color: black;
text-align: center;
}
#news p {
padding-left: 10px; /* Marge intérieure (par rapport à l'intérieur de la news) */
padding-right: 10px; /* Marge intérieure (par rapport à l'intérieur de la news) */
text-align: justify;
font-size: 1.2em; /* em ou % ou px ... */
}
#news img { /* une marge à droite des images pour éviter que le texte ne colle à la photo */
padding: 5px; /* Ca c'est pour éviter que le paragraphe colle trop à droite de l'image située à gauche */
padding-left: 0px; /* Ca c'est pour éviter que le paragraphe colle trop à droite de l'image située à gauche */
}
#footer {
text-align: center;
font-size: 0.8em;
font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
padding: 5px;
/* color: black; */ /* couleur du texte */
border: none; /* border:none (pas de bordure) ou border: 1px solid black; */
}
#footer a, a:link, a:hover, a:active, a:focus, a:visited {
font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif;
font-size: 0.8em;
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
text-decoration: underline; /* Les liens sont soulignés "underline" ou non "none" */
color: #9f3e00; /* ocre foncé = 9f3e00 */
}
#footer a:hover { /* lien : quand la souris passe dessus */
text-decoration: none; /* Les liens sont soulignés "underline" ou non "none" */
}
a:link { /* lien vers des sites extérieurs */
font-family: "comic sans ms", arial, serif;
font-size: 10pt;
color: #9f3e00; /* ocre foncé = 9f3e00 */
}
a:hover { /* lien : quand la souris passe dessus */
font-family: "comic sans ms", arial, serif;
font-size: 10pt;
color: red;
text-decoration: none; } /* Les liens sont soulignés "underline" ou non "none" */
a:active, a:focus { /* quand on clique sur le lien */
font-family: "comic sans ms", arial, serif;
font-size: 10pt;
background-color: red;
}
a:visited { /* lorsque le lien a été visité */
font-family: "comic sans ms", arial, serif;
font-size: 10pt;
color: black;
}
/* texte caché */
.spoiler
{
padding:5px;
border:1px solid #808080;
background-color: #fbec53;
margin: 5px 5px;
max-height:400px;
overflow: auto;
color: black;
}
.spoilertexte
{
font-weight:bold; font-size:12px;
}
/* citation */
.quote
{
padding:5px;
border:1px solid #653533;
margin: 5px 5px;
overflow: auto;
}
img.centered
{
display: block;
margin: auto;
text-align: center;
}
/* ==============================================================================================================
Feuille de styles pour formulaire "courriel.php"
==============================================================================================================
*/
form {
margin: auto; /* auto : les blocks seront centrés */
margin-left: 0px ; /* marge extérieure à gauche (donc pas besoin de ) top, bottom, left, right ou margin tout court */
}
form p {
clear: both;
margin: 0;
}
/*form label {
float: left; width: 25%; text-align: right; /* cadrage de l'intitulé (à gauche de la zone de saisie) * /
} */
/*TEXTAREA, INPUT, LABEL {
margin: 0 20px 10px 0 /* margin : "??" "espace entre libéllé et zone de saisie" "espace entre ligne" "??" * /
}*/
/*TEXTAREA, INPUT { /* cadrage de la zone de saisie (à droite de l'intitulé) * /
border: #666 1px solid;
background-color: #fff;
width: 250px;
} */
/*TEXTAREA { /* zone de saisie du message * /
width: 400px;
height: 100px
}*/
/* les FORMULAIRES */
input, textarea {
font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
font-size: 1em;
font-style: normal; /* normal ou italique */
background-position: top right;
background-color:#FFFFCC; /* saumon pâle */
}
input:focus, textarea:focus { /* Quand le curseur est sur un champ (ne marche pas sur IE) */
background-color: #d9fdaf; /* vert pâle */
}
label {
color: blue; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
font-style: normal; /* normal ou italique */
vertical-align: middle; /* Alignement vertical du contenu des cellules (top, middle, bottom) */
/* font-size: 1em;*/
}
legend { /* On met un peu plus en valeur les titres des fieldset */
/* font-family: "comic sans MS", "Times New Roman", "Arial, "Arial Black", Georgia, Times, serif; */
color: green;
font-style: italic; /* Les titres des fildset seront en italique ! */
font-size: 1em;
font-weight: normal; /* bold ou normal */
}
fieldset { /* ZONES de SAISIE */
margin-bottom: 10px; /* Une marge pour séparer les fieldset */
font-style: italic; /* Les titresdes fildset seront en italique ! */
/* border: 1px solid black; */ /* Une bordure pour bien marquer les limites du corps et pour faire joli */
background-color: #;
}
#submit { /* toujours pour les FORMULAIRES couleur = jaune pâle */
border: 1px #000 solid; cursor: pointer; padding: 1px; color: #faff7b; background-color: #006633; width: auto;
}
#submit:hover {
border: 1px red solid
}
.alerte {
color: blue; /* En bleu */
font-weight: bold;
font-size: 14px
}
.focus {
background: #bbff55 /* couleur de fond des zones à saisir */
}
/* =============================== fin du Style des FORMULAIRES ================================================== */
/* ================================================================================= */
/* ZOOM d' IMAGES */
.zoom { /* ce cadre (définition de la hauteur uniquement) permet de décaler les photos */
height:400px; /* 400 ou 480 */
}
.zoom p { /* affichage des images réduites = centrée dans la page */
text-align:center;
}
.zoom img {
width:100px;
height:80px;
}
.zoom img:active {
width:560px; /* 560 ou 640 */
height:400px; /* 400 ou 480 */
}
.imageblock {
display: block ; /* l'image sera "block" (donc retour à la ligne */
}
.imageflotante {
float: left ; /* image flottante à gauche (ou right, à droite) le texte du corps s'écrira à gauche ou à droite de l'image */
}
.dessous { /* pour stopper un flottant */
clear: both; /* le paragraphe suivant s'écrira en dessous de l'image */
}
/* ==================================================================================== */
/* LES TABLEAUX */
/* ==================================================================================== */
caption { /* Titre du tableau */
caption-side: top; /* position du titre par rapport au tableau (ne marche pas sur Internet Explorer) */
margin: auto; /* Centre le titre du tableau */
font-family: "Times New Roman", Arial, serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 5px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}
table { /* définition de la bordure des tableaux */
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) sinon "border-separate" (par défaut) */
margin: auto; /* Centre le tableau */
border: none; /* border:none (pas de bordure) ou border: 1px solid black; (outset = effet 3D, solid = trait)*/
}
td, th { /* l'entête et toutes les cellules des tableaux... */
/* border: 1px solid black; */ /* ... auront une bordure de 1px */
}
th { /* Les cellules d'en-tête du tableau */
background-color: #c3fd95;
color: black;
font-size: 1.1em;
font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
}
td { /* Les cellules normales */
font-family: "arial", "Times New Roman", "Comic Sans MS", "Trebuchet MS", Times, serif;
text-align: justify;
padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
vertical-align: middle; /* Alignement vertical du contenu des cellules (top, middle, bottom) */
}
blockquote { /* citations = paragraphe A PART + balise
*/
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
font-size: 16pt;
text-align: justify;
color: green;
}
q { /* quotte (guillemet) citation DANS un paragraphe */
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
font-size: 16pt;
text-align: justify;
color: green;
}
.question:before /* Avant chaque QUESTION */
{
content: "Question : "; /* Commencer par Question : */
font-weight: bold; /* "Question" sera en gras */
color: blue; /* "Question" sera en bleu */
}
.question:after /* Après chaque question */
{
content: " ?"; /* Rajouter un point d'interrogation */
}
.barre_defilement {
overflow: auto ; /* les barres de défilement s'afficheront automatiquement */
}
.bordure { /* bordure des cadres */
border: 1px solid black; /* solid = ligne ... ou "none" */
}
b { color: red; } /* en gras */
.ul { /* listes */
/* font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
font-size: 8pt;
padding: 0px; /* marge gauche = 0px */
}
.signature { text-align: right; /* Pour aligner à droite ma signature */
font-family: "Comic Sans MS", "Times New Roman", arial, serif;
font-size: 0.8em; }
.nom {color:blue, }
.majuscule {
text-transform: uppercase; /* majuscule */ }
.prenom {
text-transform: capitalize; /* premiere lettre en majuscule */ }
strong {
color: red;
}
em {
color:green;
background-color: yellow;
}
.gras {
font-weight: bold;
color: red; }
.adresse
{
/* font-family: "comic sans ms", "times new roman", arial, wide latin, serif; */
font-size: 1em;
color: blue;
font-style: italic; /* les titres des fildset seront en italique ! */
text-align: center;
/* font-weight: bold; */ /* le lien sera en gras "bold" ou "normal" */
}
/* ------------------------------------------------- */
.noir { color:black; }
.gris { color:gray; }
.blanccasse { color:#fff6ab; }
.blanc { color:white; }
.violet { color:mediumvioletred; }
.indigo { color:#4B0082; }
.fushia { color:fuchsia; }
.bleufonce { color:mediumblue; }
.bleu { color:blue; }
.vert { color:green; }
.vertolive { color:olive; }
.jauneclair { color:yellow; }
.jaune { color:gold; }
.saumon { color:coral; }
.orange { color:orangered; }
.rouge { color:red; }
.brun { color:maroon; }
/* ------------------------------------------------- */
.minuscule { font-size: 0.3em; } /* ou font-size: xx-small; */
.trespetit { font-size: 0.6em; } /* ou font-size: x-small; */
.petit { font-size: 0.8em; } /* ou font-size: small; */
.normal { font-size: 1em; } /* ou font-size: medium; */
.grand { font-size: 1.3em; } /* ou font-size: large; */
.tresgrand { font-size: 1.5em; } /* ou font-size: x-large; */
.enorme { font-size: 1.9em; } /* ou font-size: xx-large; */
/* ------------------------------------------------- */
.droite { text-align: right; }
.centrer { text-align: center; }
.gauche { text-align: left; }
.justify { text-align: justify; }
.clignotant { text-decoration: blink; } /* le titre sera clignotant ! (ne fonctionne pas sous internet explorer) */
.souligne { text-decoration: underline; }
.barre { text-decoration: line-through; }
.ligne_dessus { text-decoration: overline; }
.surligne { /* un style qui permet par exemple de surligner certains mots d'un texte */
background-color: yellow;
color: black; /* le texte surligné sera écrit en noir, parce que le blanc sur fond jaune on voit rien */
}
dd { /* liste de définitions */
background-color:red;
}
.pas_de_retrait { /* pour les listes */
list-style-position: inside;
}
.retrait {
list-style-position: outside;
}
.retrait1 {
margin-left: 2em; /* 1em ou 20px */
}
.retrait2 {
margin-left : 4em;
}
.retrait3 {
margin-left : 6em;
}
.retrait4 {
margin-left : 8em;
}
.retrait5 {
margin-left : 10em;
}
/* ------------------------------------------------- */
.cercle {
list-style-type: circle;
}
.carre {
list-style-type: square;
}
.rien {
list-style-type: none;
}
/* Listes à puces ordonnées */
.commence_a_zero {
list-style-type: decimal-leading-zero;
}
.lettres_minuscules {
list-style-type: lower-alpha;
}
.chiffres_romains {
list-style-type: upper-roman;
}
.lettres_grecques {
list-style-type: lower-greek;
}
/* div { /* positionnement absolu d'un bloc */
/* background-color: yellow;
border: 1px solid green;
position: absolute;
left: 50%; /* centré */
/*top: 50px;
}
*/
/* div { /* Division de la page : positionnement FIXE d'un bloc (le bloc ne bougera pas de l'écran) Utile pour les MENUS */
/* background-color: yellow;
border: 1px solid green;
width: 150px;
height: 250px;
position: fixed;
right: 40px;
top: 60px;
}
*/