Annonce ToutSurTout

Bienvenue sur toutsurtout.biz

Déjà 15 ans !

Radio TST

Si vous souhaitez participer vous aussi aux discussions sur le forum, il faut vous inscrire ou vous identifier.

Le Thème TST Automne est maintenant en place.

Les inscriptions sont actuellement OUVERTES.

Message 1 Discussion postée le 29-09-2009 à 01:21:34

Philippe
Avatar de Philippe


Titre: Banni
Avancement: Niveau 3
Date d'inscription: 26-09-2009
Messages: 3 660

Centrer un div : position:fixed

Centrer un div : position:fixed

Voici un moyen, comme un autre, de centrer un div en utilisant l'attribut position:fixed. Pour bref rappel, cet attribut permet à un div de suivre la page, même si l'utilisateur "scroll" celle-ci. Ceci devrait fonctionner sur les navigateurs de type Firefox, Opera, Internet Explorer.. Voici un exemple :

<div style="position:fixed; top:155px;opacity:none;background-color:blue;color:white;width:300px;border:solid 3px #0E2235;height:250px; left:50%; top:50%;margin-top:-125px; margin-left:-150px;opacity:0.8">Ceci est un test</div>

Il n'est pas question d'expliquer ici pendant des heures comme fonctionne les traditionnelles color;background-color;border... Ils ne sont présents que pour un besoin esthétique.
Néanmoins, opacity est utile pour modifier l'opacité (transparence) d'un élément. Une valeur de opacity:1.0 rend le div parfaitement opaque, il n'est pas possible de voir ce qu'il y a "derrière". Une valeur de 0.0 le rend invisible.
# position:fixed : Permet à notre div de prendre cet aspect "scroll".
# left:50% :Nous souhaitons que le div soit centré horizontalement. Bien entendu left tout seul est inutile, puis-ce que le div a une certaine largeur, il faut alors repositionner celui-ci en fonction de cette largeur.
# margin-left:-150px : Notez bien le signe négatif -. Le margin-left va "tirer le div" de 150px vers la gauche, pour que celui-ci soit bel et bien centré. La largeur ( width ) du div est de 300px. Pour trouver la valeur de margin-left, il suffit de diviser la width par 2. Exemple : 300px ( width ) /  - 2 = -150px = margin-left
# top:50%. Tout pareil, l'attribut top positionne le div en milieu de page ( vertical ) . Seul celui-ci ne centre pas le div, il va falloir utiliser margin-top.
# margin-top: -125px : Puis-ce que la hauteur de notre div est de 250px; utilisons un margin-top de -125px, afin de le faire un peu "remonter".


https://www.world-lolo.com/images/uploads/image.num1445754529.of.world-lolo.com.jpg
Des stades aux entrées payantes sont pleins de gens qui pensent que ceux qu'ils applaudissent sont trop payés, et les bibliothèques à l'entrée gratuite sont vides des gens qui pensent que les livres sont trop chers ...
 

Message 2 Réponse postée le 23-11-2009 à 18:27:51

Caroline
Avatar de Caroline


Titre: Modératrice de choc
Avancement: Niveau 3
Lieu: Marne
Date d'inscription: 27-09-2009
Messages: 5 352

Re: Centrer un div : position:fixed

+1


http://www.toutsurtout.biz/img/UserBarTST.gif
https://www.world-lolo.com/images/uploads/image.num1258671799.of.world-lolo.com.jpeg