Partage

le scrollbar apparait mais ne fait rien defiler.

2 décembre 2016 à 23:16:14

Salut,

J'ai un probleme, lorsque je reduit la fenetre de mon navigateur en-dessous de 940px la zone .centre commence a se faire cacher par la fenetre du navigateur et une scroll bar horizontale apparait en bas... ce qui est tres bien.

MAIS ... le soucis c'est que cette scroll bar ne fait rien defiler...

une idée?

ici le hrml : (les import php ne sont que des textes donc rien qui interfère)

<!DOCTYPE html>
<?php
    include ("/langues/Francais/themeFR.php");
?>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="debug.css">
        <title>Titre</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="gauche"></div>
            <div class="droite"></div>
            <div class="centre">
                <div class="header">
                    <div class="banner">
                        <div class="langues">v</div>
                        <div class="logo">Logo</div>
                        <div class="connexion">v</div>
                    </div>
                    <div class="barrenav">
                        <div class="accueil">
                            <div class="liens">
                                <a href="index.php"><?php echo $BarnavContentAccueil ?></a>
                            </div>
                        </div>
                        <div class="articles">   
                            <div  class="liens">
                                <a href="articles.php"><?php echo $BarnavContentArticles ?></a>
                            </div>
                        </div>
                        <div class="salons">
                            <div  class="liens">
                                <a href="salons.php"><?php echo $BarnavContentSalons ?></a>
                            </div>    
                        </div>
                        <div class="recherche">
                            <div  class="liens">
                                <a href="search.php"><?php echo $BarnavContentRecherche ?></a>
                            </div>    
                        </div>
                    </div>
                </div>
                <div class="mainzone">
                    
                </div>
            </div>
        </div>
    </body>
</html>

Ici le css

body{
    overflow-y: hidden;
    overflow-x: visible;
}
body, html{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
}
.header{
    background-color: purple;
    width: 60%;
    min-width: 940px;
    height:150px;
    text-align: center;
    position: fixed;
}
.banner{
    background-color: lightblue;
    width: 60%;
    min-width: 940px;
    height: 100px;
    text-align: center;
    position: fixed;
}
.langues{
    background-color:yellow;
    display: inline-block;
    float: left;
    width: 20%;
    height: 100px;
}
.logo{
    background-color: blue;
    display: inline-block;
    width: 60%;
    height: 100px;
}
.connexion{
    background-color: orange;
    display: inline-block;
    width: 20%;
    float: right;
    height: 100px;
}
.barrenav{
    background-image: url(barremenu.png);
    background-repeat: no-repeat;
    background-size: 100% 50px;
    height: 50px;
    width: 100%;
    margin-top: 100px;
}
.accueil{
    display: inline-block;
    width: 20%;
    height: 100%;
    margin-left:2.5%;
    float: left;
}
.articles{
    display: inline-block;
    height: 100%;
    width: 20%;
    float: left;
}
.salons{
    display: inline-block;
    height: 100%;
    width: 20%;
    float: left;
}
.recherche{
    display: inline-block;
    height: 100%;
    width: 30%;
    float: left;
}
.liens{
    padding-top: 10px;
}
.barrenav a{
    font-size: 30px;
    color: white;
    text-decoration: none;
}
.mainzone{
    position: fixed;
    margin-top: 150px;
    height: calc(100% - 150px);
    width:60%;
    min-width: 940px;
    background-color: pink;
}
@media (min-width:941px){
.wrapper{
    display: flex;
    height: 100%;
    width: 100%;
    background-color: grey;
    justify-content:center;
}
.gauche{
    background-color: red;
    flex-grow:1;
}
.centre{
    background-color: green;
    width:60%;
    min-width:940px;
}
.droite{
    background-color: peachpuff;
    order:1;
    flex-grow:1;
}
}
@media (max-width:940px){
.wrapper{
    height: 100%;
    width: 100%;
    background-color: grey;
    display: inline-block;
}
.gauche{
    background-color: red;
    display: none;
}
.centre{
    background-color: green;
    width:940px;
    height: 100%;
}
.droite{
    background-color: peachpuff;
    display: none;
}
}

-
Edité par JérômeBadoux 3 décembre 2016 à 0:04:37

Lamecarlate

2 décembre 2016 à 23:48:31

Bonjour,

peux-tu mettre ta page en ligne afin que nous puissions voir de quoi il s'agit ? (ce sera de toute façon mieux que de poster ton code ici)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JérômeBadoux

2 décembre 2016 à 23:53:12

j'ai nul part encore pour l'heberger et j'ai pas encore installer mes FTP pour celà... donc dur dur de mettre en ligne.

maintenant que y a eu une reponse ca passe plus en spam je peux les poster.

-
Edité par JérômeBadoux 3 décembre 2016 à 0:05:12

Lamecarlate

3 décembre 2016 à 0:20:00

Bon, alors :

width: 100%; ça, tu évites comme la peste. À lire : https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/ <-- ton problème vient d'ailleurs très probablement de là
height: 100% aussi la plupart du temps
redéfinir le display de html et de body, pourquoi ?
nul besoin d'avoir display: inline-block; et float: left en même temps : choisis

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Rasgardo

3 décembre 2016 à 0:22:51

Bonjour Jérôme,

Peux tu nous mettre le contenu de cette div ici s'il te plait? Le code source une fois le php introduit. Car la, on a pas accès à ton problème. On a juste des zones de toutes les couleurs.

JérômeBadoux

3 décembre 2016 à 0:31:57

j'ai supprimé tout les width: 100% mais rien n'a changé.

c'est pas le php en gros le php c'est une serie de valeur associées a des textes.

genre

$accueil= "accueil"

$salons="les salons"

ca change rien d'ailleurs de les retirer le probleme persiste.

Voila donc le html avec les php retirés

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="debug.css">
        <title>Titres</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="gauche"></div>
            <div class="droite"></div>
            <div class="centre">
                <div class="header">
                    <div class="banner">
                        <div class="langues">v</div>
                        <div class="logo">Logo</div>
                        <div class="connexion">v</div>
                    </div>
                    <div class="barrenav">
                        <div class="accueil">
                            <div class="liens">
                                <a href="index.php">Accueil</a>
                            </div>
                        </div>
                        <div class="articles">   
                            <div  class="liens">
                                <a href="articles.php">Articles</a>
                            </div>
                        </div>
                        <div class="salons">
                            <div  class="liens">
                                <a href="salons.php">Les Salons</a>
                            </div>    
                        </div>
                        <div class="recherche">
                            <div  class="liens">
                                <a href="search.php">Recherche Avancée</a>
                            </div>    
                        </div>
                    </div>
                </div>
                <div class="mainzone">
                    
                </div>
            </div>
        </div>
    </body>
</html>

-
Edité par JérômeBadoux 3 décembre 2016 à 0:44:55

Rasgardo

3 décembre 2016 à 0:45:51

En fait, je n'ai pas de scroll bar qui apparait, donc je ne vois pas ce qui te pose problème, c'est pour ça que je t'ai demandé de poster le contenu.

JérômeBadoux

3 décembre 2016 à 0:48:39

il faut reduire la taille du navigateur pour avoir la scrollbar.... tant que la fenetre du navigateur est superieure ou egale a 940px il y a pas de scroll bar.

Rasgardo

3 décembre 2016 à 1:00:08

Ok, en fait, je pensais que la zone, où la scroll bar apparaissait, était la zone .centre.

J'ai trouvé ton problème. Tu utilises en masse la position fixed. Supprimes toutes les positions fixed et ton problème sera résolu.

Pourquoi utilises-tu autant de position:fixed? Quel effet veux-tu obtenir?

-
Edité par Rasgardo 3 décembre 2016 à 1:00:41

JérômeBadoux

3 décembre 2016 à 1:04:04

et bien je veux que les bords gauches et droites restent fixe, que la bannière et le menu restent egalement fixe.

Je voudari que seul la zone centrale ne soit pas fixe mais j'ai dut faire une astuce pour regler un probleme en creant une zone principale fixe et lui donner un overflow:scroll.

y a t il un moyen de garder ma page fixe sans buguer cette scroll barre?

Rasgardo

3 décembre 2016 à 1:15:36

Quel était le problème?

Parce que la, toutes tes parties sont en "position:fixed;" donc normal que rien ne bouge. Il faut que tu supprimes le "position: fixed" dans .mainzone et que tu règles ton problème autrement.

Je te conseille aussi d'utiliser la méthode flexbox pour l'organisation spatiale de ta page, tu trouveras un cours ici.

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Les display: inline-block et float: left trouvent très vite leurs limites. La méthode flexbox permet beaucoup plus de chose.

-
Edité par Rasgardo 3 décembre 2016 à 1:30:33

AbcAbc6

3 décembre 2016 à 2:43:01

Bonjour, Bonsoir, Ouh là là quel check-up de toute les possibilités de positionnement !! J'imagine que tu ne comprends pas ce que tu fais (non en fait j'en suis certain). Je te propose de recommencer d'une page blanche en comprenant ce que tu fais grâce au liens ci-après.

Tu utilises les flottants sans en annuler les effets ce qui risque de te pauser problème pour le contenu qui suit. Ensuite (comme lamecarlate le dit) soit c'est un inline-block soit un float mais pas les deux en même temps.

Un éléments positionner (soit avec float , soit avec position : absolute, fixed ) sort du flux courant. Les propriétés top, right, bottom et left spécifient la position des éléments positionnés, tu n'en utilises aucune.

Soit tu positionnes tes éléments avec les propriétés que j'énumère ci-dessus soit tu utilises le flexbox, mais combiner me semble caduque.

Il existe des gabarits de départ que tu peux utiliser (en les comprenant bien sur, le copier/coller ne sert à rien) . et des tutos bien fait mais il me semble impératif, pour comprendre ce que tu fais, de lire quelques articles sur le positionnement .

Dans certain cas, pour ne pas dire souvent, le gabarits vide est bon et quand on y apporte du contenu cela foire, utilise un générateur de faux texte pour voir le comportement de la page avec du contenu tel que http://fr.lipsum.com/

Enfin sache que le HTML5 est arrivé, utilise les balises tel que <header> <nav> à la place des <div> qui n'ont aucun sens sémantique.

Je ne saurais conclure en occultant le fait qu'un menu de navigation ne se fait pas avec des <div> successive mais plutôt avec des listes <ul> et <li>, vas voir http://www.frogweb.fr/ pour des exemples et apprendre. Cela serra plus flexible quand tu passeras en version mobile.

Reviens-nous avec ton nouveau code si tu as encore des difficultés.

Bon apprentissage.

YvesEychenne1 a écrit:

Quel était le problème?

Je pense que c’était width: 940px; sur .centre dans la media max-width:940px

-
Edité par AbcAbc6 3 décembre 2016 à 3:08:45

Lamecarlate

3 décembre 2016 à 8:37:34

Tu utilises en masse la position fixed.

Oh ben dis donc ça m'avait échappé, ça. (c'est entre autres pour ça que je préfère étudier le code dans son milieu naturel : le navigateur ; comme ça je loupe moins ce genre de choses)

Pas d'aide concernant le code par MP, le forum est là pour ça :)