28173 sujets

CSS et mise en forme, CSS3

Gabarit: contenu centré avec colonne conditionnelle à gauche

Bonjour,

Je cherche une méthode propre et (autant que possible) standard pour réaliser le gabarit suivant:

Une colonne à gauche:
- largeur fixée
- elle peut être affichée ou cachée
- elle s'étends sur toute la hauteur de la fenêtre.
Un contenu centré :
- largeur fixée
- il ne doit pas masquer la colonne si la résolution est trop faible, mais déborder sur la droite
- pas de contrainte sur la hauteur
- centrée dans l'espace libre, c'est à dire par rapport à la largeur de la fenêtre si la colonne est absente, et par rapport à la largeur de la fenêtre moins la largeur de la colonne si la colonne est présente

Le modèle type est le suivant:

<body>
  <div id="container">
<?php if($afficher_menu) { ?>
    <div id="menu">
      menu
    </div>
<?php } ?>
    <div id="site">
      site
    </div>
  </div>
</body>


Merci pour vos propositions Smiley smile

Cordialement,
Elvex
Modifié par elvex (27 May 2006 - 17:35)
Première tentative de réponse, qui ne satisfait pas toutes les conditions:
Cette solution entraine, lorsque la résolution est trop faible, une superposition du div#site sur le div#menu.
Il faut aussi rajouter une classe conditionnelle.

menu
{
	width: 200px;
	float: left;
}

body #site
{
	position: absolute;
	width: 700px;
	left: 50%;
}

body.sans-menu #site
{
	margin-left: -350px; /** -#site.width/2 **/
}

body.avec-menu #site
{
	margin-left: -300px; /** (#menu.width - #site.width)/2 **/
}

<body class="<?php echo $afficher_menu ? 'avec-menu' : 'sans-menu' ; ?>">
...

Modifié par elvex (27 May 2006 - 20:29)
Sujet clos
Aller à