/* Définition des polices personnalisées */ @font-face /* Pour titre : Stéphane Weiss */ { font-family: 'SourceSansPro'; src: url('Polices/SourceSansPro/SourceSansPro.eot'); src: url('Polices/SourceSansPro/SourceSansPro.eot?#iefix') format('embedded-opentype'), url('Polices/SourceSansPro/SourceSansPro.woff') format('woff'), url('Polices/SourceSansPro/SourceSansPro.ttf') format('truetype'), url('Polices/SourceSansPro/SourceSansPro.svg#SourceSansPro') format('svg'); font-weight: normal; font-style: normal; } @font-face /* Pour titre : journaliste écrivain */ { font-family: 'pompiere'; src: url('Polices/Pompiere/pompiere.eot'); src: url('Polices/Pompiere/pompiere.eot?#iefix') format('embedded-opentype'), url('Polices/Pompiere/pompiere.woff') format('woff'), url('Polices/Pompiere/pompiere.ttf') format('truetype'), url('Polices/Pompiere/pompiere.svg#pompiere') format('svg'); font-weight: normal; font-style: normal; } @font-face /* Pour les titres des sujets des sites */ { font-family: 'Rosario'; src: url('Polices/Rosario/Rosario.eot'); src: url('Polices/Rosario/Rosario.eot?#iefix') format('embedded-opentype'), url('Polices/Rosario/Rosario.woff') format('woff'), url('Polices/Rosario/Rosario.ttf') format('truetype'), url('Polices/Rosario/Rosario.svg#Rosario') format('svg'); font-weight: normal; font-style: normal; } @font-face /* Pour le texte */ { font-family: 'DejaVu'; src: url('Polices/DejaVu/DejaVu.eot'); src: url('Polices/DejaVu/DejaVu.eot?#iefix') format('embedded-opentype'), url('Polices/DejaVu/DejaVu.woff') format('woff'), url('Polices/DejaVu/DejaVu.ttf') format('truetype'), url('Polices/DejaVu/DejaVu.svg#DejaVu') format('svg'); font-weight: normal; font-style: normal; } /* Eléments principaux de la page */ body { background-color: #d0c5a7; font-family: 'DejaVu', Arial, sans-serif; color: #181818; } #bloc_page { width: 1100px; height : 796px; margin: auto; background: url('images/Livre.jpg'); background-color: #1a52c4; /*pour les navigateurs anciens */ background-color: rgba(62,138,57,0.6); /*pour les navigateurs plus récents */ border-radius : 20px ; } /* Menus et bannière */ nav { width : 130px ; margin-top: 1px; display : block ; } #Stephane {display : inline-block ; width : 140px; margin : 10px; vertical-align : top ;} #banniere {display : inline-block ; width : 500px; margin : 10px;vertical-align : top ;background-color:#a6e5f7;margin-top: 5px;} #banniere h1 {text-align: center;font-family: 'SourceSansPro', Arial, sans-serif;} #banniere h2 {text-align: center;font-family: 'pompiere', Arial, sans-serif;} nav, {display:inline-block;} #menu { display:inline-block; margin-top:30px;} #plume { display : inline-block ; width : 240px;height :150px; margin left : 20px;margin-top: 5px;vertical-align : top ;} .etiquette_menu { width : 120px; height : 80px ; margin-left: 5px; background: url('images/Etiquette.png'); background-color: #a6e5f7; font-family: 'Rosario', Arial, sans-serif; background-position : center ; background-repeat : no-repeat ; } .etiquette_menu:hover { background-color: #ebe3d8; } .etiquette_menu p { padding-left : 10px; padding-top : 32px; margin:1px; font-size : 1.0em ; -webkit-transform: -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg); } #bienvenue {position : absolute ;width:400px;left: 260px; top: 200px;background-color:#a6e5f7;padding-left:10px; -webkit-transform: -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} #titre_actualite{position : absolute ;width:400px; height :50px;left: 720px; top: 195px; background-color:#a6e5f7;padding-left:10px; z-index: 2;} #actualite {position : absolute ;width:400px; height :500px;left: 720px; top: 250px; background-color:#a6e5f7;padding-left:10px; overflow:scroll;z-index: 3;} /* Page d'accueil : Livre */ #accueil_livre {position : absolute ;width:400px; left: 300px; top: 460px;background-color:#a6e5f7;} .accueil_livre {display : inline-block ;width : 190px; text-align: center; margin : auto;} #overlay { display : none; /* Par défaut, on cache l'overlay */ position: absolute;z-index: 10; top: 50px; left: 300px; /* ou en px */ width: 60%; height: 80%; /* ou en px */ text-align: center; /* Pour centrer l'image que l'overlay contiendra */ z-index: 55; /* Ci-dessous, j'applique un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */ background-color: rgba(0,0,0,0.6); } #overlay img { margin-top: 20px; } /* Mise à jour des actualités */ .actu {position : absolute ;width:700px;left: 260px; top: 200px; background-color:#a6e5f7;padding-left:10px; } /* Mon histoire : biographie */ #biographie {position : absolute ;width:400px; height : 600px; left: 260px; top: 180px; overflow:scroll; background-color:#a6e5f7;padding-left:10px; -webkit-transform: -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} #biographie2 {position : absolute ;width:400px; height : 380px; left: 700px; top: 180px; overflow:scroll; background-color:#a6e5f7;padding-left:10px; -webkit-transform: -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} .bio2 {font-weight:bold;} #Bio_diapo{position : absolute ;width:300px; height : 200px; left: 800px; top: 580px; border:} .diapo_Bio { position: absolute; /*les images vont se supperposer*/ left: 0px; /* A gauche*/ top: 0px; /* Et en haut*/ display: none; /*Par défaut, elles ne seront pas affichées*/ } /* Différentes pages sur les livres */ #Livres{position : absolute ;width:850px; left: 260px; top: 200px;background-color:#a6e5f7;padding-left:10px;} #MenuLivres {position : absolute ;margin:auto; width:850px; top: 1px;padding-top:0px;} .MenuLivres{display : inline-block ; width : 160px; height : 30px; margin left : 20px;margin-top: -40px;vertical-align : top ; padding-top:-10px; padding-bottom:0px;background-color:#a6e5f7;} .MenuLivres h3{text-align:center ;margin-top: 1px; padding-top:0px; padding-bottom:0px; color: black;} .livres{display: inline-block; vertical-align : top ; width: 200px; margin-top: 53px;} .livres img {margin:auto;} #Rugby h3{color:#b70820;} #Judo h3{color:#b70820;} #Artistes h3{color:#b70820;} #Tele h3{color:#b70820;} #Autres h3{color:#b70820;} /* Articles de et sur Stéphane */ #articlesDe {position : absolute ;width:400px; height : 580px; left: 260px; top: 200px; overflow:scroll; background-color:#a6e5f7;padding-left:10px; -webkit-transform: -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} #articlesSur {position : absolute ;width:400px; height : 580px; left: 720px; top: 200px; overflow:scroll; background-color:#a6e5f7;padding-left:10px; -webkit-transform: -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} /* Rencontres */ #Rencontres_titre {width : 500px; position : absolute ; left: 400px; top: 150px; text-align:center; background-color:#a6e5f7; margin-top: 5px;} #rencontre1 {position : absolute ; left: 235px; top: 350px; z-index: 2; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);-o-transform: rotate(-15deg);transform: rotate(-15deg);} #rencontre2 {position : absolute ; left: 460px; top: 250px; z-index: 5; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);} #rencontre3 {position : absolute ; left: 780px; top: 500px; z-index: 1; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg);-ms-transform: rotate(15deg);-o-transform: rotate(15deg);transform: rotate(15deg);} #rencontre4 {position : absolute ; left: 240px; top: 180px; z-index: 4; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #rencontre5 {position : absolute ; left: 700px; top: 640px; z-index: 14; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} #rencontre6 {position : absolute ; left: 810px; top: 250px; z-index: 6; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);} #rencontre7 {position : absolute ; left: 950px; top: 310px; z-index: 7; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);-ms-transform: rotate(-20deg);-o-transform: rotate(-20deg);transform: rotate(-20deg);} #rencontre8 {position : absolute ; left: 230px; top: 640px; z-index: 9; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg);-ms-transform: rotate(8deg);-o-transform: rotate(8deg);transform: rotate(8deg);} #rencontre9 {position : absolute ; left: 390px; top: 520px; z-index: 8; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #rencontre10 {position : absolute ; left: 960px; top: 170px; z-index: 10; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} #rencontre11 {position : absolute ; left: 930px; top: 630px; z-index: 11; -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg);-ms-transform: rotate(-9deg);-o-transform: rotate(-9deg);transform: rotate(-9deg);} #rencontre12 {position : absolute ; left: 650px; top: 250px; z-index: 12; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg);-ms-transform: rotate(-2deg);-o-transform: rotate(-2deg);transform: rotate(-2deg);} #rencontre13 {position : absolute ; left: 590px; top: 390px; z-index: 13; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg);-ms-transform: rotate(-2deg);-o-transform: rotate(-2deg);transform: rotate(-2deg);} #rencontre14 {position : absolute ; left: 550px; top: 500px; z-index: 3; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg);-ms-transform: rotate(2deg);-o-transform: rotate(2deg);transform: rotate(2deg);} #rencontre15 {position : absolute ; left: 450px; top: 635px; z-index: 15; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg);-ms-transform: rotate(-7deg);-o-transform: rotate(-7deg);transform: rotate(-7deg);} #rencontre16 {position : absolute ; left: 420px; top: 380px; z-index: 16; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} #rencontre17{position : absolute ; left: 990px; top: 500px; z-index: 17; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg);-ms-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);} #rencontre18 {position : absolute ; left: 790px; top: 370px; z-index: 18; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);-ms-transform: rotate(3deg);-o-transform: rotate(3deg);transform: rotate(3deg);} #rencontre19 {position : absolute ; left: 220px; top: 490px; z-index: 19; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg);-ms-transform: rotate(8deg);-o-transform: rotate(8deg);transform: rotate(8deg);} /* Amis dédicaces */ #Amiscorps {width : 950px; height : 600px; position : absolute ; left: 250px; top: 145px; overflow:scroll; text-align:center; margin-top: 5px; padding: 0px; border: 20px blue;} #Amistitre {width : 500px; position : absolute ;left:185px; top:2px; text-align:center; background-color:#a6e5f7; margin-top: 5px; padding: 0px;} #Amisphotos {width : 920px; height: 900px; position : absolute ; top:150px;} #Dedicace1 {position : absolute ; left: 20px; bottom: 320px; z-index: 2; -webkit-transform: rotate(-25deg);-moz-transform: rotate(-25deg);-ms-transform: rotate(-25deg);-o-transform: rotate(-25deg);transform: rotate(-25deg); border: 20px blue;} #Dedicace2 {position : absolute ; left: 20px; bottom: 570px; z-index: 4; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #Dedicace3 {position : absolute ; left: 610px; bottom: 130px; z-index: 13; -webkit-transform:rotate(15deg); -moz-transform: rotate(15deg);-ms-transform: rotate(15deg);-o-transform: rotate(15deg);transform: rotate(15deg);} #Dedicace4 {position : absolute ; left: 370px; bottom: 410px; z-index: 5; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);} #Dedicace5 {position : absolute ; left: 140px; bottom: 5px; z-index: 1; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #Dedicace6 {position : absolute ; left: 720px; bottom: 550px; z-index: 10; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);} #Dedicace7 {position : absolute ; left: 760px; bottom: 2px; z-index: 7; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);-ms-transform: rotate(-20deg);-o-transform: rotate(-20deg);transform: rotate(-20deg);} #Dedicace8 {position : absolute ; left: 1px; bottom: 1px; z-index: 9; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);} #Dedicace9 {position : absolute ; left: 1px; bottom: 150px; z-index: 8; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #Dedicace10 {position : absolute ; left: 520px; bottom: 550px; z-index: 6; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} #Dedicace11 {position : absolute ; left: 590px; bottom: 4px; z-index: 11; -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg);-ms-transform: rotate(-9deg);-o-transform: rotate(-9deg);transform: rotate(-9deg);} #Dedicace12 {position : absolute ; left: 155px; bottom: 125px; z-index: 12; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg);-ms-transform: rotate(-2deg);-o-transform: rotate(-2deg);transform: rotate(-2deg);} #Dedicace13 {position : absolute ; left: 610px; bottom: 300px; z-index: 7; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg);-ms-transform: rotate(-2deg);-o-transform: rotate(-2deg);transform: rotate(-2deg);} #Dedicace14 {position : absolute ; left: 190px; bottom: 370px; z-index: 3; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg);-ms-transform: rotate(2deg);-o-transform: rotate(2deg);transform: rotate(2deg);} #Dedicace15 {position : absolute ; left: 490px; bottom: 420px; z-index: 17; -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg);-ms-transform: rotate(7deg);-o-transform: rotate(7deg);transform: rotate(7deg);} #Dedicace16 {position : absolute ; left: 10px; bottom: 460px; z-index: 16; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} #Dedicace17 {position : absolute ; left: 440px; bottom: 1px; z-index: 15; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #Dedicace18 {position : absolute ; left: 750px; bottom: 270px; z-index: 18; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg);-ms-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);} #Dedicace19 {position : absolute ; left: 140px; bottom: 240px; z-index: 19; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);} #Dedicace20 {position : absolute ; left: 430px; bottom: 140px; z-index: 20; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);-ms-transform: rotate(3deg);-o-transform: rotate(3deg);transform: rotate(3deg);} #Dedicace22 {position : absolute ; left: 435px; bottom: 290px; z-index: 22; -webkit-transform: rotate(11deg); -moz-transform: rotate(11deg);-ms-transform: rotate(11deg);-o-transform: rotate(11deg);transform: rotate(11deg);} #Dedicace23 {position : absolute ; left: 190px; bottom: 515px; z-index: 23; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);-ms-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg);} #Dedicace24 {position : absolute ; left: 670px; bottom: 415px; z-index: 24; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);-ms-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg);} #Dedicace25 {position : absolute ; left: 290px; bottom: 240px; z-index: 25; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg);-ms-transform: rotate(-1deg);-o-transform: rotate(-1deg);transform: rotate(-1deg);} #Dedicace26 {position : absolute ; left: 758px; bottom: 128px; z-index: 26; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} #Dedicace27 {position : absolute ; left: 300px; bottom: 110px; z-index: 27; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);} #Dedicace28 {position : absolute ; left: 300px; bottom: 4px; z-index: 28; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);} #Dedicace29 {position : absolute ; left: 15px; bottom: 670px; z-index: 29; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);} #Dedicace30 {position : absolute ; left: 180px; bottom: 625px; z-index: 30; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg);-ms-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);} #Dedicace31 {position : absolute ; left: 350px; bottom: 525px; z-index: 31; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg);-ms-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);} #Dedicace32 {position : absolute ; left: 340px; bottom: 635px; z-index: 32; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg);-ms-transform: rotate(-6deg);-o-transform: rotate(-6deg);transform: rotate(-6deg);} #Dedicace33 {position : absolute ; left: 540px; bottom: 655px; z-index: 33; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg);-ms-transform: rotate(-6deg);-o-transform: rotate(-6deg);transform: rotate(-6deg);} #Dedicace34 {position : absolute ; left: 20px; bottom: 800px; z-index: 34; -webkit-transform: -moz-transform: rotate(6deg);-ms-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);} #Dedicace35 {position : absolute ; left: 320px; bottom: 765px; z-index: 35; -webkit-transform: -moz-transform: rotate(6deg);-ms-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);} #Dedicace36 {position : absolute ; left: 520px; bottom: 775px; z-index: 36; -webkit-transform: -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} #Dedicace37 {position : absolute ; left: 700px; bottom: 755px; z-index: 37; -webkit-transform: -moz-transform: rotate(4deg);-ms-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);} /* Liens */ #liens {position : absolute ;width:870px;height :600px; overflow:scroll;left: 260px; top: 200px; background-color:#a6e5f7;padding-left:10px; } .liens {display: inline-block; vertical-align:top;max-width:250px; margin-left:10px; margin-bottom:10px;} .liens p{text-align:center;};}