Ajout d’un cadre fixe autour de votre page web en CSS

12 Oct 2017

Bonjour !

Nous allons voir aujourd’hui comment ajouter un cadre fixe sur une page web en CSS uniquement, donc sans modification du code PHP ni ajout de Javascript pour modifier le code html de la page. Ce procédé permet de faire défiler la page dans la fenêtre du cadre et ainsi de mettre son contenu en valeur, à la façon des cadres pour photos, peintures, etc.

Tout de suite un exemple de cadre CSS en condition réelle pour voir de quoi je parle (un peu facile, la pub, j’avoue…). Ici le cadre est noir et fait un peu office de caisse américaine pour les connaisseurs. Il permet de détacher les fonds de section plutôt gris des bords du navigateur souvent gris aussi. Ça me fait aussi l’effet d’un site en suspension dans l’espace, mais ça c’est plus personnel 😉

Le code CSS du cadre

body { padding: 20px; }
body:before, body:after { content: ""; position: fixed; z-index: 999; background: inherit; left: 0; right: 0; height: 20px; }
body:before { top: 0; }
body:after { bottom: 0; }

Explications

La couleur du bord est celle de la couleur du fond définie dans le « personnaliseur » de thème Divi. On pourrait l’écraser ici en ajoutant « background: #couleur !important; » à l’élément body.

La couleur du corps et son padding horizontal permettent de définir les bords droit et gauche (représentés en fait par le fond du body hors padding) et aussi de réduire la partie utile de la page à la fenêtre définie par notre cadre.
Le padding vertical est utile pour être sûr que la page démarre après le bord supérieur et se termine avant le bord inférieur afin que les bords apposés ensuite ne cachent rien lorsqu’on est en début ou fin de page. Dans la plupart des cas, « padding: 0 20px » pourrait suffire s’il n’y a rien d’important aux extrémités, mais comme c’est encore plus simple à écrire, pourquoi s’en priver ?

Les :before et :after définissent les deux bandes qui forment les bords haut et bas. Elles sont « fixes » pour ne pas défiler avec le reste du corps, et z-indexées pour bien masquer tout ce qui passe (certains éléments de la page ont parfois un z-index.

Répercussions sur le menu Divi

Bon OK, le cadre est en place, et on voit bien défiler notre page dans sa fenêtre. Mais quid du menu ?

Pour les menus de style haut de page horizontal (défaut, centré, centré inline), deux cas se présentent :

  • menu mobile, ou desktop sur fond non transparent et non fixe
  • menu desktop sur fond transparent ou fixe

Dans le premier cas, rien à ajouter, car il est simplement ajouté au début du body. Il ne fait que décaler le reste de la page à l’intérieur du cadre.

Dans le second, le menu est positionné en fixe sur la fenêtre du navigateur, donc il faut le décaler, comme j’ai dû le faire sur cette galerie photo.

Le code à ajouter est simplement  (menu desktop fond transparent ou fixe) :

@media only screen and (min-width: 981px) {
  #main-header { top: 20px !important; }
}

Pour les autres styles de menu, je n’ai pas testé, je vous laisse expérimenter…

Conclusion

Je voulais simplement ajouter un cadre uni à ma page, avec le moins de CSS possible, et sans perturber le reste du site… Mais je pense qu’en farfouillant un peu on doit pouvoir combiner des border, box-shadow et autres gradients ou images afin de peaufiner le style. Etant plutôt adepte du minimalisme, je me suis arrêté là… A vous de jouer !

Bon encadrement à tous 🙂

Crédit photo : Freepik