Discussion :

[krunch]

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 ?

[Bovino]

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 ?

[krunch]

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 !

[Invité]

Bonjour,
une solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

overflow-y:scroll;

De sorte que la barre verticale de scroll soit toujours affichée.

[krunch]

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.

[NoSmoking]

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.

[CCyrillus]

il ya aussi le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

html {min-height:100.01%;}

[krunch]

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 ?

[CCyrillus]

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

[NoSmoking]

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

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.

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

[krunch]

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

[NoSmoking]

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

[krunch]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

overflow-y:scroll;

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.

[Invité]

Bravo !

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

[krunch]

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