Hello !
 
Mon site est dans un rectangle ki fait environ 750 par 400, je le centre au milieu de ma page avec la balise <div align="center">.Mais je voudrais le centrer sur la hauteur, je suppose kil fo faire ca en javascript pour ke ca ce recentre en fonction du navigateur ?
Quelqu'un connait la soluce?
 
Merci
 
Benou_Z

regarde dans la faq html, il y a chapitre qui parle de ton problème

merci !

En pratique : http://www.alsacreations.com/articles/centrer/

Merci les gars, jai trouvé que je pouvais centrer verticalement en utilisant la balise height=100% dans la valeur de mon tableau general.
Mais ca ne fonctionne pas sous mozilla!que sur IE
Autre astuce?

 
html,body --> 100% aussi, sinon ca marche pas.  

cest a dire? 100% a quel endroit ds le Body?

 
Non, dans les CSS.

ok mets moi jai pas mis de css

jai mis direct ds un tableau, mais ya pas un javascript qui resize en fonction du navigateur style ;
screen.height/2- la valeur de ton cadre ?
pour centrer ds ie ,mozilla et netscape?
a moins quer le css soit simple a faire?
Merci

Il est clair que les CSS sont beaucoup plus simple que JavaScript. Va falloir t'y mettre
 
Lis donc la solution donnée par sibelius (marges négatives)

 
Pourquoi utiliser des marges negatives ? La solution du html,body a 100% regle le probleme et me semble bcp plus propre... Non ?

Voilà qui m'intéresse. Et ça donne quoi en pratique ?

 
 
TEUTEU TEUTEU TEUTEU !!!
 
 
C'est interdit de mettre une hauteur en % !!! C'est pas W3C valid, ça !

 
Avec les CSS, si, c'est permis...

Hermes : peux-tu m'expliquer la technique de centrage vertical avec html/body à 100% ?

 
Ben apres avoir teste, je suis desole en fait, parce que uniquement avec des divs, ce n'est pas possible. Il faut faire :
 

 
Donc utiliser une table, mais uniquement avec des CSS et SANS utiliser de position absolute (ce qui est nouveau, car auparavant, je pensais qu'il fallait obligatoirement avoir le body en absolute ce qui fait bugger OPERA 6 et 7.)
 
Je trouve cette solution plus propre que les marges negatives, parce qu'en cas de redimensionnement de la fenetre (fenetre plus petite que la surface affichable de l'ecran) les barres de scroll peuvent apparaitre et donc on peut continuer a visualiser l'ensemble du site, tandis qu'avec les marges negatives, une partie du site disparait si on reduit la fenetre en largeur ou en hauteur.
 
Bref, aucun systeme n'est parfait, mais le mien n'est pas bugge lui... Il faudra attendre que les CSS evoluent pour pouvoir se passer completement des tables sur ce cas TRES PARTICULIER.
 
A noter que ma solution passe sur TOUS les navigateurs recents evidemment.

ok, c'est intéressant en effet

 
Oui, la solution des marges negatives est plus propre semantiquement car elle se passe des tables, mais elle reste buggée...  
 
A part ma soluce, je n'en connais aucune NON BUGGEE qui respecte la norme XHTML 1.1
 

Donc à nous de choisir entre la sémantique et le bug  

 
Exact.    
 
Sur mon dernier site, j'ai utilisé les marges negatives, mais actuellement, j'en reviens aux tableaux pour certaines choses comme le centrage vertical, car il ne faut pas non plus utiliser des ruses qui contrarient le fonctionnement des navigateurs. Il faut respecter les nomes, ça c'est sur, mais egalement les navigateurs, car sinon, on fait des trucs batards qui obligeront a faire presque du sur-mesure pour tel ou tel navigateur.
 
Donc, des que c'est possible, j'utilise des divs, mais si ca bugge et qu'il n'existe aucune solution, je n'hésite pas à utilise une table.

 
Et voui, pour moi, il n'y a techniquement aucune solution de centrage vertical ! J'ai abandonné ça depuis longtemps...

 
techniquement, ma solution fonctionne sans bug. Elle est parfaitement viable. C'est sémantiquement et philosophiquement qu'elle pose probleme.

 
 
haaaaa, mais, attention avec la sémantique, sujet brûlant pour le W3C !

Mouais bof. Si tu as un cadre plus grand que la surface affichable du navigateur c'est que ton site à un problème...
Déjà n'importe quel cadre de dimension fixe devrait rentrer en 800x600 donc éventuellement ça gênera ceux qui ont une résolution inférieure mais 1. la gêne n'est pas importante 2. ça fait pas beaucoup de monde.
Bref ça ne justifie pas, à mon avis, de passer par cette affreuse astuce qui consiste à utiliser un tableau.

 
Non, je ne suis pas d'accord. Le fait d'empêcher le scroll sur un site n'est pas plus propre que ma solution. L'internaute doit de toutes manières pouvoir choisir sa résolution. C'est une rêgle indéfectible. Le système des marges négatives est batards, et une marge négative ne veut rien dire. Une marge qui fait moins de 0, c'est un peu curieux hein...
Maintenant, je trouve qu'utiliser une table est vraiment pas terrible, c'est clair, mais ça a le mérite de ne pas contrarier les navigateurs.

Une marge qui fait moins de 0, ça marche très bien, c'est même autorisé par notre ami à tous le W3c :
 
http://www.w3.org/TR/REC-CSS2/synd [...] def-length
 
Sinon, c'est pas bien d'utiliser des tables pour la présentation, vu que tu te retrouve avec des éléments purement présentationnels dans ta page html. Les tables ne doivent êtres utilisées que pour afficher des tableau, donc des données triées selon des lignes et des colonnes (dans l'genre, vous voyez ?).
 
Sinon, empêchez le scroll, c'est imposer quelque chose à l'utilisateur ! (car y'en a qui voudront toujours scroller, et ça fera chier). Et une des directives du WCAG, c'est justement qu'on impose pas des choses à l'utilisateur !

bon, on va essayer de mettre tout le monde d'accord.
Le véritable centrage vertical devrait s'opérer comme suit:
des marges en haut et en bas mise à auto (logique), et, pour que cela prenne effet des valeurs à top et bottom de 1px (le minimum), le tout en positionnement absolu pour que ces valeurs soient relatives à l'écran.
 
Cette solution fonctionne à merveille sous mozilla, même en rapetissant la fenêtre, tout reste accessible. Sous opéra, cela fonctionne également sans problème.
 
LE problème reste IE qui ne suit pas les recommendations et qui ne considère pas qu'en absolu les calcul des marges verticales se font en fonction du parent quand il s'agit du body...

 
Et sachant que IE représente plus de 90% des navigateurs utilisés...

je sais, mais ils étaient en train de se disputer de savoir quelle solution était la meilleure du point de vue réaction. Or dans ce cas, le surfeur n'est jamais freiné.

Raison de plus pour faire en sorte que le cadre entre dans les résolutions standards, ou mieux, qu'il s'adapte aux dimensions de l'écran.
 
Je l'ai dit, le problème est en amont.

 
Ce n'est pas parce que cela fonctionne et que c'est autorisé, que c'est propre. Ma solution fonctionne et est validée par le validateur, et pourtant d'un point de vue syntaxique, elle n'est pas propre.
 

 
Parfaitement d'accord avec ça.
 

 
ET oui, et c'est justement pour cela que ma solution reste la moins pire, parce que dans le cas d'une page dynamique pouvant s'allonger, le scroll reste possible, ce qui n'est pas possible avec des marges négative.

 
Entièrement d'accord.

 
Oui, pour cela on est d'accord.
 
La difficulté est de choisir une solution qui fonctionne dans tous les cas, surtout avec une page suceptible d'évoluer et de gandir en hauteur dynamiquement (ex : une page de news en php). Quand cette page est tres courte, elle est centrée et quand elle est plus longue, le scroll doit pouvoir apparaitre.
Evidemment, on peut à juste titre me rétorquer qu'il n'est pas nécessaire de centrer verticalement qqc dans la page... Oui, mais cela constitue alors une limitation par rapport à ce que l'on pouvait faire uniquement avec du HTML pourri. Hors, ne l'oublions pas, les normes ne doivent PAS empêcher de réaliser telle ou telle chose.

De même, je mets au défit quiconque de réaliser un site qui ressemble à ça :
 

 
... En utilisant uniquement un div scrollable et des % comme cela était possible avec des frames.  
Ma page fonctionne sans problème avec IE 5+ et Opera 7+, mais pas moyen avec Mozilla.
Je précise que la fenêtre doit pouvoir être resizer comme bon nous semble.  
Inutile de dire qu'avec des divs, ce genre de plan de site est impossible à faire à l'heure actuelle. Et pour moi encore une fois, je ne pense pas que les normes soient faites pour limiter nos possibilités, mais au contraire pour les augmenter, et améliorer l'accessibilité des sites.
 
PS : Si qqu trouve une possibilité pour rendre cette page fonctionnelle avec Moz, je lui envoie un carambar par courrier recommandé.  

Merci pour toutes les solutions !
grand debat qui a été lancé ici !
Merci a tous de mavoir aidé !
 
Ben

HLM>> ta page elle passe pas sous IE 6, la barre jaune n'apparait pas.

Par contre, cela ne doit sans doute pas être très dur en jouant avec des positions absolues. Je regarderai ça tantôt.

 
J'ai IE6, et ça passe parfaitement chez moi      
 
Quelle version exactement de IE6 ??
 
la mienne : 6.0.2800.1106
 
Sinon, bonne chance pour le défit.    

 
Ca me donne envie d'essayer, chouette, un carambar   !