Je n'arrive pas a faire un overflow [Résolu/Fermé]

Signaler
Messages postés
102
Date d'inscription
jeudi 9 août 2012
Statut
Membre
Dernière intervention
8 décembre 2016
-
Messages postés
206
Date d'inscription
lundi 5 octobre 2015
Statut
Membre
Dernière intervention
9 mars 2021
-
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



1 réponse

Messages postés
206
Date d'inscription
lundi 5 octobre 2015
Statut
Membre
Dernière intervention
9 mars 2021
31
Set the overflow :
en css

div {
width: 150px;
height: 150px;
overflow: scroll;
}