28173 sujets

CSS et mise en forme, CSS3

Centrage de tableau sous IE

Bonjour,

Je cherche à centrer un tableau horizontalement.

Avec margin: auto, ça marche sous FF mais pas sous IE.

J'ai eu beau chercher dans la FAQ et ailleurs, je n'ai rien trouvé.

Merci d'avance,

Tonio
Ben non, ça ne marche pas. Ce tuto ne s'applique pas vraiment à mon cas, semble-t-il.

Je veux centrer un tableau <table>

j'ai écrit :

table.decor {
	border: 2px outset #0000FF;
	background-color: ccccff;
	margin-left: auto;
	margin-right: auto;

}


Je ne peux pas spécifier de largeur, tous mes tableaux n'ayant pas la même largeur.

Ca marche sous FF comme ça, mais pas sous IE7
... Hum ... Smiley rolleyes
Question bête : es-tu sûr d'avoir nécessairement besoin d'un tableau ? Smiley murf

Par exemple ... Dans le cas, où tu l'utiliserais juste pour de la mise en page ...
Bouh, pas bien ! Smiley lol
Salut,
Cette méthode ne fonctionnera pas si le document n'est pas interprété en mode standard par IE 6 et 7. Pour cela il faut vérifier qu'il y a un DOCTYPE, qu'il est correct et complet (pas la version sans URL qu'on voit souvent) et que rien ne figure avant celui (en dehors éventuellement de caractères d'espacement).

Si tu souhaites plus d'informations :
– Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
– Le DOCTYPE qu’il vous faut
Modifié par Alan (29 Jan 2007 - 12:56)
voilà le DOCTYPE que j'utilise :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Si j'essaye
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Ca me centre en effet le tableau, mais ca met la panique sur tout le reste. Entre autres, je perds la couleur de fond de mon tableau, la taille de police change, et mon conteneur global qui doit faire toute la hauteur de la fenêtre prend la dimension du contenu. Bref, c'est pas glop !
Bonjour,
le doctype 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(sans URI)
fait basculer les navigateurs recents en mode quirks (compatibilité descendante)
Voir http://css.alsacreations.com/Tutoriels-et-articles-divers/A-propos-du-Modele-de-boite-Microsoft-ou-quirks
pour des explications. Ceclui-ci n'est pas conseillé...

En mode quirks, la taille des polices imbriquées dans un tableau
est en générale plus grande puisqu'elle hérite alors de la taille
par default du navigateur (16px en général) et non de celle
défini dans un bloc ancêtre.
Modifié par Hermann (30 Jan 2007 - 14:31)
Alors dans ce cas, j'ai un gros pb, il faut que je revoie toute la structure CSS des sites que j'ai réalisés ! Exemple sur celui que j'ai en chantier à ce jour.

Page standard avec DOCTYPE sans URI

Page standard avec DOCTYPE avec URI (voir les menus !!!)

Tableau avec DOCTYPE sans URI

Tableau avec DOCTYPE avecURI (le tableau est centré, mais a perdu sa couleur de fond, et l'ascenseur fait défiler toute la page, menus et en-tête compris)


La structure que j'adopte est :


<div id="global"> 
  <div id="menu"> 
    <? include "Menus.php";?>
  </div>
  <div id="conteneur">  
  <h1 id="titre">mon titre</h1>
  <div id="Contenu"> 
    <? include $Pages[(int)$mapage]; ?>
  </div>
  </div>
</div>


et les CSS sont :

#global {
	position:relative;
	width: 800px;
	height: 100%;
	left:50%;
	margin-left:-400px;
}
#conteneur {
	padding: 0px;
	height: 100%;
	width: auto;
	margin: 0 0 0 170px;
	overflow: hidden;
}
#contenu {
	position: absolute;
	top: 80px;
	bottom: 0px;
	padding: 10px;
	right: 0px;
	overflow: auto;
	width: 100%;
	height: 80%;
} 
html>body #contenu {
	height: auto;
	width: auto;
	left: 250px;
}
#menu {
	overflow: auto;
	overflow-x: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 170px;
	height: 100%;
	padding-top: 150px;
}


Avec ça (DOCTYPE sans URI), l'entête et le menu restent fixes quand le contenu de la page défile. Donc tout est cassé si je rajoute l'URI.

Donc, si quelqu'un peut m'aider à tout remettre d'équerre, ça sera super, car j'ai pas mal galéré pour arriver à cette configuration.

Merci d'avance,

Tonio
Modifié par Tonio (30 Jan 2007 - 21:19)
Bonsoir,

Tonio a écrit :

Donc, si quelqu'un peut m'aider à tout remettre d'équerre, ça sera super, car j'ai pas mal galéré pour arriver à cette configuration.


L'idée serait plutôt de laisser ces pages en l'état. Mais de développer à l'avenir en mode strict, c'est à dire avec une DTD complète.

Ces DTD partielles et leur effet sur le rendu CSS sont justement conçus pour traiter des contenus "anciens".
C'est clair, mais ma demande reste valable, car c'est le même modèle que j'utilise pour tous les sites que je développe !!!
Salut,
N'oublies pas de regarder la FAQ qui réponds à beaucoup de
problèmes même si dans ton cas ce n'était pas forcément évident.

Ton problème vient d'une plus grande permissivité du
mode quiks quant à l'interprétation des propriétés CSS et du code html.
Le mode standard (avec doctype complet) demande un peu plus de rigueur
au niveau du code XHTML et CSS:

Définir un height:100% au niveau du body est suffisant en mode quirks
mais pas dans le mode standard qui exige aussi de déclarer
 html {height:100%}
Voir la FAQ pour des explications

Tu as oublié le "#" devant le code couleur hexadécimal du fond de tableau:

table.decor {
	border: 2px outset #0000FF;
	background-color: #ccccff ;
	margin-left: auto;
	margin-right: auto;
}

Ce n'est pas la peine de le redéclarer au niveau des td je pense mais
à tester.
Un des nouveau avantage du mode standard est que tes marges auto
sont maintenant correctement interprétées.

Attention, l'extension CSS propriétaire microsoft scrollbar ne fonctionne
plus en mode standard de même peut-être pour Overflow-y et x qui sont
aussi propriétaire microsoft même s'ils feront manifestement parti de la
spécification CSS3.
Modifié par Hermann (31 Jan 2007 - 14:38)
Sujet clos
Aller à