Problème de centrage d'un bloc

Bonsoir à tous,

Étant en pleine intégration d'un design web, un premier problème est apparu ce soir, il s'agit du centrage d'un bloc.

En effet même après avoir appliqué les conseils donnés sur Alsacréations ('Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales.') le problème est toujours là et je ne sais le résoudre.

Le design est fait de cette façon :

<div class="conteneur">
<div class="col_gauche">
<div id="menu_vertical">
<!-- Le menu -->
</div>
</div>
<div class="col_droite">
<div id="milieu">

<!-- C'est les blocs ci dessous qu'il faudrait centrer [smile] -->

<div id="ressources">
</div>
<div id="contenu">
</div>

</div>

.conteneur
{
width: 1024px;
margin: auto;
}

.col_gauche
{
width: 200px;
float: left;
}

.col_droite
{
width: 800px;
float: right;
margin: auto;
}

#milieu
{
margin: auto;
}

#ressources
{
float : left;
width: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;

}

Merci d'avance de votre aide

Cordialement, iXy.
Modifié par iXy (05 Dec 2008 - 23:04)

Bonjour,

Quelques remarques et questions en vrac:

1. Ça devrait marcher. Tu as bien sûr pensé à tester dans plusieurs navigateurs pour vérifier qu'il ne s'agissait pas d'un problème lié à un navigateur en particulier?

2. Je suppose que ta page a un Doctype en bonne et due forme et pas de déclaration XML, donc que sa structure de base ressemble à ce qu'on peut trouver sur Squelettor. Si ce n'est pas le cas, tu as un problème qui se résume à «il faut de toute urgence se documenter sur le mode Quirks».

3. Dommage que tes principaux conteneurs utilisent des classes plutôt que des identifiants. Ça t'aiderait à organiser son code HTML et CSS si les principaux conteneurs utilisaient des identifiants (uniques) tandis que les contenus de plus bas niveaux utiliseraient des classes.

4. J'ai cru voir un width: 1024px. Je te laisse deviner pourquoi c'est une grossière erreur (de débutant, donc pardonnable).

5. Ton bloc div#ressources est flottant et a des marges automatiques. Ça ne peut pas marcher ensemble.

Bonsoir,
Je ne vois pas très bien la composition de ta page... si j'ai bien compris tu as un bloc conteneur dans lequel se trouve une colonne à gauche et à droite avec un bloc au milieu ? C'est la suite qui n'est pas très clair l'élément "ressources", d'après le CSS, est placé à gauche et l'élément contenu à droite ?

Salut iXy,

a écrit :
La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur.

Je te conseille de revoir les bases grâce à cet article : http://openweb.eu.org/articles/initiation_float
(Comprendre les positionnements et les maîtriser changera ta vie, crois-moi )

Ensuite si tu as besoin, pour une raison ou une autre, de centrer des blocs flottants alignés (comme j'ai déjà vu des demandes ici), voici une piste de réflexion : http://www.the-asw.com/post/2005/08/23/46-centrer-un-float-en-css