28173 sujets

CSS et mise en forme, CSS3

Centrer un site - probleme au redimensionnement de la fenêtre

bonjour

j'utilise les styles css fournis dans le tuto "Centrer les éléments ou un site web en CSS"
le problême : quand on réduit la fenêtre en hauteur l'ensemble du site ne se bloque pas arrivé en haut mais passe "sous" le navigateur
ça pose problême surtout sur les portables 15" qui ont des barres en plus style yahoo etc...
Une piste?
merci d'avance
Le centrage vertical est difficile en CSS, pour ne pas dire impossible. Cela vient du fait qu'un document web n'a pas de hauteur définie, contrairement à un document print par exemple.

Le positionnement absolu utilisé pour le centrage vertical dans la technique que tu indiques pose effectivement problème dans le cas où la fenêtre ne serait pas capable d'afficher toute la hauteur du site. Pour info, quelle est la hauteur globale utilisée pour ton site ?

Je vois trois solutions :
- éviter de faire des design fixes en hauteur, généralement anti-ergonomiques ;
- ne pas centrer en hauteur ;
- centrer en hauteur, mais limiter la hauteur globale (grand max 450px) pour éviter ou limiter les problèmes avec les petites résolutions.

Sinon, il doit être possible de tester en javascript la hauteur en pixels de body, et de n'appliquer le centrage vertical via positionnement absolu que dans le cas où cette hauteur est suffisamment grande.

Je pense que ça doit être possible. Par contre, je ne connais pas assez Javascript pour proposer quelque chose.
mon site fait 620px de hauteur.

oui j'ai aussi pensé à tester la hauteur via javascript mais j'attendais une réponse définitive sur les css avant de me lancer dans ce merdier Smiley cligne ...

merci pour ton aide
lococo a écrit :
mon site fait 620px de hauteur.


620px de hauteur, c'est trop haut pour plus de la moitié des utilisateurs (enfin je sais pas trop, c'est à la louche), dont :
- les 20-25% des utilisateurs en 800x600 ;
- les utilisateurs en 1024x768 qui ont une barre d'outil supplémentaire ;
- les utilisateurs en 1024x768 qui ont une barre des tâches de taille double (j'en ai vu pas mal, mine de rien) ;
- les utilisateurs en 1024x768 qui ne font pas prendre 100% de la taille disponible à la fenêtre de leur navigateur ;
- ceux qui combinent plusieurs de ces trois derniers critèrs, voire d'autres encore.

Bref, si tu te fiches un peu des utilisateurs en 800x600 tu peux faire un site dans les 550px de hauteur, mais pas tellement plus.
j'ai trouvé :

<SCRIPT language=JavaScript>
<!--
self.focus();self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);
function hauteur_fenetre()
<!-- check la hauteur pour netscape et IE -->
{
 if (window.innerHeight) return window.innerHeight  ;
 else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
 else return 0;
}
hauteur = hauteur_fenetre();
document.writeln('<style type="text/css">');
if(hauteur < 620)
{
 document.writeln("#flashversion{ position:absolute; left:50%; margin-left: -400px; width:800px; height:620px; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; text-align:center; }");
}else{
document.writeln("#flashversion{ position:absolute; left:50%; margin-left: -400px; top:50%; margin-top: -310px; width:800px; height:620px; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; text-align:center; }");
}
document.writeln('</style>');
-->
</script>
autant pour moi....
le commentaire n'est pas bon, plutôt :

/* check la hauteur pour netscape et IE */
Au passage, il est préférable de centrer la page via la technique des marges automatiques, plutôt que via le positionnement absolu. Smiley smile
Sujet clos
Aller à