[résolu] Centrage d'un bloc : le conteneur se centre lui-même

Un énième sujet... je sais, c'est Mal. Mais je m'arrache les cheveux, les dents et les ongles sur ça. Et puis j'ai peut-être un problème original

Je développe un site sous Joomla, le template que j'ai utilisé de base avant de le modifier largement est centré horizontalement, ça c'est bien.
Mais je voudrais, de manière ponctuelle, centrer des élements au milieu de mon bout de page (des tableaux, des images), en utilisant ce tuto (évidemment ).
Donc j'ai :

.adjusting{
	margin:0 auto;
	width:700px;
	}

<div class="adjusting">blabla</div>

le blabla étant un ou des autres div (pour les images, notamment, je me suis inspirée du tuto de Florent V.) ou un tableau.

Et... c'est le div conteneur, portant la classe adjusting, qui est centré dans la page... mais son contenu reste aligné à gauche. Invariablement.
J'ai loupé quelque chose d'essentiel ?

Merci d'avance.


(note HS aux admin d'ici : on ne peut pas prévisualiser son message ?)
Modifié par AkaiKen (17 Jul 2009 - 08:44)

bonjour,

Pour centrer un element verticalement a partir du'une cellule de tableau comme conteneur principal de la page , il faut que ce tableau unique couvre toute la fenêtre du navigateur.

Pour cela , donner aux parents direct une hauteur et largeur de 100% , avec un reset a zero des marges et padding (en l'occurance : html et body)

Pour le tableau : il peut heriter des hauteur et largeur de son parent , en ajoutant un reset au padding , margin et et en eliminant les 'marges' sur les bord du tableau , (border-collapse) , tu obtiens un conteneur de la taille de ton ecran .
Le centrage vertical dans la cellule (par defaut en vertical-align:middle dans beaucoup de navigateur) est a redefinir via les feuilles de styles.

Le tableau a la propriété de s'adapter a son contenu, les valeurs 100% pour width et height seront les valeurs minimale de ce tableau.

Pour le centrage horizontale , c'est comme d'habitude pour les contenus : width + margin:auto; .

en gros : height,width sur html -> body -> table + RAZ sur margin, padding, border-collapse et vertical-align:middle; a td.

GC

Bonjour,
merci mais ça ne répond pas tellement à ma question : je ne parle pas du tout de centrage vertical. Et mon conteneur n'est pas une cellule de tableau ! J'en parle parce que je veux centrer un tableau (avec des données tabulaires et tout dedans) dans ma page.
Et ce que vous proposez pour le centrage horizontal (width et margin:auto), si vous lisez bien, c'est ce que j'ai écrit justement...

J'aimerais pouvoir donner un lien vers ma page, mais je construis le site en local. Une image de ce que j'ai et de ce que je voudrais peut-elle aider ?

Salut,

a écrit :

<div class="adjusting">blabla</div>

[...] c'est le div conteneur, portant la classe adjusting, qui est centré dans la page... mais son contenu reste aligné à gauche. Invariablement.
J'ai loupé quelque chose d'essentiel ?

Ben si je comprends bien le problème (ce qui n'est pas dit), oui .

Les marges ne s'héritent pas de parent à enfant. Donc si tu dis #blabla {margin:0 auto; width:700px;}, ça s'applique à #blabla, qui se centre, mais pas à son contenu (ses enfants).
Si tu veux centrer le contenu inline de #blabla tu peux faire #blabla {text-align:center;} et ça, ça sera hérité automatiquement par les enfants. Mais pour centrer les blocks enfants de #blabla, tu n'as d'autre choix que de le faire de manière explicite : #blabla div pour centrer les divs, #blabla li pour centrer les li, #blabla * pour tout centrer, etc.

Mais alors... quid du tuto qui dit "créez un conteneur, mettons une div d'id "global" et donnez-lui

#global { 
  margin-left: auto; 
  margin-right: auto; 
  width: ...; /* largeur obligatoire pour être centré */ 
}

?

Donc là, je veux centrer un tableau un tableau (de classe "custom_table", le template de base de Joomla met en page avec des tableaux et je n'ai pas le courage de tout transformer, pas cette fois), je devrai donc écrire :

.adjusting .custom_table {
margin-left: auto;
margin-right: auto;
width: 700px;
}

<div class="adjusting">
<table class="custom_table">
etc
</table>
</div>

C'est ça ?

a écrit :
quid du tuto qui dit "créez un conteneur, mettons une div d'id "global"

S'il s'agit bien de ce tuto, la fonction "Rechercher" de mon firefox n'y trouve pas ta phrase...

a écrit :
Donc là, je veux centrer un tableau

Pour centrer un tableau de classe custom_table dans son conteneur (n'importe lequel), c'est simplement :

.custom_table { 
margin-left: auto; 
margin-right: auto; 
width: 700px; 
}

Si tu fais :

.adjusting .custom_table { 
margin-left: auto; 
margin-right: auto; 
width: 700px; 
}

... cela va centrer un tableau de classe de classe custom_table, mais seulement lorsqu'il est descendant d'un élément de classe adjusting.

marcv a écrit :
quid du tuto qui dit "créez un conteneur, mettons une div d'id "global"

S'il s'agit bien de ce tuto, la fonction "Rechercher" de mon firefox n'y trouve pas ta phrase...

Ok, la phrase exacte était "Donnons à notre bloc l'id "global" :" (c'est bien ce tuto)

marcv a écrit :
Donc là, je veux centrer un tableau

Pour centrer un tableau de classe custom_table dans son conteneur (n'importe lequel), c'est simplement :

.custom_table { 
margin-left: auto; 
margin-right: auto; 
width: 700px; 
}

Si tu fais :

.adjusting .custom_table { 
margin-left: auto; 
margin-right: auto; 
width: 700px; 
}

... cela va centrer un tableau de classe de classe custom_table, mais seulement lorsqu'il est descendant d'un élément de classe adjusting.

Quand j'ai donné l'exemple du tableau, c'est justement à titre d'exemple, pour dire que je voulais centrer des éléments de type block.

Et .adjusting est précisement le nom de l'élement qui contiendrait les trucs à centrer, le conteneur (appelé global dans le tuto); voilà pourquoi j'en parlais.
J'ai testé tes deux solutions.
Et en fait une classe .adjusting que j'ajoute à mon tableau (qui devient

<table class="custom_table adjusting">etc</table>

) fonctionne très bien, elle s'affranchit même de la largeur (doit y avoir un truc défini plus haut, je n'ai pas encore identifié)
Par contre... je cherche encore pour faire un

<div class="adjusting">
plusieurs div; notamment des div côte à côte (avec des float)
</div>

a écrit :
je cherche encore pour faire un

<div class="adjusting"> 
plusieurs div; notamment des div côte à côte (avec des float) 
</div>

Les floats n'étant pas dans le flux normal des éléments, ils ne peuvent pas être centrés (à la base, c'est pas fait pour). Si tu veux simuler un centrage, tu peux les mettre dans un conteneur avec pour width la largeur totale des floats et ayant ses marges latérales à auto. Mais tu peux aussi utiliser display:inline-block (voire inline tout court, faut voir) au lieu de les floater, par exemple...
Modifié par marcv (16 Jul 2009 - 20:14)

bonsoir ,

AkaiKen a écrit :

Et en fait une classe .adjusting que j'ajoute à mon tableau (qui devient

<table class="custom_table adjusting">etc</table>

) fonctionne très bien, elle s'affranchit même de la largeur (doit y avoir un truc défini plus haut, je n'ai pas encore identifié)

Ceci est un comportement tout a fait normal d'une table :

gc-nomade a écrit :
bonjour,

....

Le tableau a la propriété de s'adapter a son contenu, les valeurs 100% pour width et height seront les valeurs minimale de ce tableau.
...

GC

100% ou 700px , c'est pareil , si ton tableau a besoin de plus de largeur , il s'agrandira.

AkaiKen a écrit :

Par contre... je cherche encore pour faire un

<div class="adjusting">
plusieurs div; notamment des div côte à côte (avec des float)
</div>

La je te proposerais de faire un tableau d'une ligne avec une cellule par conteneur , si le conteneur et les flottants que marcv ne te conviennent pas (pourtant c'est le plus simple et propre ) .

Pour faire ce que tu veut sans flottement et sans tableau , les possibilité CSS demandent une bonne compréhension du comportement des navigateur IE7 , (voir IE6 et inf ainsi que les Firefox 2 et inf) qui nécessite de jouer sur les contexte de formatage et leur comportement spécifique , via des commentaires Conditionnels , des règles propriétaires , des élément tampon dans le html , .... Bref ça peut-être amusant a la maison (au lieu de faire une réussite) .
c'est long , en gros tu imbriques 4 approche assez similaires que tu redistribue pour les navigateurs ciblés .
Les commentaires conditionnels , !important et le fait que tel ou tel navigateur va écraser une regle ou pas selon qu'elle est implémenter , rend en final le code trés fragile et incompréhensible pour celui qui ne l'a pas mis en place ou qui n'en a pas bien saisie les subtilité .

A deja avoir proposer cette approche sur ce forum , je me suis vite aperçu que ça creer plus de confusion qu'autre choses (voir un rejet) , de plus , les navigateurs ciblé sont en voie de disparition ... connaitre ou jouer de leurs défauts ne va bientôt plus servir a rien .

Tu pourras , plus tard revenir sur des solutions comme display:inline-block; ou table selon les resultat ou comportement final que tu attendras a l'ecran .tu peut éventuellement a tes heures perdue et avec un navigateur qui les implémentent correctement (ff3, IE8, chrome, ....) , expérimenter leurs utilisations possibles.

Pour le moment je te conseillerais , comme te le conseille aussi marcv : le conteneur et ses éléments flottants , ou un tableau de mise en page , en marge auto avec ou sans largeur prédéfinie .

Cordialement
Cyrille

Ok, je vais un peu revoir mon approche, alors Je voulais une classe très générale, mais les margin: auto fonctionnant nativement sur les tableaux, et m'apercevant qu'il n'y a qu'un seul cas où j'ai plusieurs images à la suite à centrer, eh bien... je vais changer ma classe spéciale illustration en enlevant le float et faire un truc particulier pour le, heum, cas particulier, via le conteneur que propose marcv.
Merci beaucoup de votre aide, marcv et gc-nomade

Je vais considérer ça comme résolu !
Modifié par AkaiKen (17 Jul 2009 - 08:42)