28172 sujets

CSS et mise en forme, CSS3

Div avec scroll qui s'affiche que si le contenu plus grand que la pag

Bonjour,

J'espère que je ne pose pas une question à laquelle on a répondu déjà 15('000) fois, car j'ai déjà épuré tous les forums à ce sujet, sans forcément trouver réponse à ma question..

Alors je suis sur un site qui contient 4 div de la manière suivante :

[Voir image jointe]

1 : Div de taille fixe en hauteur et en largeur (Sélection de la langue du site)
2 : Div de taille fixe en hauteur mais s'adapte au max de la page en largeur (En-tête)
3 Smiley lol iv qui s'adapte au contenu en hauteur et de largeur fixe (menu.. of course Smiley ravi )
4 : Div qui me pose problème.. Smiley sweatdrop Explications :

J'aimerais donc que ce div (qui est collé à droite du div menu et qui s'étend jusqu'à la droite du navigateur toujours au max) affiche un scroll vertical UNIQUEMENT si son contenu dépasse la hauteur de la fenêtre du navigateur. Donc j'entends par là, qu'il ne doit plus jamais y avoir de scroll vertical sur le site au complet (le scroll par défaut) mais par contre, il faudrait afficher au besoin, un scroll qui s'étend verticalement que sur la hauteur du div 4.

Si quelqu'un pouvait m'aider ou me mettre sur la voie, ce serait d'une grandeeeeee aide pour moi ! Smiley cligne

Au fait, j'utilise CSS pour paramétrer tout ca.. (logique me direz-vous mais on sait jamais Smiley cligne )
Je connais la propriété CSS en question : overflow. Est-ce bien celle-ci à utiliser ? Si oui, je n'y arrive pas..

A dispo si besoin de plus de renseignements si nécessaire..

Merci à vous. upload/32765-divs.jpg
Modifié par steve.bru (21 Sep 2010 - 14:18)
Merci Omanu !

J'ai essayé ces nouvelles propriétés que j'avais jamais utilisées, mais ca n'a pas l 'air de fonctionner.. Devrais-je interdire l'affichage du scroll de la page web pour que les div 1-3 restent toujours en place et que le contenu du div 4 soit scrollable ?
Salut,
Si j'ai bien compris, tu veux pouvoir scroller que la div4, et que le reste du site ne bouge pas?
Si c'est bien cela, le plus simple est peut etre d'utiliser position:fixed sur les éléments que tu souhaites voir immobile...Par contre, attention cette règle n'est pas reconnue sur ie<6 ou 7 (à vérifier)
Merci Omanu !

J'ai essayé ces nouvelles propriétés que j'avais jamais utilisées, mais ca n'a pas l 'air de fonctionner.. Devrais-je interdire l'affichage du scroll de la page web (si oui comment ? si tu peux me mettre sur la voie) pour que les div 1-3 restent toujours en place et que le contenu du div 4 soit scrollable ?
Modifié par steve.bru (21 Sep 2010 - 14:51)
vdo93 a écrit :
Salut,
Si j'ai bien compris, tu veux pouvoir scroller que la div4, et que le reste du site ne bouge pas?
Si c'est bien cela, le plus simple est peut etre d'utiliser position:fixed sur les éléments que tu souhaites voir immobile...Par contre, attention cette règle n'est pas reconnue sur ie<6 ou 7 (à vérifier)


Salut, oui, c'est bien cela Smiley biggrin

Je vais essayer et vous tient au courant ! Merci !
vdo93 a écrit :
Salut,
Si j'ai bien compris, tu veux pouvoir scroller que la div4, et que le reste du site ne bouge pas?
Si c'est bien cela, le plus simple est peut etre d'utiliser position:fixed sur les éléments que tu souhaites voir immobile...Par contre, attention cette règle n'est pas reconnue sur ie<6 ou 7 (à vérifier)


Alors ca fonctionne, ca fixe bien mes div 1-3 mais par contre, je pense que comme j'ai pas encore interdit l'affichage du scroll de la page web, il peut pas m'afficher celui du div 4... Je n'arrive pas à situer la logique à ce niveau là... Smiley sweatdrop
Tu ne pourras pas interdire l'affichage du scroll à mon avis.
Parce que si tu veux un scroll sur la div 4 uniquement, il faudrait que cette div soit contenue dans une div plus petite. Sinon ton scroll ne sert à rien.
Ah alors je devrais créer une div 4 d'une hauteur de 100% et inclure dedans une sous-div c'est bien ca ?
Quelles propriétés attribuer à cette sous-div du coup ?
A peu près.
Tu utilises ta div4 avec la hauteur de ce qu'elle contient, puis une div plus petite à l'intérieur avec une hauteur définie et tu lui appliques le overflow.
Mais dans ce cas, ton site ne "bougera" plus donc tu pourras enlever les position fixed.
Juste une précision encore : cela veut dire que le div4 extérieur aurait une hauteur fixe (p. ex. height: 500px) et qu'il ne pourra donc pas s'adapter à la taille de la page en hauteur (moins la taille de l'en-tête) ?
<head>
<style type="text/css">
#d1{position:absolute;top:0px;left:0px;width:90px;height:50px;} 
#d2{position:absolute;top:0px;left:90px;width:auto;height:50px;right:0px;} 
#d3{position:absolute;top:50px;left:0px;width:90px;height:auto;bottom:0px;} 
#d4{position:absolute;top:50px;left:90px;width:auto;height:auto;bottom:0px;right:0px;overflow-y:auto; }
</style>
</head>
<body>
<div id="d1" >1</div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>
</body>



edit: remplace tous les 50px par la hauteur de ton entête et tous les 90px par la largeur de ta marge.

edit2: perso sur tous mes sites je supprimes mes marges par défaut :
* {margin:0;padding:0;}

tu peux aussi fixer ton body à 100% pour être sur qu'il prenne toutes la page :
body{width:100%;height:100%;}

et même eventuellement empecher les scrolls (qui en principe n'ont déjà aucune raison d'apparaitre ): 
body{width:100%;height:100%;overflow:hidden;}

Modifié par bogs (21 Sep 2010 - 16:34)
bogs a écrit :
#d1{position:absolute;top:0px;left:0px;width:90px;height:50px;}
#d2{position:absolute;top:0px;left:90px;width:auto;height:50px;right:0px;}
#d3{position:absolute;top:50px;left:0px;width:90px;height:auto;bottom:0px;}
#d4{position:absolute;top:50px;left:90px;width:auto;height:auto;bottom:0px;right:0px;overflow-y:auto; }



edit: remplacer tous les 50px par la hauteur de ton entête et tous les 90px par la largeur de ta marge.


Salut bogs,

Merci pour ta réponse, celle-ci m'enthousiasme assez je dois dire Smiley biggrin ! Ca me paraît être ce qu'il me faut, et je testerai dès mon retour chez moi ce soir ! Merci infiniment, je te tiens au courant !
Salut !

Steve
Mettre toutes les <div> d'un site en absolute n'est pas la bonne solution...A long terme si tu rajoute des éléments, tu auras beaucoup de chevauchement. Tout le design est à refaire.
Ce n'est que mon avis.
bogs a écrit :
<head>
<style type="text/css">
#d1{position:absolute;top:0px;left:0px;width:90px;height:50px;} 
#d2{position:absolute;top:0px;left:90px;width:auto;height:50px;right:0px;} 
#d3{position:absolute;top:50px;left:0px;width:90px;height:auto;bottom:0px;} 
#d4{position:absolute;top:50px;left:90px;width:auto;height:auto;bottom:0px;right:0px;overflow-y:auto; }
</style>
</head>
<body>
<div id="d1" >1</div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>
</body>



edit: remplace tous les 50px par la hauteur de ton entête et tous les 90px par la largeur de ta marge.

edit2: perso sur tous mes sites je supprimes mes marges par défaut :
* {margin:0;padding:0;}

tu peux aussi fixer ton body à 100% pour être sur qu'il prenne toutes la page :
body{width:100%;height:100%;}

et même eventuellement empecher les scrolls (qui en principe n'ont déjà aucune raison d'apparaitre ): 
body{width:100%;height:100%;overflow:hidden;}


Alors là, bogs, MERCI mille merci !!! Smiley biggrin Smiley biggrin Smiley biggrin

Grâce à toi, j'obtiens exactement ce que je veux... C'est juste génial, je te remercie beaucoup ! Je vais pouvoir continuer le site car je dois dire que je voulais pas passer à autre chose avant que ceci soit résolu..

Bonne continuation à toi !!! ..et encore merci Smiley smile

Steve
Sujet clos
Aller à