Alignement d'un conteneur contenant des éléments float:left

Bonjour à tous

Aprés avoir lu quelques ressources, je pense (et je me trompe peut être) que ma question sort du cadre de la documentation.

Je ne suis pas une flêche en css mais j'essai de comprendre ...

J'ai un bloc qui contient des éléments avec la propriété float:left pour pouvoir les avoir les uns derrières les autres (une autre solution ?) ce nombre d'éléments peut être variable selon les pages (ainsi que leur taille respective) donc la technique

left:50% ; margin-left:XXpx

tombe à l'eau
Par contre de ce que j'ai pu lire il est possible de centrer des éléments via

margin-left:auto; margin-right:auto

Cela me semble intéressant mais je n'arrive pas à la mettre en place

jpatine

Les marges automatiques ne fonctionneront que sur un élément de type bloc dont la largeur ou la largeur minimale est fixée. Si celle-ci n'est pas connue à l'avance, effectivement ça n'aide pas.

Quels sont les éléments à centrer ?

Il est également possible de centrer facilement des éléments s'il s'agit d'éléments de type en-ligne (img, span, etc.), tout simplement en centrant le texte (text-align: center).

Bonjour à tous, c'est mon baptême du feu en tant qu'acteur sur ce forum, jusqu'à présent je restais simple lecteur...

Alors ce qui me fait intervenir, c'est que j'ai apparemment le même problème que toi :

- Un div dont le contenu est constitué d'autres div en "float : left" afin qu'ils se mettent à la suite les uns des autres
- Le contenu de ce div a donc une largeur variable
- J'essaye de centrer ce div sur la page : et j'en ch... !

Bref, si ça peut faire avancer le débat, je vais rapporter ici mes observations. On a deux pistes :

1 - Centrer le div principal
Comme tout div qui se respecte, le conteneur utilise 100% de la largeur dispo. Du coup, impossible de le centrer en l'état. Il faut qu'on arrive a lui faire adopter une largeur qui "colle" à la largeur du contenu.
* j'ai essayé d'utiliser "display : inline" : ça ne marche pas car un elément inline ne peut pas contenir d'éléments bloc ;
* j'ai essayé d'utiliser "display : table" : ça marche PRESQUE sous FireFox !!! Mais j'ai un genre de bug : les divs en float : left s'alignent bizarrement, des fois ils se mettent à la ligne alors qu'il reste de la place à droite du précédent...

2 - Laisser le div principal occuper 100% en largeur et centrer son contenu (c'est la proposition de notre ami au turban)
Ben moi ça ne marche pas, car mon contenu est constitué de plein de petits div présentant une image et un texte, j'ai besoin de figer la hauteur et la largeur de chaque

Si quelqu'un avait une idée, un éclair de génie...

A vot' bon coeur !

J'ajoute un petit bout de code simplifié :

HTML :

<div id="conteneur">
	<div class="icone">
		toto
	</div>
	<div class="icone">
		titi
	</div>
	<p id="terminator" />
</div>

CSS :

#conteneur
{
	background-color : #FFFFC0;
}

.icone
{
	width : 50px;
	height : 50px;
	margin : 5px;
	background-color : #C0C0C0;
	float : left;
}

#terminator
{
	clear : both;
}

Le but est de centrer les boites grises à l'écran tout en les conservant "div", et en faisant en sorte que si on a 400 boites grises, ça marche ausi... Ca a l'air très simple comme ça
Modifié par Thierz (25 Aug 2006 - 00:09)

Bonjour Thierz et bienvenue sur Alsacréations,

Il serait plus simple pour tous les membres du forum que tu ouvres un sujet dédié à ton propre soucis, et de fournir le code complet de la page concernée (idéalement une page en ligne). Il apparait souvent à la lecture de tel ou tel problème que l'on identifie son propre tracas, mais il n'est pas évident que les causes soient identiques ainsi que les solutions à adopter.

Cette question revient de temps en temps, il me semble.
Elle démontre une limite des CSS, du moins dans leur implémentation actuelle.

Il me semble, mais c'est à vérifier, que l'utilisation de text-align: center sur le conteneur et de display: inline-block pour les éléments à centrer ET à styler comme des blocs, devrait permettre d'obtenir le rendu voulu.

MAIS : pas d'implémentation d'inline-block dans Gecko (Firefox, Camino, etc.), et une implémentation buguée dans IE 6... ça n'arrange pas les choses.

Donc, si se contenter de l'alignement « de type texte » d'éléments de type en-ligne (ça peut être des div ou des paragraphes en display: inline -- et il me semble que si on ne peut pas fixer de largeur ou de hauteur, on peut jouer sur les padding par exemple), alors il faut faire avec des tableaux.

En production, mieux vaut un tableau de mise en page correctement utilisé qu'une bidouille mal maîtrisée.
Sauf si quelqu'un a une meilleure idée ?

Personnellement, j'ai renoncé... Je suis fondamentalement contre changer la structure sémantique d'un document pour le faire plus joli (tout au plus je m'autorise un Box Model Hack, et ça s'arrête là). Je rêve d'un Web où tout serait nickel, des browsers qui se conforment aux standards, des pages web codées proprement, etc. etc.

C'est pas pour tout de suite hein ?

Bonne chance à toi tuxout, et excuse-moi de m'être approprié ton sujet.
Modifié par Thierz (27 Aug 2006 - 01:18)

Faire cela uniquement en css est strictement IMPOSSIBLE...

Cependant si on y ajoute un peut de javascript c'est possible...

Je vous laisse lire ça :

Lien

Faut vraiment creuser...

++

Merci à tous pour vos conseils

No Probz Thierz , cela restait dans le même esprit donc ne pouvait que faire évoluer la discussion

J'ai opté pour la solution, "Back to the futur", du simple tableau HTML, j'avais presque oublié comment on s'en servait tiens

Ca reste propre, ça s'intègre bien au code et pas besoin de bidouille.

Bon bloquage clavier à tous