Aller au contenu


[Css] Astuce: Centrage Malgré La Présence Ou Non D'un Ascenseur Vertical


  • Vous ne pouvez pas répondre à ce sujet
4 replies to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 20 959 Messages :
  • Gender:Male

Posté 07 mars 2010 - 11:03

Astuce:

centrage malgré la présence ou non d'un ascenseur vertical





Pour les sites dont les pages sont inégales en hauteur, certaines tenant dans un écran, d'autres non et obligeant à utiliser un ascenseur vertical pour scroller, la question de centrage de la page se pose.

En effet, la largeur de l'ascenseur n'est réservée que par très peu de navigateurs: si bien que quand celui-ci apparait, il réduit la largeur de l'affichage disponible et décale vers la gauche votre page par rapport à sa position sans ascenseur. Elle reste centrée, certes, mais le passage d'une page à l'autre devient un peu disgracieux, avec des décalages à gauche, à droite, suivant la longueur des pages.

Sans_titre.png



Solution:

CODE
html { height: 100%; margin-bottom: 1px; }
html {height: 100%; }
body{ height: 100%; margin-bottom: 1px;}


Effet:

Cela fait apparaitre l'ascenseur même quand il est inutile, et la page ne se décale donc plus en passant d'une page courte à une page longue, ou l'inverse.

Source: http://www.hicksdesign.co.uk/journal/forci...now-even-better

#2 Alex

Alex

    Marsonaute

  • Zimien
  • PipPip
  • 8 Messages :

Posté 12 octobre 2010 - 08:40

Si je comprends bien, ce code css permet d'afficher un ascenseur vertical... sur toute les pages.
Si bien que ... le contenu de la page ne se décale pas, quand on passe d'une page à l'autre.

C'est bon à savoir.
Je pense que je vais l'utiliser souvent ce truc !!

#3 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 20 959 Messages :
  • Gender:Male

Posté 12 octobre 2010 - 09:11

Certains penseront que le faire apparaitre sur toutes les pages est dommage, mais l'oeil finalement ne le perçoit pas tant que ça, alors que les décalages aux changements de pages, c'est ignoble même pour les moins attentifs.

Je ne connais pas d'alternative, mais je suis preneur.

#4 Alex

Alex

    Marsonaute

  • Zimien
  • PipPip
  • 8 Messages :

Posté 20 novembre 2010 - 16:23

je recommande plutot :
html {height: 100%; }
body{ height: 100%; margin-bottom: 1px;}
ça marche à tous les coups ... :roll:

#5 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 20 959 Messages :
  • Gender:Male

Posté 21 novembre 2010 - 09:14

J'édite, merci Alex :) !

(tu as une une mésaventure en mettant les propriétés sur html ?)



0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)