[Résolu] Mise en page liquide avec 3 div

Salut tout le monde,

Après la lecture du livre de Zeldman, je me lance dans le XHTML.
Je débute en css et j'essaie de faire un site valide en strict.

Mon problème est le suivant, j'essaie de faire une mise en page liquide.
Pour la bannière et pour l'ensemble du site en général, j'ai découpé ma page en trois blocs (colonnes) horizontalement.

Le bloc de gauche (#banLeft) contient le cadre arrondi gauche, h1 la banniere du site, et le bloc (#banRight) de droite le cadre droit. Tous ont une largeur fixe.
Au centre, j'ai le troisième bloc (#banCenter) qui lui doit remplir l'espace entre les deux blocs gauche et droite.

J'ai fait une première version en trichant sur les marges et en placant avec absolute, j'ai placé mes blocs de gauche et de droite a 5 % du bord. Ceci fonctionne a peu près, le résultat est sur http://www.manga-life.net/

Non statisfait de cette version à cause de bogues sur IE et Firefox, et une mise en page qui par n'importe comment lorsque l'on redimensionne dans des petites tailles (> 800x600).

J'ai essayér avec le positionnement par float. J'arrive bien à aligner les trois blocs met le bloc du milieu ne prend pas la place nécessaire (il garde la largeur de son image soit 1px, j'aimerais qu'il prenne la taille nécessaire pour combler l'espace vide).

Voici un peu de code :

<div id="global">
  <div id="banLeft"><h1>Manga-life.net</h1></div>
  <div id="banCenter"></div><div id="banRight"></div>
  <br clear="all" />
 ... (menu)

Et le CSS correspondant :

/** BANNIERE **/
div#banLeft {
	color:#000;
	background:transparent url(../i/site/banLeft.png) top left no-repeat;
	width:480px;
	height:125px;
	float:left;
	}
div#banLeft h1{
	padding:0;
	margin:0;
	text-indent:-9999px;
	background:transparent url(../i/site/banniere.png) top left no-repeat;
	width:480px;
	height:125px;
	position:relative;
	top:1px;
	left:1px;
	}
div#banCenter {
	color:#000;
	background:transparent url(../i/site/banCenter.png) top repeat-x;
	margin:0;
	height:125px;
	float:left;
	}	
	
div#banRight {
	float:right;
	color:#000;
	background:transparent url(../i/site/banRight.png) top right no-repeat;
	/*position:relative;
	right:5%;
	top:10px;*/
	width:151px;
	height:125px;
	}

/** MENU **/

et la caputre retouchée avec paint

http://henripolaert.free.fr/alsa.PNG

Quelqu'un a t-il des pistes de réflexions à me donner, des conseils ou mieux la solution enfin si vous avez réussià comprendre quelque chose.

Bon de mon coté je continue à chercher ^^
Modifié par Guiom (16 Aug 2005 - 21:46)

Bonjour Guiom

Pour ne pas exploser le forum en largeur (pensons à ceux qui naviguent en 800x600), merci de bien vouloir utiliser l'option "Générer un aperçu" lors du transfert d'une image trop large.

Merci d'avance de bien vouloir corriger ton post stp !

Personne ?



Ben je commence à trouver, c'est une histoire de marge négative, c'est super pratique. Je posterai quand j'aurais tout trouver, là j'ai un problème avec la marge gauche

/** BANNIERE **/
div#banLeft {
	color:#000;
	background:transparent url(../i/site/banLeft.png) top left no-repeat;
	height:125px;
	float:left;
	}
div#banLeft h1{
	padding:0;
	margin:0;
	text-indent:-9999px;
	background:transparent url(../i/site/banniere.png) top left no-repeat;
	width:480px;
	height:125px;
	position:relative;
	top:1px;
	left:1px;
	}
div#banCenter {
	color:#000;
	background:transparent url(../i/site/banCenter.png) top repeat-x;
	width:90%;
	margin:0 -151px 0 -479px;
	height:125px;
	float:left;
	}	

En espérant qu'il pourra aider quelqu'un
Modifié par Guiom (16 Aug 2005 - 21:47)