28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Centrage de tableau

Bonsoir à tous,
j'vous dit tout de suite, je craque Smiley lol
forums, faq, w3c, j'en peux plus Smiley biggol

l'html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Titre</title>
	<link href="lib/ma_css.css" type="text/css" rel="stylesheet" />
</head>
<body>
debut de page
<table class="ma_classe">
<tr>
<td>ELEMENT PAS CENTRE</td>
</tr>
</table>

fin de page
</body>
</html>


la css:

body {
	text-align:center;
	}

.ma_classe {
	text-align:center;
	border: 1px solid;
	}
.ma_classe td{
	width:300px;
	}



Je souhaite (veux) centrer le tableau!

Vous auriez une idée?
Merci à tous Smiley smile
Modifié par wolk (27 Oct 2006 - 08:09)
http://walkeur.free.fr/alsa/test.php


<body>
debut de page<br />
<div class="centrage">
<table>
<tr>
<td>ELEMENT PAS CENTRE</td>

</tr>
</table>
</div><br />
fin de page
</body>
</html>




body {
	text-align:center;
	}

.centrage {
	text-align:center;
	}


Je précise que c'est sous FF que ça fonctionne pas
Smiley bawling
Bonsoir

Un tableau ne peux pas etre centré avec un simple "text-align:center"

Je ne sais pas si c'est un bug de Firefox mais je l'ai déjà remarqué plusieurs fois.
On critique beaucoup IE, mais Firefox n'est pas parfait non plus, j'ai moi-même un problème avec le "background-attachment:fixed" dans un "DIV".

Essayes ceci :

<html><head>
<title>Titre</title></head>
<body style="text-align:center">
debut de page<br />
<table style="margin-left:auto;margin-right:auto">
<tr>
<td>ELEMENT CENTRE</td>
</tr>
</table>
<br />
fin de page
</body></html>
alpha a écrit :
On critique beaucoup IE, mais Firefox n'est pas parfait non plus
En l'occurrence, il se débrouille plutôt bien puisqu'il suit la spécification (text-align ne s'applique qu'aux élements en ligne).
Eldebaran a écrit :
En l'occurrence, il se débrouille plutôt bien puisqu'il suit la spécification (text-align ne s'applique qu'aux élements en ligne).
Désolé, mais je m'inscrit en faux, et je m'insurge, même ! Smiley cligne
text-align s'applique au contraire aux éléments de type bloc. Dixit la spécification, justement.

wolk > As-tu essayé 
table.ma_classe tr td {
   text-align: center;
}
??
Sopo a écrit :
text-align s'applique au contraire aux éléments de type bloc.
Ca dépend de comment on voit les choses. Il faut en effet déclarer la règle CSS sur un élément de type bloc, mais ce seront seulement les éléments en ligne à l'intérieur de ce bloc qui en subiront l'effet.
a écrit :
Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc.
Et vu la question, je pense que c'est le tableau qu'il cherche à aligner et pas son contenu.

P.S. : je te déconseille l'utilisation d'underscores dans tes noms de classes. Smiley langue
Modifié par Eldebaran (26 Oct 2006 - 23:46)
Je ne suis toujours pas d'accord ! Il n'est pas question de point de vue, il est question de terminologie Smiley cligne

- la propriété text-align doit être appliquée à des éléments de type bloc ;
- cependant, elle n'a d'effet que sur les éléments de type en ligne à l'intérieur de ce bloc.

Comme ça, c'est clair, non ? Smiley smile

Cependant, je ne suis toujours pas sur que Firefox respecte à la lettre la spécification dans ce cas, puisque la propriété text-align est censée être héritée ...

Maintenant, pour centrer le tableau entier, on n'est plus du tout dans la bonnne discussion Smiley ohwell

Il faut :
- soit donner une largeur à table.ma_classe puis lui appliquer des marges auto sur les côtés :
table.ma_classe {
   width: 500px;
   margin: 0 auto;
}
- soit appliquer des marges égales à droite & à gauche sans préciser la largeur, pour conserver une largeur de table fluide ...
Modifié par Sopo (26 Oct 2006 - 23:58)
Modérateur
<oops , edit , grillé , l'info est la au dessus />

bonsoir,

IE applique le text-align center a tout les elements enfants du dit block ou il est declaré la premiere fois .

Ce comportement anormal reproduit l'effet de la balise "obsolete" <center></center> , c'est une entrave au specification , dont on se sert generalement en "a point" au "margin:auto;" quand IE est en mode "quirk" (pas de doctype valide ou code precedent celui-ci) (Le margin:auto; lui sert a centré horizontalement des elments de type block , pourvu d'une largeur specifié , en pourcentage, pixel ou autre unité de mesure.

Le probleme a la base , c'est d'essaye de se codé une page en prenant IE comme reference ! Smiley smile et donc , de se fier a sa façon d'interpretere les specifications ou d'utiliser ses propres gadget .

--> le margin:auto; pour le centrage .

++
:)
Modifié par gcyrillus (27 Oct 2006 - 00:05)
Sopo a écrit :
- la propriété text-align doit être appliquée à des éléments de type bloc ;
- cependant, elle n'a d'effet que sur les éléments de type en ligne à l'intérieur de ce bloc.

Comme ça, c'est clair, non ? Smiley smile
Oui, tu as raison. Smiley smile

Ceci dit, je te déconseille toujours les underscores dans tes noms de classes, je ne crois pas que ce soit autorisé en CSS.
a écrit :
Ceci dit, je te déconseille toujours les underscores dans tes noms de classes, je ne crois pas que ce soit autorisé en CSS.
Mmmh, ce n'est pas ce qu'en dit la spec (oui, encore elle Smiley cligne )
a écrit :
Bon, je me tais, puisque tu es méchant. cligne
Hé, c'est pas ma faute, hein, t'as qu'à pas dire des bêtises Smiley lol
Sopo a écrit :
Hé, c'est pas ma faute, hein, t'as qu'à pas dire des bêtises Smiley lol
C'est mal de ne pas assumer ton côté sadique !

Ceci dit, je peux toujours dire que j'avais raison par rapport à la spec CSS 1. Smiley cligne
Eldebaran a écrit :
C'est mal de ne pas assumer ton côté sadique !
Ceci dit, je peux toujours dire que j'avais raison par rapport à la spec CSS 1. Smiley cligne

Que dire alors de ton côté mauvais perdant Smiley murf Smiley cligne

Bon, c'est vendredi, mais ça se passe dans le bar, les âneries ... Rdv là-bas tt à l'heure Smiley cligne

PS : au fait, wolk, est-ce que ça fonctionne ? auquel cas, pense à passer le sujet en résolu Smiley cligne
Merci toute le monde Smiley smile

avec le margin-left: auto;margin-right: auto; ca fonctionne.

mais quelle galère !!!
Va falloir que je bosse le block/ligne pour tout comprendre!

Smiley sweatdrop
Je crois bien que @Sopo a raison pour le underscore, puisque la référence citée par @Eldebaran corrige, si je lis bien et malgré mon anglais laborieux, une erreur de rédaction de la css2:
In CSS2, identifiers [...] contain only the characters [A-Za-z0-9] 
and ISO 10646 characters 161 and higher, 
plus the hyphen (-) 
[#red]and the underscore (_)[/#]
Smiley smile
Modifié par gonga (28 Oct 2006 - 10:20)
Merci @Sopo
Mon anglais me conduisait également à utiliser de préférence cette traduction... Ici, je parlais du lien cité plus haut, concernant les errata de css2, qui sont en anglais. Où il est précisé en bon anglais que le underscore est (finalement) autorisé, comme en css1... Et d'ailleurs la traduction que tu citais un peu plus haut contenait bien la correction en info-bulle.
Bon, c'est passionnant ce forum, instructif... on en oublierait presque d'avancer sur ses propres problemes de css; j'y retourne!
Smiley ravi
Modifié par gonga (28 Oct 2006 - 11:25)
Sujet clos
Aller à