centrer un tableau verticalement sur ma page ? [XHTML+CSS] - HTML/CSS - Programmation
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...
Marsh Posté le 21-06-2002 à 22:43:58
pas compatible... le vaildateur me le dit pas alors...
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é.
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
Marsh Posté le 22-06-2002 à 10:44:15
je confirme, ça marche pas
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
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 !
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 { |
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.
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
Marsh Posté le 22-06-2002 à 11:24:04
Code :
|
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
Marsh Posté le 22-06-2002 à 11:25:59
moi je fais en gros
Code :
|
le validateur xhtml me dis rien, le css non plus alors je prends ca comme valide...
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
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 :
|
sans le mettre le height de table a 100% marche tjrs.
Marsh Posté le 22-06-2002 à 11:32:55
z0rglub a écrit a écrit :
|
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.
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 ?
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
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
Marsh Posté le 22-06-2002 à 11:40:53
j'ai l'impression que je comprend pas bien, pour vous, c'est quoi DOCTYPE ?
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" |
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.
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
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.
Marsh Posté le 22-06-2002 à 12:42:04
Code :
|
et ça marche pas
Marsh Posté le 22-06-2002 à 12:55:02
gizmo a écrit a écrit : c'est quoi ces \ devant tes "? |
PHP...
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?
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
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à). 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.
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.
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...
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 :
|
Je pensais naïvement que XHTML 1.1 était juste une dernière mise à jour d'XHTML 1.0 Strict.
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...
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...
Bon bref, merci.
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 !
:-)
Marsh Posté le 10-01-2006 à 11:40:10
ReplyMarsh 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.
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 !
(j'ai pas réussi à atteindre le fond du problème ! ).
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...
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 ) 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