28172 sujets

CSS et mise en forme, CSS3

Mise en page sur trois colonnes

Bonjour,

Je reste bloquer sur la mise en page d'un site à trois colonnes avec la colonne droite et gauche de taille fixe et la colonne centrale à 100%.
Je précise queje veux aussi la longeur des colonnes à 100%.
- Je suis passer par les div de base : impossible de mettre les colonnes à 100% en hauteur.
- Puis par display:table-cell; mais impossible de mettre la colonne centrale à 100% en largeur
- Puis par display:table-cell; avec un background : url(ttoto.jpg) repeat; pour 100% en largeur mais ca ne marche pas non plus.

J'y comprend rien.

Merci par avance pour vos avis.

Voici le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout en 3 colonnes</title>
    <style type="text/css">

        body {}
        
	#titre {background:red;}

	#contenu {}
        
        	#gauche {
       		display:table-cell;
    	   	width:200px;
		background:green;
		}

		#milieu {
		display:table-cell;
		background : url(tt.jpg) repeat;
		}

		#droit {
		display:table-cell;
		width:200px; 
		background:green;
		}
        
        #pied {background:grey;}

    </style>
</head>

<body>
<div id="contenu">
	<div id="titre">Bandeau</div>
	  	<div id="gauche">Mon menu gauche.</div>
	 	<div id="milieu">Lorem ipsum elit.</div>
		<div id="droit">Mon menu droit qui peut être éventuellement supprimé.</div>
	<div id="pied">Pied de page</div>
</div>
</body>

</html>

Modifié par pierr75 (14 Mar 2011 - 11:55)
Le comportement que tu décris et que tu souhaite est celui d'un tableau a 3 colonnes.
Dans un tableau les cellules se partagent la largeur du tableau.
Si tu fixe des largeurs pour certaines cellules, les autres vont se partager ce qui reste.

Les divs ne fonctionnent pas pareil, car elles n'ont aucun lien entre-elles.
Par conséquent, ta Div du milieu ne va pas adapter sa largeur en fonction des deux autres.

Après je ne sais pas ce qu'il est possible de faire avec table-cell
Bon apparement il te manquait juste une div pour avoir ce que tu souhaite.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Layout en 3 colonnes</title>
		<style type="text/css">
			body {}
			
			#titre {background:red;}
	
			#contenu {}
	
			#table{display:table;width:100%}
	
			#gauche {
				display:table-cell;
				width:200px;
				background:green;
			}
	
			#milieu {
				display:table-cell;
				background : url(tt.jpg) repeat;
			}
	
			#droit {
				display:table-cell;
				width:200px;
				background:green;
			}

			#pied {background:grey;}
		</style>
	</head>

	<body>
		<div id="contenu">
			<div id="titre">Bandeau</div>
			<div id="table">
				<div id="gauche">Mon menu gauche.</div>
				<div id="milieu">Lorem ipsum elit.</div>
				<div id="droit">Mon menu droit qui peut être éventuellement supprimé.</div>
			</div>
			<div id="pied">Pied de page</div>
		</div>
	</body>
</html>
Bonjour,

Pour la largeur de la colonne du milieu, c'est pas compliqué :


	#milieu {
	display:table-cell;
	background : url(tt.jpg) repeat;
	width:100%;
	}


Cordialement
Bonjour,

<div style="display:table; width:100%;">
  <div style="display:table-cell; width: 200px;"></div>
  <div style="display:table-cell; width: auto;"></div>
  <div style="display:table-cell; width: 200px;"></div>
</div>

Et voilà. Smiley smile

Edit: grillé par Tetranima.

lddsoft a écrit :
Pour la largeur de la colonne du milieu, c'est pas compliqué : width:100%;

Il me semble que le navigateur va utiliser l'algorithme de calcul des dimensions des tableaux, et donc on va se retrouver avec des colonnes latérales «écrasées» par cette colonne centrale qui, en width:100%, essaie de prendre autant de place que possible.
Modifié par fvsch (14 Mar 2011 - 12:14)
lddsoft a écrit :
Bonjour,

Pour la largeur de la colonne du milieu, c'est pas compliqué :


	#milieu {
	display:table-cell;
	background : url(tt.jpg) repeat;
	width:100%;
	}


Cordialement



Cette solution ne respecte pas les largeurs des autres colonnes. Elle ne font plus 200px. (testé sous chrome)
fvsch a écrit :
Bonjour,

&lt;div style=&quot;display:table; width:100%;&quot;&gt;
  &lt;div style=&quot;display:table-cell; width: 200px;&quot;&gt;&lt;/div&gt;
  &lt;div style=&quot;display:table-cell; width: auto;&quot;&gt;&lt;/div&gt;
  &lt;div style=&quot;display:table-cell; width: 200px;&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Et voilà. Smiley smile

Edit: grillé par Tetranima.


lol XD
la vache ! CA MARCHE !
bin vous êtes trop fort !
je ne croyais plus en rien, ni les forums ,ni css, ni xml ! et me voilà de nouveau revenue à la vie !
Merci Smiley smile
je précise :
ce qui marche c'est le div en plus : #table{display:table;width:100%}
Merci encore !
Sujet clos
Aller à