28172 sujets

CSS et mise en forme, CSS3

Display:table-cell;

Bonjour à tous,

J'ai beaucoup de mal à comprendre le positionnement en css, je suis arriver à trouver une solution simple pour une page avec bandeau / menu gauche / milieu / menu droit / pied de page en utllisant display:table-cell;

Mais je veux que les menus gauche et droit aient une taille fille et que le bandeau, le milieu et le pied de page soient à 100% de la page. Ca marche sans problème pour le bandeau et le pied de page, mais impossible de le faire pour le milieu.
J'ai bien sur essayer avec la valeur puis width:100%; pour #milieu mais du coup ca agit comme si tout passait en % de la page et donc les menus perdent la taille fixe. Quand à la valeur width:auto; ca calle la colonne à la taille du texte, ce que je ne veux pas.

Franchement je suis en panne sèche d'idée.... je galère depuis très longtemps sans comprendre.

Je vous joint le code, si vous avez une solution, je suis preneur.
Merci par avance.

Pierre



<!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; 
		width:80%;
		background:yellow;
	        }

		#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 être supprimé.</div>
	<div id="pied">Pied de page</div>
</div>
</body>

</html>

Modifié par pierr75 (07 Mar 2011 - 15:18)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sa méthode c'est encore pire je n'ai plus une seule colonne qui à la même hauteur ! je serais obligé de mettre une hauteur à taille fixe ce que je ne veux pas sinon je vais avoir des colonnes de différentes tailles ne fonction. du contenu.

Ce que je veux arriver a faire en css mais est ce possible ? : 3 colonnes dont deux à taille fixes et une à 100 % pour la largeur et les 3 de hauteur à 100%.
bonjour,

si tu utilisais un tableau tu ferais:

table {width:100%;}
#gauche, #droit {width:200px;}

avec display:table-cell c'est pareil, il te faut un parent en display:table; et width:100%;.
ex:
<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 être supprimé.</div>
</div>

et le css qui va avec :

#table {width:100%;display:table;}
#gauche, #droit {width:200px;display:table-cell;}


display:table est incompatible avec IE7 et inférieurs.

GC

<edit> pour bien comprendre ce qu'implique display:table sur un div , tester donc un display:block sur un td .</>
Modifié par gc-nomade (07 Mar 2011 - 15:52)
Merci pour ta réponse mais j'ai repris le code que tu proposes ca n'affiche rien du tout.
A moins que tu ne proposes de créer un #table supplémentaire ?

J'avais déjà essayer avec un #contenu {width:100%} ca n'avait pas réglé le pb.
pierr75 a écrit :
Merci pour ta réponse mais j'ai repris le code que tu proposes ca n'affiche rien du tout.

Ben si, ça marche. Testé à l'instant:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Trois colonnes dont colonne centrale fluide</title>
  <style>
  #table {display:table; width:100%;} 
  #gauche, #droit {display:table-cell; width:200px; background:#CCC;}
  #milieu {display:table-cell; background:#EEE;}
  </style>
</head>
<body>
<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 être supprimé.</div> 
</div><!--#table-->
</body>
</html>

J'ai rajouté la troisième ligne de CSS mais chez moi ça marchait déjà sans.

À tout hasard, je rappelle que display:table (et display:table-cell) ne fonctionne pas dans Internet Explorer 7.
Sujet clos
Aller à