Je n'arrive pas a faire un overflow

Résolu/Fermé

arthur32810 Messages postés 103 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 8 décembre 2016 - 19 avril 2016 à 19:11
Va4l Messages postés 214 Date d'inscription lundi 5 octobre 2015 Statut Membre Dernière intervention 9 janvier 2025 - 20 avril 2016 à 11:07

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

A voir également:

Je n'arrive pas a faire un overflow
Run-time error 6 overflow - Forum Réseau
Comment resoudre le probleme avec overflow - Forum C#
[CSS] overflow : scroll ✓ - Forum CSS
Cdboot memory overflow error - Forum Windows
Status stack overflow error - Forum Windows

1 réponse

Réponse 1 / 1

Va4l Messages postés 214 Date d'inscription lundi 5 octobre 2015 Statut Membre Dernière intervention 9 janvier 2025 36
20 avril 2016 à 11:07

Set the overflow :
en css

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

Discussions similaires

erreur stack overflow

Problème avec "overflow"

Buffer Overflow

que signifie stack overflow ?

buffer overflow