Modifier visuellement le flux de ma page

Bonjour à tous,

J'ai une petite question concernant l'imbrication de DIV.

Petit schéma explicatif qui résume tout :

> à gauche : mon flux html
> à droite : l'affichage que je souhaiterais obtenir avec mes CSS



Si je met mon CONTENU et mon WIDGET en float, mon HEADER remonte bien, mais ma SIDEBAR reste bloquée à la suite de de mon WIDGET.

J'ai essayé de mettre ma SIDEBAR en position absoute, elle remonte bien, mais se cale dans l'angle supérieur gauche. Or, mon contenu global est centré. Si je lui donne un décalage de left=10 px par exemple, selon les largeurs d'écran, elle ne sera pas toujours alignée avec mon bloc principal.

Voyez-vous une technique pour résoudre mon problème ? Une propriété particulière ?

Merci d'avance pour votre aide

Et je suppose que tu ne peux pas toucher au html ?

Est ce que tu as le code html à portée de main ? J'ai essayé de reproduire ton schéma, mais mettre contenu et widget en float ne donne pas la même chose que toi (mes div restent planquées derrière contenu et widget, en toute logique)

Bon, j'ai réussi, mais c'est vraiment pas beau

.conteneur /* grosse div qui englobe le tout pour centrer, va te permettre d'utiliser position: relative */
{
    margin: 0 auto;
    width: 400px;
}

.contenu
{
    background: green;
    width: 300px; /* cette taille plus celle de widget doit donner 100%, ou la taille de conteneur, peu importe */
    height: 200px;
    float: left;
    margin-top: 100px; /* = height de sidebar + height de header */
    
}

.widget
{
    background: yellow;
    width: 100px; /* cette taille plus celle de widget doit donner 100%, ou la taille de conteneur, peu importe */
    height: 200px; 
    float: left;
    margin-top: 100px; /* = height de sidebar + height de header */
}

.header
{
    background: red;
    width: 400px;
    height: 50px;
    clear: both; /* me demande pas pourquoi çà marche  [cligne] mais çà marche! */
    position: relative; /* te permet de conserver ton positionnement par rapport à conteneur plutôt qu'à Body */
    top: -300px; /* = height de contenu et widget + margin de contenu et widget */
}

.sidebar
{
    background: blue;
    width: 400px;
    height: 50px;
    position: relative;
    top: -300px; /* tout pareil que header */
}

.footer
{
    background: grey;
    width: 400px;
    height: 50px;
    margin-top: -100px; /* = height de header + height de sidebar */
}

tout çà pour ce html ci :

<div class="conteneur">
          	<div class="contenu">
          	   contenu
          	</div>
          	<div class="widget">
          	   widget
          	</div>
          	<div class="header">
          	   header
          	</div>
          	<div class="sidebar">
          	   sidebar
          	</div>
          	<div class="footer">
          	   footer
          	</div>
    	</div>

Modifié par lautrejojo (09 Jan 2010 - 16:04)

lautrejojo, tu es bien parti sur mais c'est pas ça. Il faut effectivement un conteneur centré horizontalement, mais le rôle de ce conteneur n'est pas de «permettre d'utiliser position:relative» (nonsense...). Il doit servir à deux choses:
1. Donner une largeur et centrer tous les contenus.
2. Permettre d'utiliser position:absolute), en étant lui-même positionné en relatif.

Là, tu utilises le positionnement relatif pour décaler tous les éléments par rapport à leur position en flux. C'est juste une très très mauvaise idée. Il faudrait plutôt positionner le conteneur global en relatif afin qu'il serve de référent, puis positionner en absolu les éléments que l'on a besoin de faire remonter.

Ce qui nous donne:

/* Le conteneur global, qui sert de référent à ses descendants positionnés */
#conteneur { 
  position: relative;
  width: 400px;
  margin: 0 auto;
  padding-top: 100px; /* Hauteur header + «sidebar» */
}

/* On doit place en absolu ces deux éléments car ils viennent plus bas dans le flux.
   Malheureusement, cela oblige à figer leur hauteur.
*/
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 50px;
  background: orange;
}
#sidebar {
  position: absolute;
  top: 50px;
  left: 0;
  width: 400px;
  height: 50px;
  background: purple;
}

/* On retrouve un positionnement en flux */
#contenu {
  float: left;
  width: 300px;
  min-height: 300px; /* Pour test. La hauteur dépend du contenu. */
  background: yellow;
}
#widget {
  float: right;
  width: 100px;
  min-height: 200px; /* Pour test. La hauteur dépend du contenu. */
  background: cyan;
}
#footer { 
  clear: both; /* Pour se placer après les deux flottants */
  min-height: 50px; /* Pour test. La hauteur dépend du contenu. */
  background: lawngreen;
}

Pour info:
1. La convention est d'utiliser des id plutôt que des class pour les principaux éléments du design. Dont acte.
2. Devoir positionner des éléments en absolu et figer leur hauteur, c'est pas cool. L'extensibilité en hauteur, c'est mieux.
3. Lorsque l'ordre des éléments dans le flux HTML correspond plus ou moins à l'ordre de lecture à l'écran, c'est mieux aussi.
4. Les deux «colonnes» n'auront pas la même hauteur, vu que leur hauteur va dépendre de leur contenu respectif. Si c'est un problème, voir du côté de la technique des colonnes factices.