Div et scrollbar de la page

Bonjour,

Je travaille sur un site semblable à celui ci :
http://www.csszengarden.com/?cssfile=202/202.css

C'est à dire que je fais défiler une div (qui fait toute la page) grâce à la barre de scroll de toute la page, et je fixe le reste
Mais j'ai un probleme...
Contrairement à la page présenté, le haut de la page ne peux pas cacher le texte qui déroule (transparence, etc...)
Par conséquent, on voit le texte défilé derrière mon menu et ma bannière :s
Une solution serait de mettre une grosse image moche pour cacher, mais c'est peu faisable...

Je viens donc chercher une solution en CSS

Il faudrait limité la zone de déroulement du div.
J'ai essayé avec height, mais ca coupe le texte.

Image :

http://img704.imageshack.us/img704/7792/exempleu.png

Dans l'image, les blocs en noir sont fixe (avec fixed) et la zone bleu est là où je souhaite que le texte se déroule. Malheureusement il se déroule aussi dans la zone des traits bleu.

Pour conclure : vu le site que j'ai mit pour présenter l'idée, comment limité en hauteur réellement la zone de défilement?

Merci d'avance, je suis totalement perdue
Modifié par Askental (23 Jul 2010 - 13:17)

Il y a une propriété overflow:auto qui pourrait être utile. Seulement celui-ci và laisser trace d'un scroll verticale dans ton div.

L'autre moyen est strictement design. Par contre si tu tiens à des zones vides entre ton header et ta barre de navigation la propriété overflow serais de mise pour la partie centrale.

Si tu place ton header et ta barre de navigation dans un div, celui-ci peut avoir un background de même couleur que le fond. Bref des fois on joue avec astuces plus qu'autre chose. Que je ne recommande pas d'ailleur.

++ zardoz.

J'ai déjà regardé toutes ces solutions :
L'utilisation overflow permet d'avoir le scroll vertical dans le div, et c'est exactement ce que je veux éviter en utilisant ce genre de design.

Apres, utiliser un background sur le header, j'ai tenté, mais vu que le fond n'est pas uniforme, la jonction sera mal faite, surtout si on redimensionne l'écran.

N'y a-t-il pas de moyen simple de scroller qu'un div avec la barre de scroll de la page?

Bonjour,

Sans savoir exactement comment est constitué le design pas facile de proposer des solutions.

Surtout si il y'a des zones de transparence à respecter.

bonjour,

de ce que j'ai compris,
tu essaye de fixer le décor pour ta page ?
alors pourquoi ne jouerais-tu pas sur les margin-top et bottom pour centrer ton contenu la scrollbar vient alors automatiquement.

ex:

/*ta div qui est hors-flux dans laquelle tu mets ton bandeau en général, voir menu*/
div#header{
position:fixed;
top:0px;
height:x;
}

/*ton contenu principal qui lui est dans le flux sera affecté par la scrollbar */
div#main{
margin-top:x;
margin-bottom:y;
}


div#footer{
position:fixed;
bottom:0px;
height:y;
}

fonctionne sur tous les navigateur sauf ie7 et en-dessous il me semble faut, alors jouer sur le padding-top

enfin voila je me rend compte à l'instant que c'est vieux comme post...

tampis !