On m'a conseillé de reprendre mon travail a 0 car j'avait trop de saletés dans mon code et on m'a conseillé d'uttiliser des flexbox.
Bon eleve que je suis j'ai repris une page blanche et recommencé.
Le soucis c'est que je sais pas comment obtenir l'effet fixe désiré.
je sais que l'on peut pas uttiliser des position:fixed dans des flexbox mais y a-t-il un moyen pour fixer ou simuler une effet fixed ?
Mon but c'est que le header soit fixe et que les div .gauche et .droite de la .mainzone soient fixe mais pas la partie centrale. Le but final est de pouvoir faire defiler la zone centrale avec le contenu en maintenant les colonnes et le header fixe.
On peut utiliser la position: fixed; dans la méthode flexbox. Je t'ai conseillé de passer à cette méthode pour ne pas utiliser les float ou encore les display: inline-block pour organiser ta page.
Tu peux tout à fait mettre un position:fixed sur les parties que tu veux garder fixe au moment du scroll.
ben la si je met position:fixed dans le header ou dans .gauche / .droite de mainzone ca casse toute la mise en forme et alors ca change plus grand chose d'avoir flexbox ou pas.
On peut utiliser la position: fixed; dans la méthode flexbox. Je t'ai conseillé de passer à cette méthode pour ne pas utiliser les float ou encore les display: inline-block pour organiser ta page.
Tu peux tout à fait mettre un position:fixed sur les parties que tu veux garder fixe au moment du scroll.
Oui, mais ça n'aurait aucun sens. Un élément en position: fixed n'est plus compris dans le flux, donc il n'aurait aucune incidence sur les éléments autour de lui, flexbox ou pas.
@JeromeBadoux Tu risques de te heurter à un problème si tu ne te tourne pas vers un plugin javascript pour ce genre de choses. Il faudrait que tu aies quelques notions avant que je ne te donne quelques liens…
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Bonsoir, avant toute chose je tiens à te féliciter pour ton apprentissage rapide. Bien que je ne me serais pas risquer aux flexbox pour ce layout, tu n’es pas loin. Attention cependant aux largeurs et hauteurs. Tu as choisi la technique du flexbox donc les éléments son flexible, avec un min-width: 940px; tu te crées un point de rupture que tu devras gérer plus tard via media queries. J’aurais laissé le flexbox géré les dimensions de largeur.
La technique du height : 100% sur un élément pour que celui-ci prenne toute la hauteur disponible ne fonctionne que si une hauteur est définie sur son parent, et si celui-ci à une hauteur en pourcentage il est nécessaire d’indiquer une hauteur à son parent jusqu’au plus haut niveau du document à savoir l’élément html. Comme tu n’indiques pas de hauteur à cet élément les height : 100% ne servent à rien. Remplis avec du contenu plutôt que d’indiquer une hauteur.
Le code qui suit est certainement perfectible, est-ce bien ce que tu cherchais ?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="debug.css">
<title>Titre</title>
<style type="text/css">
body ,html {
margin: 0 auto;
height: 100%; /* permet l'usage de hauteur en % pour les enfants */
}
.wrapper{
background-color: grey;
display: flex;
flex: 1;
/* justify-content:center; */
flex-direction: column;
height: 100%; /* permet de prendre la hauteur du navigateur en cas de peu de contenu */
/* min-height: 300px; */
}
.wrapper header{
background-color: red;
/* height: 150px; */
min-height: 150px;
display: flex;
position: fixed;
top: 0;
right: 0;
left: 0;
}
header .headcentre{
background-color: peachpuff;
/* height: 150px; */
flex-grow:3;
/* min-width:940px; */
min-height: 150px;
max-width: 60%;
order:1;
}
.headcentre .banner{
background-color: lightblue;
/* height: 100px;
min-height:100px; */
display: flex;
flex-direction: row;
}
.banner .langues{
background-color: yellow;
flex-grow: 1;
}
.banner .logo{
background-color: brown;
flex-grow: 3;
}
.banner .connexion{
background-color: orange;
flex-grow: 1;
}
.headcentre nav{
background-color: black;
/*height: 50px; */
min-height:50px;
}
.wrapper .mainzone{
background-color: green;
flex-grow: 1;
display: flex;
margin-top: 175px; /* la hauteur de ton header; puisque le positionnement fait sortir l'élément du flux courent */
}
.gauche{
background-color: purple;
flex-grow:1;
max-width: 20%;
}
.droite{
background-color: blue;
flex-grow:1;
order: 2;
max-width: 20%;
}
.mainzone .centre{
background-color: pink;
flex-grow:3;
order: 1;
/* min-width: 940px; */
max-width: 60%;
margin-left: 20%; /* pousse les bords, pour les remettres dans la zone visible, puisque les éléments positionner sorte du flux courent */
}
.fixed {
position: fixed;
top: 175px; /* la hauteur de ton header; */
bottom: 0;
width: 20%;
}
.mainzone .droite {
right: 0;
}
ul {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="gauche">
<p>gauche</p>
</div>
<div class="droite">
<p>droite</p>
</div>
<div class="headcentre">
<div class="banner">
<div class="langues">
<p>langues</p>
<p>langues</p>
<p>langues</p>
</div>
<div class="logo">logo</div>
<div class="connexion">connexion</div>
</div>
<nav class="barrenav">
<ul>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
</ul>
</nav>
</div>
</header>
<div class="mainzone">
<div class="gauche fixed">mainzone gauche</div>
<div class="droite fixed">mainzone droite</div>
<div class="centre">
<p>Première ligne</p>
<p>contenu</p>
<p style="text-align: right;">contenu à droite</p>
<!-- ligne à dupliquer pour avoir du contenu -->
<p>contenu</p>
<p>Derniére ligne</p>
</div>
</div>
</div>
</body>
</html>
pour la dernière techniques proposée j'ai eu qques problemes mais j'ai trouvé une solution qui me convient.
en gros j'ai simplement defini en px la taille du body et et j'ai mit un overflow : hidden au wrapper et je ratrappe le coup avec un overflow:scroll a la zone centrale du contenu et ca fonctionne.
Comment fixer des div dans une flexbox ?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !