Marges fixes
capsule
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Marges fixes
- Les valeurs choisies pour les marges gauche et droite l'espacement des colonnes - Forum Word
- Vos marges sont relativement réduites - Forum Word
- Problème de marge lors d'impression document word 2010 - Forum Windows 8 / 8.1
- Dans le document à télécharger : mettez les pages en orientation paysage. mettez toutes les marges hautes, basses, droites et gauches à 2 cm. combien de pages obtenez-vous ? - Guide
- Marges illustrator - Forum Illustrator
4 réponses
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
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
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 !
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 !
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...
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...
Salut !
J'ai effectivement passé pas mal de temps à essayer cover, et d'autres trucs, sans succès. Je ne comprends pas très bien pourquoi des fois certains attributs s'appliquent à nos fenêtre div, et d'autres à la fenêtre navigateur entière. Je reviendrais sur ces questions plus tard je pense, j'y ai déjà passé trop de temps et il faut que j'avance sur mon site.
Pour l'effet que je voulais, je m'en suis sorti depuis en utilisant la fonction float. Sans doute pas très rigoureux mais ça marche.
Quoi qu'il en soit je voudrais vous dire un grand merci pour votre aide précieuse !
PS : La question initiale de ce post a été résolue. Je ne suis pas très habitué des forum, est-ce à moi de le signaler afin qu'elle apparaisse comme telle?
J'ai effectivement passé pas mal de temps à essayer cover, et d'autres trucs, sans succès. Je ne comprends pas très bien pourquoi des fois certains attributs s'appliquent à nos fenêtre div, et d'autres à la fenêtre navigateur entière. Je reviendrais sur ces questions plus tard je pense, j'y ai déjà passé trop de temps et il faut que j'avance sur mon site.
Pour l'effet que je voulais, je m'en suis sorti depuis en utilisant la fonction float. Sans doute pas très rigoureux mais ça marche.
Quoi qu'il en soit je voudrais vous dire un grand merci pour votre aide précieuse !
PS : La question initiale de ce post a été résolue. Je ne suis pas très habitué des forum, est-ce à moi de le signaler afin qu'elle apparaisse comme telle?
