IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer une div avec ou sans scroll


Sujet :

Défilement en CSS

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut Centrer une div avec ou sans scroll
    Bonjour

    J'ai une div 'container' dont le contenu est zappé dynamiquement par un menu, c'est à dire que plutôt que de recharger la page je contrôle en javascript le display (block/none) des divs 'content0'/'content1' imbriquées dans la div 'container'.

    Cette div est bêtement centrée :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #container {
    	margin: 0 auto;
    	width: 800px;
    }
    Le problème est juste que 'content0' déborde en hauteur alors que généralement 'content1' ne déborde pas, et quand la barre de défilement est ajoutée, l'ensemble de la page est décalé vers la gauche ...

    Je suppose qu'il y a un moyen de régler ça avec les css sans ajouter du js ?

    J'ai essayé en position absolute mais c'est la même chose
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #container {
    	left: 50%;
    	margin-left: -400px;
    	width: 800px;
    	position: absolute;
    }
    Et en fixed le scroll n'est pas affiché ... Comment feriez vous ça ?

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Non, il n'y a pas de moyen en CSS.
    Les techniques de centrage horizontal permettent de centrer par rapport à la partie de la page affichant le contenu et la barre de scroll n'en fait pas partie.

    Quant à vouloir régler ça en JavaScript, bon courage, la taille de la barre de scroll n'étant pas du tout uniformisée en fonction des navigateurs !

    La question la plus importante, c'est surtout : est-ce si gênant que ça ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    Zut ... C'est vrai que faire de la détection de navigateur pour régler la taille du décalage .. ça devient un peu lourdingue.

    La question la plus importante, c'est surtout : est-ce si gênant que ça ?
    Aujourd'hui ça me gène un peu, mais peut-être est ce un excès de chipotage ... je verrai demain.

    Merci bien !

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    une solution :
    De sorte que la barre verticale de scroll soit toujours affichée.

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    Si jamais ça intéresse quelqu'un j'ai trouvé une solution simple en js, il suffit d'utiliser window.innerWidth, et de contrôler le resize. Ici la div 'container' contient toute la page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function centerdiv () {
    	document.getElementById('container').style.left = (window.innerWidth - 800) / 2 + 'px';
    }
    window.addEventListener( 'resize', centerdiv, false );
     
    function zap(content) {
    	...
    	centerdiv();
    }
    zap(1);
    Centrage css supprimé, juste la width correspondante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #container {
    	width: 800px;
    	position: absolute;
    }
    Ça a l'air de marcher (dans 5 navigateurs dernières versions, et pas IE8 apparemment) et c'est quand même mieux.

    Ou effectivement toujours afficher la barre de défilement, merci.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 220
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 220
    Par défaut
    Bonjour,
    Ou effectivement toujours afficher la barre de défilement, merci.
    C'est à mon sens la solution la plus pérenne et la moins surprenante, j'entends par là quelle ne te péteras pas à la figure le jour où un internaute aura décidé de grossir les dimensions de son environnement, paramètres avancés-> barre de défilement ou autres d'ailleurs.

  7. #7
    Membre chevronné
    Profil pro
    Chef Gérant
    Inscrit en
    Octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2005
    Messages : 230
    Par défaut
    il ya aussi le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    html {min-height:100.01%;}

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    elle ne te péteras pas à la figure le jour où un internaute aura décidé de grossir les dimensions de son environnement, paramètres avancés-> barre de défilement ou autres d'ailleurs.
    Je ne vois pas ce que tu entends par là. Si c'est "grossir les dimensions de son environnement" avec Ctrl-wheel alors c'est traité par l'événement resize, window.innerWidth renvoie la largeur zoomée hors barre de défilement, alors ça reste centré (j'ai aussi testé ça avec les 5 navigateurs). Quant aux paramètres avancés il y a peut-être des trucs que je rate, je n'ai pas trouvé ...

    html {min-height:100.01%;}
    Je ne vois pas l'effet de ce css, qu'est ce que c'est censé faire ?

  9. #9
    Membre chevronné
    Profil pro
    Chef Gérant
    Inscrit en
    Octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2005
    Messages : 230
    Par défaut
    un min-height superieur a 100% sur html est supposé forcé l'apparition d'une barre de defilement, elle sera donc toujours présente même si la page est vide

    il y a aussi un padding-right:1em; sur html , qui décentre d'un em le centrage et qui en principe , équivalent a la largeur de la barre de scroll (14/16px generalement si font-size non redefinie) ne modifie visuellement pas l'emplacent d'un element centré si une barre apparait. (body fait 1 EM de moins en largeur sur la droite que HTML/la fenêtre et ne perçoit pas l'apparition ou non de la barre de scroll verticale. )

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 220
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 220
    Par défaut
    Citation Envoyé par krunch
    si tu veux tester, il faut cliquer sur les boutons en haut ...
    sur FireFox je ne constate pas un centrage dans la page hors barre de scroll, mais je pense que ton positionnement en absolu, sur le conteneur, y est pour quelque chose


    Citation Envoyé par CCyrillus
    il ya aussi le
    html {min-height:100.01%;}
    il me semble quand même préférable de passer dans ce cas par un overflow:scroll.


    Citation Envoyé par CCyrillus
    équivalent a la largeur de la barre de scroll (14/16px generalement si font-size non redefinie)
    pas exactement, tu peux toujours paramétrer, hors navigateur, un certain nombre d’éléments en fonction de tes besoin/préférence, mais tous les navigateurs ne réagissent pas de la même façon.

  11. #11
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    sur FireFox je ne constate pas un centrage dans la page hors barre de scroll, mais je pense que ton positionnement en absolu, sur le conteneur, y est pour quelque chose
    C'est vrai, elle est centrée sans la barre, donc window.innerWidth doit renvoyer la largeur y compris le scroll en fait ... mais au moins ça bouge pas quand elle apparaît, c'était le but (à moins que tu parles d'autre chose dû aux réglages, sinon dans FF j'ai bien une page centrée sans le scroll).
    Et d'autre part je suis bien obligé de mettre la div en absolute pour le positionnement en js ? Par défaut ça ne marche pas, et en fixed la barre n'apparaît plus.

    il y a aussi un padding-right:1em; sur html , qui décentre d'un em le centrage et qui en principe , équivalent a la largeur de la barre de scroll (14/16px generalement si font-size non redefinie) ne modifie visuellement pas l'emplacent d'un element centré si une barre apparait. (body fait 1 EM de moins en largeur sur la droite que HTML/la fenêtre et ne perçoit pas l'apparition ou non de la barre de scroll verticale. )
    Dans l'idée ça paraît valable (au pire en mettant plutôt 20px histoire d'être sûr) mais j'arrive pas à le faire, j'ai toujours le décalage, je sais pas pourquoi ...

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 220
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 220
    Par défaut
    je suis bien obligé de mettre la div en absolute pour le positionnement en js ?
    certes pour l'utilisation de javascript, mais un simple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    body{
      overflow:scroll;
    }
    #container {
      margin: 0 auto;
      width: 800px;
    }
    règle le problème de façon efficace et sans javascript.

    ...au pire en mettant plutôt 20px histoire d'être sûr...
    tu es sûr d'être sûr de rien

  13. #13
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    Bon, c'est vrai que les barres vides ne gênent pas plus que ça. Apparemment on peut aussi éviter la barre horizontale en écrivant plutôt ça :
    Je reste là dessus (à moins que le -y pose encore des problèmes sans fin ?), on va dire que ta solution est la plus fiable.

    Merci pour vos réponses.

  14. #14
    Invité
    Invité(e)
    Par défaut
    Bravo !

    Ce n'est pas comme si j'avais donné cette solution dès le message #4 !...

  15. #15
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    155
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 155
    Par défaut
    Oui alors il semblerait que tu ais en effet écrit "overflow-y" dès le message #4 ...

    A l'époque j'étais aveuglé par une vision absolutiste, j'avais du mal à accepter une solution qui me paraissait imparfaite et pas tout à fait immaculée ... j'étais jeune

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [script.aculo.us] Drag and drop dans une div avec un scroll horizontal
    Par ridan dans le forum Bibliothèques & Frameworks
    Réponses: 7
    Dernier message: 21/07/2009, 19h14
  2. Centrer une page avec des DIV imbriqués
    Par emstar dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 25/04/2006, 18h42
  3. Centrer une page avec des frames
    Par Nicos77 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 10/11/2005, 14h07
  4. Centrer une page avec des frames
    Par Nicos77 dans le forum Langage
    Réponses: 11
    Dernier message: 09/11/2005, 16h52
  5. Centrer une <div> en position fixe sous IE
    Par Jorus dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/09/2004, 15h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo