marges fixesFermé

Question

Bonjour, 

Je souhaiterais avoir une petite bande permanente en haut et en bas de mon site (quelque chose comme 20px), de telle sorte que la page semble flotter dans un cadre dans l'écran. 
La taille du cadre s'adapterait donc à la taille de l'écran.
Le contenu serait entièrement dans ce cadre, ainsi que le background, et permettrait le défilement sans modifier la position du cadre (seul l'intérieur du cadre défile).
La barre de défilement resterait tout à droite de l'écran (non dans le cadre).

Voici l'adresse du site pour que vous puissiez voir mon code actuel:
www.cap-son.net

J'espère m'être suffisamment bien exprimé, n'hésitez pas à poser des questions si ce n'est pas clair.

Je m'en remet à vous après avoir essayé un tas de trucs sans succès, et vous remercie par avance.

Configuration: Mac OS X Snow Leopard (10.6) / Firefox 36.0

theshadoo · Answer

Top barre et bottom barre

https://cssdeck.com/labs/kmj56wqf

animostab · Answer

En plus de la solution de theshadoo
apres les div top barre et bottom barre un div contener avec dedans tout le reste du contenu 
div contener qui aura un margin top de la valeur de la hauteur de top barre et un margin bottom de la hauteur de bottom barre

capsule · Answer

Il y a de l'idée!

Theshadoo, effectivement les top et bottom barres sont bien en place lors de l'ouverture de la page, et donnent sur le coup l'effet désiré.
Animostab rajoute le padding afin que le début du contenu ne soit pas caché sous les barres.

Néanmoins, avec les codes que vous m'avez donné et un contenu long, nous avons un dépassement du contenu sous la bottom barre... Or ce que je cherchais était justement le moyen de faire défiler le contenu dans son cadre, les barres restant au dessus et en dessous.

J'ai retraduit les versions de cette conversation sur des pages web afin que vous puissiez voir le résultat :
www.cap-son.net/tests/margesfixes/theshadoo.htm
www.cap-son.net/tests/margesfixes/animostab.htm
www.cap-son.net/tests/margesfixes/capsule.htm
www.cap-son.net/tests/margesfixes/capsule2.htm
(je laisserais cela en ligne quelques temps au cas où d'autres s'intéressent au sujet)

J'ai rajouté dans mes versions des éléments qui permettent :
- de voir comment se comportait les marges gauche et droite
- de vérifier que les bords du contenu sont bien au bord (le cercle permet de vérifier l'ajustement des bord et la déformation éventuelle de l'image, dans mon cas je voudrais que le cercle devienne une ellipse adaptée au cadre)

Dans la version 2 j'utilise overflow :
- hidden dans le body (overflow: hidden;)
- scroll dans la div contenu (overflow-y: scroll;)
De plus j'ai rajouté un max-height (max-height: 90%) dans la div contenu.

Je suis proche du résultat, mais la barre de défilement est dans le cadre contenu au lieu d'être à droite, au bord de la fenêtre. Ce n'est pas que pour chipoter esthétique, simplement cette barre va vraiment me poser des problèmes techniques si elle reste là...

De plus un truc me chagrine: les barres sont en px et la div contenu a un max-height en % (pour s'adapter à la fenêtre utilisateur), ça donne un truc un peu bancal. Des bouts de bas de page disparaissent lors d'une fenêtre très peu haute... Faudrait-il revoir la façon d'ajuster les barres?

Je suis un débutant total en html et css, c'est mon tout premier site, alors j'avance point par point...

Merci beaucoup pour votre aide en tout cas !

capsule · Answer

C'est ça, merci ! 

Juste un dernier truc : pour que l'image de fond (background) se déforme et s'adapte parfaitement à la div contenu? 

J'ai essayé background-attachment: fixed; pour qu'elle ne bouge plus mais on dirait qu'elle se repère à la fenêtre navigateur et non à la div contenu, du coup elle est mal cadrée... et ça fait des heures que j'essaie de la ramener sans y parvenir...

Marges fixes

4 réponses

Discussions similaires

Newsletters