[XHTML] Pb mise en page

[Pixame]

Bonjour,

J'ai essayé de faire une maquette de mise en page toute simple en XHTML...

La mise en page consiste en 1 header, le corps divisé en 2 colonnes, et 1 footer.

J'ai un problème sur le positionnement des 2 colonnes...

Voir un exemple ici.

Qu'ai-je fait comme erreur ?

Merci.

[Monique]

Bonjour,

Dans la css, tu modifies et ajoutes

.colonne1 {
  width: 48%; 
  margin-right: 4%; 
  float: left;
}

.spacer {
  clear: both;
}

et tu ajoutes dans le code html

<div class="colonne2">
    <div class="bg3"><div class="bg4"><a class="titre2">TITRE 1 COLONNE 2</a></div></div>

  <div class="bg5">CONTENU</div>

  <div class="bg1">MESSAGE DANS COLONNE 2</div>
  
  <div class="bg3"><div class="bg4"><a class="titre2">TITRE 2 COLONNE 2</a></div></div>
  <div class="bg5">CONTENU</div>
	</div>

<div class="spacer"> </div>

Tu pourrais aussi simplifier en attribuant une bordure à bg4 au lieu de l'inclure dans un bloc d'une autre couleur.

[Pixame]

Merci.

Je viens de faire les modifs. Cela marche bien sous Mozilla mais pas sous IE... (copie d'écran).

Pour les bordures, c'est corrigé aussi (vieux réflexes html...) !

[Monique]

J'ai testé avec IE 6 avant d'envoyer... et ça marche

N'oublie pas que pour le calcul de la largeur d'un bloc, IE ajoute la largeur des bordures à la largeur du bloc. Je pense que le problème devrait venir de là.

[Pixame]

Le problème sous IE6 venait effectivment de la différence de calcul de la largeur des blocs.

Merci

Modifié 14 Mars 2004 par NT Koncept