Bonjour,
Bonjour,
J'ai réaliser une page web, mais je n'arrive pas a mettre en place un overflow pour faire descendre ma page, voila le code de la page:
<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> @import url(css/style_page.css); @import url(css/menu_haut-flex.css); @import url(index/css/index_css.css); @import url(index/css/slideshow.css); </style> <title>Country Rebel's Cadeilhan</title> </head> <body> <header> <?php include("menu_haut/menu_haut.php"); ?> </header> <!-- Mettrez un compteur ici !! --> <div class="page"> <section class="section_index"> <div class="banniere"> <h2 class="banniere"> Bienvenue, Sur le site des Country Rebel's Cadeilhan ! </h2> </div> <section class="slideshow"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script> <script type="text/javascript" src="http://unslider.com/unslider.min.js"></script> <style type="text/css"> .imvustylez_slideshow1461048786,.imvustylez_slideshow1461048786 *{margin:0;padding:0;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.imvustylez_slideshow1461048786{position:relative;width:500px!important;height:300px!important;overflow:auto;line-height:24px;text-align:center}.imvustylez_slideshow1461048786 ul{list-style:none;width:300%}.imvustylez_slideshow1461048786 ul li{background-position:top center;background-repeat:no-repeat;display:block;float:left;width:500px!important;padding:360px 0 9999px;min-height:9999px;-moz-background-size:100% 100%;-o-background-size:100% 100%;-ms-background-size:100% 100%}.imvustylez_slideshow1461048786 .dot{-webkit-filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));-moz-filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));-ms-filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));-o-filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.imvustylez_slideshow1461048786 .dots{position:absolute;left:0;right:0;bottom:20px}.imvustylez_slideshow1461048786 .dots li{display:inline-block;width:10px;height:10px;margin:0 4px;text-indent:-999em;border:2px solid #fff;border-radius:6px;-moz-border-radius:6px;cursor:pointer;opacity:.4;-webkit-transition:background .5s,opacity .5s;-moz-transition:background .5s,opacity .5s;transition:background .5s,opacity .5s;box-shadow:0 3px 2px rgba(0,0,0,.25);-webkit-box-shadow:0 3px 2px rgba(0,0,0,.25)}.imvustylez_slideshow1461048786 .dots li.active{background:#fff;opacity:1}.imvustylez_slideshow1461048786 ul li{cursor:pointer}.imvustylez_slideshow1461048786 .playbtn{position:absolute;bottom:4px;right:0px;color:#fff;font-size:28px;z-index:999;width:30px;height:30px;text-shadow: 1px 1px 0px #000;}</style> <div class="imvustylez_slideshow1461048786"><div class="playbtn">▶</div><ul><li style="background-image:url('index/slideshow/photo1.jpg')" onclick="window.open('index/slideshow/photo1.jpg')"></li><li style="background-image:url('index/slideshow/photo2.jpg')" onclick="window.open('index/slideshow/photo2.jpg')"></li><li style="background-image:url('index/slideshow/photo3.jpg')" onclick="window.open('index/slideshow/photo3.jpg')"></li><li style="background-image:url('index/slideshow/photo4.jpg')" onclick="window.open('index/slideshow/photo4.jpg')"></li><li style="background-image:url('index/slideshow/photo5.jpg')" onclick="window.open('index/slideshow/photo5.jpg')"></li></ul></div> <script type="text/javascript"> $('.imvustylez_slideshow1461048786').unslider({ fluid: true, dots: true, delay: 5000, speed: 1200 }); </script> </section> <div class="Le_club"> LE CLUB </div> <div class="Les_cours"> <img class="photo_les_cours" src="index/photo/photo_les_cours.jpg" alt="photo des cours" /> <p class="texte_titre"> COURS </p> <p class="texte_les_cours"> Tous les Vendredi </br> De 19 H à 20 H : COURS DEBUTANT / NOVICE </br> De 20 H à 21 H : COURS INTERMEDIAIRE / AVANCE </br> <a class="lien_cours"> A la salle des fêtes de cadeilhan </a> </p> </div> </section> <footer> </footer> </div> </body> </html>
et voila mes code css :
style_page_. css
body{width: 100%; height: 100%; overflow: auto; background-image: url("image/fond_site.jpg"); background-attachment: fixed; /*fixed*/ background-repeat: no-repeat; background-position: 5% 0%;} header {/*position: fixed;*/ display: block; width: 100%; height: 22%; margin-top: 0%; background-attachement: fixed; /*background-color: blue;*/ } section {position: fixed; display: flex;}
et index_css .css
/* Déclaation police */ @font-face {font-family: "Docktrin"; src: url("texte/docktrin/docktrin.ttf") format("truetype");} /*-------------------*/ .section_index{ margin-top: 12%;} /* banniére*/ h2.banniere{ position: fixed; width: 100%; height: 4%; margin-left: 0%; text-align: center; color: red; font-family: "Docktrin", serif, sans-serif; font-size: 3em;} /* Slideshow */ .slideshow { /* photo h: 500px / l: 300px */ position: fixed; width:100%; height: 39%; margin-top: 6.5%; display: flex; justify-content: center;} .Le_club {position: fixed; width: 15%; height: 8%; font-size: 2.5em; text-align: center; /* bordure*/ border: 3px #64b743 solid; border-radius: 10px; box-shadow: 4px 4px 0px #325c22; /*--------*/ color: #6c106c; font-weight: bold; background-color: #64b743; /* Positionnement*/ margin-top: 26%; margin-left: 18%;} /* Div les cours */ .Les_cours {position: fixed; width: 50%; height: 35%; background: url("../photo/arriere_les_cours.png") no-repeat; margin-top: 32%; margin-left: 20%;} .photo_les_cours {position: fixed; transform: rotate( 344deg); margin-left: 2%; margin-top: 3%;} .texte_titre {position: fixed; width: 15%; height: 8%; text-align: center; margin-left: 28%; margin-top: 2%; background: url("../photo/titre_les_cours.jpg"); color: red; font-weight: bold; font-size: 2.3em;} .texte_les_cours { position: fixed; width: 30%; height: 13%; color: #6c106c; font-weight: bold; font-size: 1.2em; text-align: center; margin-top: 8%; margin-left: 20%;}
Merci d'avance pour ce qui me lirons et qui pourront m'aider.
Excusez-moi pour la mise en page du code html, je ne sais pas pourquoi il s'affiche comme cela.
Arthur32810
Afficher la suite