02
août 06
Voici la naissance d'une nouvelle catégorie (encore) : Astuces CSS. Rien de très extraordinaire, comme sur un bloc-note, je note ici différentes astuces trouvées sur la toile et souvent très utiles pour la création de pages internet, en feuille de style.
La première d'une longue série: Centrer un bloc dans la page
Tout d'abord le bloc:
<div id="bloc"></div>
la feuille de style:
#global{ position:absolute; left: 50%; top: 50%; width: 700px; height: 400px; margin-top: -200px; /* moitié de la hauteur */ margin-left: -350px; /* moitié de la largeur */ border: 1px solid #000; }
L'astuce consiste donc à placer ce bloc à top 50% et left 50%, afin de mettre le coin supérieur gauche du bloc au milieu de page. Puis on définit des marges négatives dont la valeur est exactement la moitié de la largeur et hauteur du bloc, ce qui le positionnera au milieu de page.
Cela marche que pour les bloc dont l'on connaît d'avance la hauteur et la largeur. Personnellement je m'en sert pour centrer par exemple une animation flash au centre de la page.
(via alsacreations & bluerobot )
Laisser un commentaire