Centrage automatique d'un nombre quelconque de blocs

Bonjour à tous,

Je suis webmaster d'un site e-commerce en production, et il y a quelques années, j'avais trouvé une astuce CSS pour centrer automatiquement des blocs dans une page. C'est une méthode qui ne doit pas être courante, car je l'ai jamais vue nulle part ailleurs.

Depuis quelques années donc, tout fonctionnait bien sur la plupart des navigateurs courants: IE, Firefox, Opera en tous cas. Jusqu'à ce que Firefox passe en 3.0.4 (je crois que ça marchait encore sur la 3.0.3). Et là, horreur, ils ont du modifier le moteur CSS car ça marche plus. Et sur le futur Firefox 3.1 non plus. Et sur IE8 pas mieux (ça marchait encore sur IE7).

Et j'ai beau me torturer les cheveux, je trouve rien pour remplacer. J'aurais donc besoin que quelqu'un de très fort passe par là pour m'aider. Même si c'est une solution en CSS 3.0 et que ça marche sur FF, je prends. Parce que mon e-commerce sans le centrage, c'est pas très joli.

Donc voilà. Mon centrage de bloc donne ça. Il faut modifier la largeur de la fenêtre pour voir le fonctionnement.

Si vous le regardez avec IE < 8, FF < 3.0.4 ou Opera, cela doit donner ça:
http://asgarel.free.fr/centrage-OUI.jpg
Les blocs noirs sont toujours bien centrés dans ma fenêtre.

Sinon, ça ne marche pas et ça donne ça:
http://asgarel.free.fr/centrage-NON.jpg
Les blocs noirs sont alignés à gauche dans ma fenêtre.

Je ne recopie pas le code pour ne pas alourdir le post: il suffit de regarder le source sur mon lien.

Le principe est donc d'imbriquer 3 niveaux de DIV qui sont tous en float:left. Le premier niveau #ensemblebloc (jaune) contient donc des blocs de tailles fixes mais de nombre variable. Il est décalé de 50% de la taille de son conteneur (#centrage) vers la gauche. La taille du deuxième niveau #centrage (rouge à droite) doit s'adapter en largeur à son contenu (#ensemblebloc, donc), et est décalé de 50% de son conteneur (#global, donc) vers la droite. Le dernier niveau #global est static et représente ici la page (le rouge de gauche).

Apparemment, le problème vient du width:auto de #ensemblebloc qui ne s'adapte plus automatiquement à la taille de son contenu, mais s'étend maintenant à 100% de son contenant #global. Mais pourquoi ils ont été modifier ce comportement ? Surtout si c'est pour supprimer des possibilités au CSS plutôt que d'en ajouter ?

Bon, je reconnais que le problème n'est pas simple. Disons que c'est un peu un défi .

Merci aux courageux qui se pencheront sur mon casse tête.
Modifié par Asgarel (20 Nov 2008 - 17:17)

Salut,

Surement pas tout compris mais bon
Si tu supprimes ton left: 50%; sur #centrage et tu le remplaces par margin-left: 50%, ça ne le fais pas?

Asgarel a écrit :
Mais pourquoi ils ont été modifier ce comportement ? eek Surtout si c'est pour supprimer des possibilités au CSS plutôt que d'en ajouter ?

Oui enfin ce comportement précis en présence de multiples blocs flottants imbriqués me semble être plus un hasard qu'une «possibilité de CSS».

C'est le problème d'utiliser une technique tarabiscotée, ça marche un peu par hasard et ça peut arrêter de marcher pour plein de raisons (parce qu'en travaillant sur des problèmes connexes, en réglant d'autres problèmes, ça peut avoir comme effet de bord de supprimer le truc qui marchait un peu par hasard).

Sinon, en CSS ce type de chose se fait avec des éléments en display: inline-block plutôt que des blocs flottants.

bonsoir,

En effet comme le dit Florent , tu as par hasard grace a coup de float , overflow, relative et du layout reussit a obtenir un contexte de formatage perturbé , instable .

De plus :

...
				<div id="bloc"></div>
				<div id="bloc"></div>
				<div id="bloc"></div>
...

ce n'est pas bon non plus , un id , n'est utilisable qu'une seule fois par document , utilise une class ou le simple selecteur descendant si le parent a une id .
ex:

#ensemblebloc div {/* css appliqué a tout les div dans id="ensemblebloc" */}

Par ailleurs , il est difficile de te conseillé comme ça , sur un simple gabarit .
A quoi est destiné l'espace réservé a gauche ?
qu'est ce qui a motivé l'architecture html (code genéré par un template ou les besoins estimé pour le rendu visuel ) ?

Parceque vu comme ça , je verrais une liste a fond jaune , des li a fond noir contenus dans un div a fond rouge .

html qui ne veut rien dire de plus vu comme ça

<div>	
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>

css qui irait avec :

* {margin:0;padding:0;}
div {
background:red;
width:100%;
overflow:hidden;
}

ul , li {
display:inline;
}

ul{
float:right;
background:yellow;
width:50%;
}

li {
background:black;
float:left;
width:3em;
height:3em;  
overflow:hidden;
margin:1em;
}

Comme tu peut le constater , (mis a part la correction des double marges pour IE (display:inline; pour les éléments flottants ) et l'overflow (contexte de formatage pour englobé les flottants)
il n' y a aucune difficulté a priori a obtenir un gabarit vide sur une mise en forme des plus classique.

Du coup , on ne comprend pas trop ton probléme
1) La mise en forme ne t'est pas encore familiere
ou
2) Tu decris mal ton probléme , peut-etre en omettant des details particuliers en nous proposant qu'un extrait incomplet

En bref , je sais pas si c'est du lard ou du cochon ?