[XHTML+CSS] centrer un tableau verticalement sur ma page ?

centrer un tableau verticalement sur ma page ? [XHTML+CSS] - HTML/CSS - Programmation

Marsh Posté le 21-06-2002 à 22:17:44    

salut,
antp, pas la peine de me dire de faire une recherche !!! j'ai déjà cherché ! Sur google aussi !
Je voudrais savoir comment, en XHTML + CSS centrer mon tableau sur la page, mais pas horizontalement (ça c'est pour les petits joueurs :D ) mais VERTICALEMENT !
avant, je mettais  
<table height="100%"> puis un valign="middle" sur la cellule du milieu, mais c'est pas compatible XTHML !


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 21-06-2002 à 22:17:44   

Reply

Marsh Posté le 21-06-2002 à 22:21:57    

margin-top: auto; margin-bottom: auto;

Reply

Marsh Posté le 21-06-2002 à 22:25:14    

gizmo a écrit a écrit :

margin-top: auto; margin-bottom: auto;  




arf, non, c'est dans le même esprit que margin-left:auto et margin-right:auto, j'ai essayé au tout début...


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 21-06-2002 à 22:43:58    

pas compatible... le vaildateur me le dit pas alors... :fuck:


---------------
What butter and whiskey won't cure, there is no cure for.
Reply

Marsh Posté le 22-06-2002 à 10:36:42    

Dis, tu veux pas utiliser un DIV plutôt qu'un tableau ? Parce qu'un DIV ça peut occuper 100% de la hauteur sans problème et ça se centre dans les 2 dimensions sans difficulté.


Message édité par gm_superstar le 22-06-2002 à 10:37:09
Reply

Marsh Posté le 22-06-2002 à 10:39:19    

gm_superstar a écrit a écrit :

Dis, tu veux pas utiliser un DIV plutôt qu'un tableau ? Parce qu'un DIV ça peut occuper 100% de la hauteur sans problème et ça se centre dans les 2 dimensions sans difficulté.  




j'ai testé, mais ça marche pas :(, j'ai mis <div style=\"heigh:100%;width:100%\">, je retente juste pour vérifier


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 10:44:15    

je confirme, ça marche pas


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:04:30    

Oui je viens de vérifier aussi et en fait ça ne marche pas avec IE. Avec Mozilla aucun problème, mais IE ne veut pas que le <div> occupe toute la hauteur verticalement :/
 
Donc là tu as deux solutions : soit tu donne une hauteur fixe à ton div (height: 400px) soit tu fais une croix sur ta validation... Désolé j'ai pas mieux à te proposer pour l'instant :(

Reply

Marsh Posté le 22-06-2002 à 11:07:31    

a ben c marrant, moi ça chie avc mozilla, pas avec ie6
enfin, sinon, j'ai utilisé une ruse, qui me permet de passer la validation et de pas avoir mon table collé sur le haut de la page : je met un espace de 150px en haut... sous IE, ça décalle un peu vers le bas par rapport au middle, sous Mozilla, c'est pas complètement collé en haut !


Message édité par z0rglub le 22-06-2002 à 11:08:59

---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:17:01    

Est-ce que tu as un doctype de déini pour ton document ?
 
Parce que si on a un DOCTYPE,

div {
    border: 2px solid #666666;
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}


Ca ne marche pas avec IE (le DIV ne fait pas 90% de la hauteur)
 
Par contre, si on a pas de DOCTYPE, ça marche pour les 2 navigateurs.


Message édité par gm_superstar le 22-06-2002 à 11:18:52
Reply

Marsh Posté le 22-06-2002 à 11:17:01   

Reply

Marsh Posté le 22-06-2002 à 11:19:05    

ah non, j'ai pas défini la balise div dans ma feuille de style. je vois pas où ça déconne


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:20:42    

Balance le code

Reply

Marsh Posté le 22-06-2002 à 11:24:04    

Code :
  1. <div style=\"width:100%;height:100%\">
  2.  <table width="100%" style="height:90%;">
  3.   <tr>
  4.    <td align="center" valign="middle">


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:24:44    

et puis à l'intérieur, je mets des tables, des div... il faut juste que ce soit centré middle


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:25:59    

moi je fais en gros

Code :
  1. <body style="height:100%">
  2. <table style="height:100%"> [..] </table>
  3. </body>


 
le validateur xhtml me dis rien, le css non plus alors je prends ca comme valide...


---------------
What butter and whiskey won't cure, there is no cure for.
Reply

Marsh Posté le 22-06-2002 à 11:27:55    

deathsharp a écrit a écrit :

le validateur xhtml me dis rien, le css non plus alors je prends ca comme valide...  




oui, mais ça marche sous IE, pas sous mozilla si je ne me trompe pas


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:29:35    

ca marche sous ie que si tu met la hauteur de body a 100%
je parle bien si tu met tjrs

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">


sans le mettre le height de table a 100% marche tjrs.


Message édité par deathsharp le 22-06-2002 à 11:29:43

---------------
What butter and whiskey won't cure, there is no cure for.
Reply

Marsh Posté le 22-06-2002 à 11:32:55    

z0rglub a écrit a écrit :

Code :
  1. <div style=\"width:100%;height:100%\">
  2.  <table width="100%" style="height:90%;">
  3.   <tr>
  4.    <td align="center" valign="middle">





Ah oui OK, mais ça c'est normal que ça marche pas en HTML strict ou en XHTML, un tableau NE PEUT PAS occuper une hauteur relative à la hauteur de son conteneur.
 
Quand je disais d'utiliser des DIV, c'était pour remplacer ton layout fait à base de TABLE, pas pour mettre ton TABLE dans un DIV.


Message édité par gm_superstar le 22-06-2002 à 11:37:02
Reply

Marsh Posté le 22-06-2002 à 11:34:52    

ah d'accord, mais comment tu fais pour centrer verticalement (ie, comme td valign=middle) le contenu d'un div ?


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:36:35    

Effectivement avec un height: 100% pour le BODY ça marche toujours DOCTYPE ou pas DOCTYPE avec IE. Mais normalement ce n'est pas nécéssaire... m'enfin tant que ça marche et que ça reste valide :)

Reply

Marsh Posté le 22-06-2002 à 11:38:43    

sans DOCTYPE ya meme pas besoin de height 100% pour le body
et avec DOCTYPE, le validateur xhtml et css disent rien et marque "Congratulations, this document validates as XHTML 1.0 Strict!" pour moi c'est que c'est bon :D


---------------
What butter and whiskey won't cure, there is no cure for.
Reply

Marsh Posté le 22-06-2002 à 11:40:53    

j'ai l'impression que je comprend pas bien, pour vous, c'est quoi DOCTYPE ?


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 11:47:38    

C'est ce que tu dois mettre normalement au début de chaque document HTML et qui dit au navigateur selon quelle norme il doit se conformer pour interprétrer ton document.
 
Par exemple si tu fais du XHTML 1.1, tu mets au début :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
...


 
S'il n'y a pas de DOCTYPE, IE et Mozilla changent de mode d'interprétation et se mettent en mode "classique", beaucoup plus souple.

Reply

Marsh Posté le 22-06-2002 à 11:50:49    

ok, on est d'accord, je croyais qu'on s'embrouillait avec les feuilles de style


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 12:33:26    

z0rglub a écrit a écrit :

 
arf, non, c'est dans le même esprit que margin-left:auto et margin-right:auto, j'ai essayé au tout début...  




tu as mis une valeur pour top et bottom? (style 1px) parce que sinon, c'est vrai que ca marche pas. Mais comme ca, ca centre le tableau verticalement.

Reply

Marsh Posté le 22-06-2002 à 12:42:04    

Code :
  1. <body>
  2.  <div style=\"top:1px;bottom:1px;margin:auto;text-align:center;height:100%;\">


et ça marche pas :(


Message édité par z0rglub le 22-06-2002 à 12:42:24

---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 12:51:34    

c'est quoi ces \ devant tes "?

Reply

Marsh Posté le 22-06-2002 à 12:55:02    

gizmo a écrit a écrit :

c'est quoi ces \ devant tes "?  




PHP...


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 22-06-2002 à 13:44:44    

je veux bien que ce soit du php, mais alors pourquoi dans un exemple plus haut, les \ n'apparaissent-ils pas partout?

Reply

Marsh Posté le 22-06-2002 à 13:48:16    

parce que j'ai fait un petit montage... tout l'HTML n'est pas généré par le PHP


---------------
Ma galerie photo créée avec Piwigo et hébergée sur Piwigo.com
Reply

Marsh Posté le 30-11-2005 à 02:36:00    

Bonjour,
 
Je me permets de faire remonter ce vieux topic car il est toujours d'actualité pour moi qui utilise une table pour mon interface (je ne vois pas encore comment faire la même chose avec des div à la place).
 
En attendant de trouver une bonne solution, j'utilise la solution de mettre à 95% l'attribut height du body dans le CSS mais ça ne marche que sous IE, pas sous FF. :/
Et j'ai mis 95% parce qu'avec 100% ou presque, ça rajoute un scroller. :/
 
Note : ça faisait 24h que je m'arrachais les cheveux dessus et je n'ai découvert que ce soir, en faisant des tonnes de tests, que c'était le fait que mon doctype soit du XHTML 1.1 qui posait problème (comme un con, je faisais mes test avec un vieux truc en HTML 4.01 Transitional, n'imaginant pas une seconde que ça pouvait venir de là). :sweat: Une fois que j'ai découvert ça, ça m'a permis de trouver ce topic. :)
 
PS : Pour l'instant, j'en suis là : http://voyagegrece.free.fr/
Le XHTML 1.1 est valide et le CSS aussi (à part des bricoles pour changer la couleur de la scrollbar sous IE)
 
PS2 : à l'origine, j'aurais aimé que la table s'adapte aux dimensions de la fenêtre en hauteur tout comme j'arrive à le faire en largeur mais je n'ai pas réussi alors j'ai fixé la hauteur.
 
 
EDIT : ah si, je crois que je vois comment faire avec des DIV mais là j'ai la flemme et j'ai sommeil. Je verrai demain.

Message cité 1 fois
Message édité par xman le 30-11-2005 à 03:53:49
Reply

Marsh Posté le 30-11-2005 à 16:45:49    

La solution du body height à 100% (enfin... 95% !!!) était une bonne piste. Mais pour que ça marche sur tous les navigateurs, il faut en plus mettre la html height à 100% (vraiment 100% cette fois). Ouf !
 
C'est-à-dire, mettre les trucs suivants dans le CSS :
html {height:100%}
body {height:95%}
 
PS : je déteste cette bidouille de mettre 95% sans être sûr que je tomberai pas un jour sur un navigateur qui nécessite 94% ou moins mais bon, c'est la solution la plus simple et lamoins pire que j'ai trouvée jusqu'à présent. :sweat:


Message édité par xman le 30-11-2005 à 16:49:25
Reply

Marsh Posté le 30-11-2005 à 20:27:15    

xman a écrit :

Le XHTML 1.1 est valide


Il est peut-être valide d'un point de vue syntaxique, mais par contre t'as loupé un truc : un document XHTML 1.1 s'envoi avec le type MIME application/xhtml+xml, ce que tu n'as pas fait. Donc tout ce que t'envois au navigateur, c'est un document HTML tout ce qu'il y a de plus normal, mais avec des centaines d'erreurs : pas de déclaration XML, des balises avec des slashs qui traînent (genre <img /> ), etc, etc.
 
Sauf qu'en application/xhtml+xml, ça ne fonctionne pas avec IE.
 
Le seul moyen si tu veux faire de l'XHTML, c'est d'utiliser la version 1.0, qui authorise l'envoi en text/html, à condition que certaines règles de compatibilités soient respectées.
 
 
C'est vraiment dommage qu'il n'y ait pas plus d'information sur l'XHTML 1.1, parce que beaucoup trop de monde l'utilise sans savoir réellement ce que c'est...

Reply

Marsh Posté le 30-11-2005 à 20:33:58    

J'avoue ne pas être encore assez calé sur la syntaxe (et la signification) des en-têtes pour comprendre. :??:
 
Il faudrait donc que je mette ça en tête de mon fichier au lieu de ce qu'il y a actuellement?

Code :
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 
Je pensais naïvement que XHTML 1.1 était juste une dernière mise à jour d'XHTML 1.0 Strict.


Message édité par xman le 30-11-2005 à 20:40:50
Reply

Marsh Posté le 30-11-2005 à 22:53:38    

Nope, pas une simple mise à jour. C'est tout un bordel basé sur la modularisation de l'XHTML 1.0, et qui n'est plus rétro-compatible avec l'HTML...

Reply

Marsh Posté le 30-11-2005 à 23:02:44    

Ils auraient pu l'appeler XHTML 2.0 si ça change tant que ça. :/
Dans le W3Consortium, il doit y avoir le cousin du mec de chez Sun qui a décidé que Java 1.2 serait Java2 et ils doivent se faire la guerre.
De vieilles histoires de famille toussa... :D
 
Bon bref, merci. ;)

Reply

Marsh Posté le 10-01-2006 à 10:17:36    

Si j'ai bien compris le problème initial c'est de CENTRER un TABLEAU horizontalement et VERTICALEMENT dans uen page HTML ?...
 
Personnellement, j'aui une méthode un peu con-con, mais qui a le mérite de marcher avec IE (6.0), et qui doit normalemen, marcher avec les autres butineurs...
 
Partant du principe que tout élément (image, texte... ou tableau) a une tendance naturelle à se centrer horizontalement et verticalement dans n'iporte quelle cellule d'un tableau...
 
... j'insère simplement le tableau que je veux centrer tous azimuths dans un autre tableau de 1 ligne x 1 colonne... en HTML de base ça donne :
 
<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
  <tr><td>
    <table>
      ET LA C'EST MON VRAI TABLEAU? CELUI QUE JE VEUX CENTRER DANS TOUS LES SENS....
    </table>
  </td></tr>
</table>
 
Je sais, c'est une méthode bête et méchante... mais elle marche !
:-)

Reply

Marsh Posté le 10-01-2006 à 11:40:10    

tu sais le tableau c'est pas fait pour de la mise en page ?

Reply

Marsh Posté le 10-01-2006 à 12:09:26    

jfp, ça marche en HTML mais pas en XHTML. C'est là tout le fond du problème.

Reply

Marsh Posté le 10-01-2006 à 13:33:49    

gatsu35 a écrit :

tu sais le tableau c'est pas fait pour de la mise en page ?


 
Je sais bien, mais il faut être pragmatique. J'avais besoin centrer un tableau verticalement.  
Comme je ne connais rien au XHTML, l'essentiel de ce fil de discussion m'est passé largement au dessus de la tête !  :heink:  
(j'ai pas réussi à atteindre le fond du problème ! :cry: ).  
Donc j'ai pensé à cette astuce....
Alors c'est pas fait pour, c'est vrai, mais bon, ça marche... Qui n'a jamais utilisé un couteau à la place d'un tournevis ?... ;)  
Et si ça peut servir à quelqu'un...

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed