28172 sujets

CSS et mise en forme, CSS3

Mise en page css avec display table

bonjour j'essaie de faire une mise en page en utilisant la propriété display: table comme c'est montré sur ce site
je veux 3 lignes (header, main et footer)et la 2eme sera séparé en 2 cellules (nav et section)

ma structure html est

<body >
<div id="conteneur">

	<div id="header">
	<h1>présentation</h1>
	</div>

	<div id="main">
		<div id="nav">
			<ul>
			<li> <a href="page1.html"> page1</a> </li>
			<li> <a href="page2.html"> page2</a> </li>
			
			</ul>
		</div>
	
		<div id="section">
			<p>blabla</p>
		</div>		
	</div>

	<div id="footer">
	<p>copyright </p>
	</div>

</div>
</body>


mon code css est:

#conteneur {display:table;}

#header, #main, #footer {display:table-row;}

#nav, #section{display:table-cell;}


j'ai mis des couleurs de fond pour voir l'espace occupé et il y a un problème la ligne 2 dépasse

pourriez vous me dire mon erreur svp

merci
Es tu certain d'avoir besoin de display table ? Les flottants, c'est bien aussi, car leur rendu est plus prévisible à travers les différents navigateurs.
bonjour,
je souhaite utiliser display:table pour 3 raisons:

1) je viens d'apprendre via ce site que l'on peut les utiliser et qu'apparemment ce sera peut être quelque chose qui va se développer donc je voulais m'entraîner et voir si j'y arrivais : ce qui n'est pas le cas !!!

2) mes blocks semblent décrire un tableau donc ça me semblait assez "naturel"

3) je ne sais pas encore faire des "float" Smiley cligne

merci
Les flottants sont très pratiques, piliers de l'intégration. Je te recommande d'y jeter un oeil avant de t'attaquer aux display table.

Et pourquoi pas te faire aider avec 960gs ou Blueprint Smiley cligne
Salut

Avant toute chose:
quel navigateur utilises tu ? (sachant que le visuel de ton site peut etre différent en fonction de celui ci, utilise tu une feuille de style reset pour mettre a zéro les style par defaut de ces différents navigateurs ?

apres si tu souhaites vraiment utiliser display table et ses derivés, il me semble qu un table-row doit contenir des "table-cell" pour fonctionner correctement, sinon il peut y avoir des petits bug.

a mon avis l erreur viens du fait que dans l entete et le footer tu n'as qu une seule cellule sur la ligne alors que dans le "main" tu as 2 cellules.
comme en css il n existe pas d equivalent au "colspan" des tables, si tu as un nombre different de table-cell par ligne,il te faudra utiliser des l'équivalent de "tables imbriquées"

voici ce que j aurais fait pour ton exemple

<style>
#conteneur{width:600px;}
.table{display:table; background:red;width:100%}
.row {display:table-row; background:blue;}
.cell{display:table-cell; background:green;width:auto;}
/*just to see cell*/
.cell{border:1px #123123 solid;}
</style>
<div id="conteneur" class="table">
	<div id="header"  class="row">
		<div class="cell">
			<h1>1 cell dans 1 ligne</h1>
		</div>
	</div>
	<div class="row">
		<div class="cell">
			<div class="table">
				<div id="main" class="row">
					<div id="nav"  class="cell">
						<ul>
							<li> <a href="page1.html"> cell 1 </a> </li>
							<li> <a href="page2.html"> still cell 1 </a> </li>
						</ul>
					</div>
					<div id="section"  class="cell">
						<p>1 autre cell</p>
					</div>		
				</div>
			</div>
		</div>
	</div>
	<div id="footer" class="row">
		<p class="cell">copyright </p>
	</div>
</div>

Modifié par fredconv (15 Mar 2012 - 10:53)
Sujet clos
Aller à