28172 sujets

CSS et mise en forme, CSS3

Header, table-cell(content/aside) et sticky footer

Bonjour,

Après avoir cherché (peut-être mal) sur le forum et sur google Smiley langue , je persiste avec mon problème, je m'explique. J'essaye de faire une page web constitué de:

1 Header
1 menu de navigation
1 bloc de contenu et 1 bloc sur le côté (avec des table-cell)
1 footer (qui « stick » le bas de la page)

J'ai essayé de procéder uniquement avec des table et table-celle mais le problème avec cette solution vient qu'au moment ou je défini une table-row contenant 2 table-cell (content/aside) possédant chacun une certaine largeur, les autres éléments table-row situés au dessus et en dessous (soit en gros le header et le footer) n'occupe que la largeur du premier table-cell(content).

J'ai donc essayé de procéder différement en utilisant uniquement les table-celle pour faire la partie content/aside. Le header étant dans le flux normal.
Mon problème est que dans cette situation j'arrive à placer et dimensionner le header, le menu de navigation et le tableau mais que je n'arrive pas à avoir un « sticky footer » en utilisant la technique de mettre le body par exemple en "position: relative" et le footer en "position: absolute;left:0;right:0;bottom:0" afin qu'il soit placé en bas à gauche du body et qu'il prenne toute la largeur.

Que puis-je faire???

Voici en gros le code HTML
<body>
		<div id="wrapper">	
			<div id="header">
				<div id="nav">
					
				</div> 
			</div>
			<div id="main">
				<div id="content">
					
				</div>
				<div id="aside">
					
				</div>
			</div> 
		</div>	
		<div id="footer">
			
		</div>		
	</body>

Et le CSS:
html, body {
	height:100%;
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	min-height: 100%;
}



#header {	
	min-height: 150px;
	background : url(../img/mon_background.png) repeat-x;
	/*border: 1px solid red;*/
}



/* ---------------------------- */
/*  ==		Main      	    */
/* ---------------------------- */
#wrapper{
	height: 100%;
	
}
#main {
	display: table;
	height: 100%; /* Je ne sais pas ce qu'il faut specifier pour gerer la situation !!!! */
	width: 960px;	
	margin: 0 auto; 
	padding-bottom: 10px; 
	border: 1px solid black;
}

#content {
	display: table-cell;
	width: 66%;
	background: green;
	/*border: 1px solid green;*/
}

#aside {
	display: table-cell;
	background: yellow;
	/*border: 1px solid yellow;*/
}



/* ---------------------------- */
/*  ==		Footer	    */
/* ---------------------------- */

#footer {	
	position: absolute;
	height: 110px;
	left: 0; 
	right: 0;
	bottom: 0; 
	background: red;
	/*border: 1px solid purple;*/	
}


J'ai mis des background et des border pour voir le comportement global.
Suis-je obliger d'utiliser des blocs en "float" pour ma partie content/aside pour pouvoir utiliser le système avec un overflow et avoir un sticky footer ? Ou dois-je plutôt mettre mes blocs content/aside en "inline-block". Je pensais pouvoir utiliser un système de table-cell pour gérer mon contenu cela paraissant bien pratique au niveau du dimensionnement et des alignements Smiley smile (j'ai regardé pas mal d'exemple sur le site ie7nomore pour essayer de comprende au mieux mon problème)
Merci d'avance pour votre aide !
Modifié par Eightkiller (20 Sep 2012 - 21:00)
Bonsoir,

c'est toujours hasardeux de melanger display:table relative et absolu.

Alors autant partir sur l'une ou l'autre des 2 techniques formatage de la page façon tableau ou sticky footer en absolu.

Pour le formatage en tableau, colspan et rowspan ne sont pas implémentée en CSS (et ne le seront probablement jamais), Il te faut alors imbriquer des faux tableaux dans des faux tableaux (LOL , c'est bientôt le jour d'avant le W-E) et espérer que chaque navigateur jouera le jeux (pour le height:100% des faux tableaux imbriqués).

exemple qui passe dans FF/chrome 21 sous W7 (et sans plugin divers et variés) : http://dabblet.com/gist/3757664

Cdt,
GC
Merci pour vos réponses, j'ai continué en partant sur ce principe mais malheuresement mon design n'est correctement interprété que sur Firefox (15), je ne comprend pas pourquoi, si vous pouviez m'aider si vous avez un peu de temps, regardez le rendu sur ie/firefox/chrome, le tableau principal se retrouve centré au milieu de la page sous Chrome (21), et la ligne contenant les 2 cell "content/aside" n'occupe pas du tout toute la hauteur sous IE(9), je ne sais pas pourquoi ni quelle propirété influ dessus (je n'ai testé que sous ces navigateurs pour l'instant, essayant de faire un prototype pour ensuite voir les différences d'interprétations une fois celui-ci correctement codé). J'ai carrément enlevé la partie "#header-inside" mais le problème persiste, je ne suis pas encore très à l'aise avec le positionnement type "table css" il semble lol. Pourtant, je n'ai pas l'impression d'avoir fait quelque chose d'illogique. Les navigateurs ne semblent pas « jouer le jeu » pour le "height: 100%" des faux tableaux imbriqués :s lol

Merci d'avance Smiley biggrin

Voici le code associé:

<body class="table">
		<div id="header" class="row">
			
			<div id="header_inside">
				<a href="lien_vers_mon_site" accesskey="1" title="Titre de mon site">
					<img id="logo" alt="Accueil - MonSite" 
						src="lien_vers_mon_image_logo.png" 
						width="309" height="56">
				</a>
				<div id="nav" class="table">
					<a href="#">lien</a>
					<a href="#">lien</a>
					<a href="#">lien</a>
					<a href="#">lien</a>
				</div> 	
			</div>			
		</div>
		<div id="wrapper" class="row">	
			<div id="main" class="table">
				<div id="content" class="cell">
					<p>Content</p>
				</div>
				<div id="aside" class="cell">
					<p>Aside</p>
				</div>
			</div> 
		</div>	
		<div id="footer" class="row">
			<p>footer</p>
		</div>		
	</body>


Et le CSS:

html, body {
	height:100%;
	margin: 0;
	padding: 0;
}

body {
	display:table;
	min-height: 100%!important; /* important to rawake webkit ? */;
	border-collapse:collapse;
	
	/* fake column for opera and others */
	background:linear-gradient(0,green 0%, green 66%, yellow 66%, yellow 100%); 
}



/* ---------------------------- */
/*  ==		Header				*/
/* ---------------------------- */




#header {	
	height: 150px;
	background : url(../img/mon_fond_pour_le_header.png) repeat-x;
	border: 1px solid red;
}

#header_inside{
	position: relative; /* Referent pour positionner le menu de navigation */
	width: 960px;
	margin: 52px auto 0 auto; /* centre le contenu du header et le decale vers le bas */
	border: 1px solid green;
}
#header_inside > a {
	display: block;
	width: 309px;
	padding-left: 20px;
	border: 1px solid red;
	
}

#nav {
	position: absolute; /* Le menu est positionne a moitie sur le header et a moitie au dessus du content/aside, en etant hors du flux */
	z-index:1; /* passe en foreground */
	width: 200px;
	height: 50px;
	bottom: -60px;
	right: 60px;
	border:1px solid blue;	
	
}


/* ---------------------------- */
/*  ==		Main	       */
/* ---------------------------- */

#main {	
	width: 960px;	
	margin: 0 auto; /* Permet de centrer la partie content/aside du site, apres avoir defini une largeur*/	
	/*border: 1px solid black;*/
}

#content {
	width: 66%;
	background: green;
	/*border: 1px solid green;*/
}

#aside {	
	background: yellow;
	
}



/* ---------------------------- */
/*  ==		Footer	*/
/* ---------------------------- */

#footer {	
	height: 110px;
	background: red;
}

.row   {display:table-row;}
.cell  {display:table-cell;}
.table {display:table;width:100%;height:100%;}

Modifié par Eightkiller (21 Sep 2012 - 11:56)
Sujet clos
Aller à