Tayo
Astuce et Tutorial » Programmation / Developpement » css-et-design » Astuce rédigée par Zabuza
Description de cet article : Utilisation de : position:fixed.
Lire les commentaires

Ceci est un test


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 :


 


[code=html]<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>[/code]


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".


 



 



réduireNews
réduireTutoriel lié
  • Centrer un div : position:fixed
    Utilisation de : position:fixed.
  • Pourquoi les chats ronronnent ?
    Les ronrons des chatons
  • GoogleCrashHandler.exe Supprimer
    Le petit fichier de Google
  • Les meilleurs joueurs de Fifa 14
    Voici une liste des meilleurs joueurs de Fifa 14
  • Dans la même catégorie : css-et-design

    Passer l'activation de Windows 7 temporairement avec invite de commande

    Faire tourner un div d'un certain angle en css
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 8
    Note: 8 sur 10

    Donnez votre note à ce tuto sur 10 :

    Comment éviter les longs mots de détruire le désign ?

    Faire tourner un div d'un certain angle en css

    Liste des commentaires pour Centrer un div : position:fixed [-A-]


    Il y a 5 années, 4 mois
    Super, je cherchais ce code en vain ! Génial merci !

    Par contre, ton site est casse-c*****es avec sa tonne de pub, j'ai galéré 10 minutes avant de pouvoir bien lire tes explications...
    Il y a 7 années
    Bonjour,

    Je sais que cette news date un peu mais je n'arrive pas à centrer ma div (qui est en position:fixed) sur mon image.

    Le margin:auto ne semble pas fonctionner avec le position, et si je décale la div avec left ou margin-left, la position centrée n'est pas maintenue lorsque j'agrandis ou rétrécis la résolution de la page...

    Merci :)
    Il y a 7 années, 7 mois
    Merci ;-)
    Il y a 8 années, 1 mois
    ne marche pas sous IE6... again
    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).