28172 sujets

CSS et mise en forme, CSS3

Cakephp css

Bonjour,
voila je suis soumis a un soucis de logique je pense!

Je développe actuellement un site sous cakePhp, et j'ai un soucis avec mon css!
Je m'explique, je souhaiterai un site avec un header contenant logo, menu du site,
un content contenant mes pages, et un footer.

Voici la structure html

<body>
	<div id="container">
		<div class="header">
			<div class="wrap">
				<a href="/" class="logo" id="logo">
				</a>
				<ul class="menu">
					<li>...</li>
					<li>...</li>
					<li>...</li>
				</ul>
			</div>
		</div>
		<div class="top">
			<div class="wrap">
				<h1>titre page</h1>
			</div>
		</div>
		<div id="content">
			<div class="corps wrap">
                            ....contenu des pages .....
			</div>
		</div>
		<div id="footer">
			<div id="footer_1"></div>
			<div id="footer_2"></div>
			<div id="footer_3"></div>
		</div>
	</div>
</body>


Comme le contenu n'est pas toujours de même taille.... parfois je me retrouve avec mon footer en plein mileu de l'écran!

Voici le css:

@charset "utf-8";

* {
	margin:0;
	padding:0;
}

/** General Style Info **/
body {
	color: #fff;
	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
	font-size:90%;
	margin: 0;
	background-image: url('../img/background.jpg'); 
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	-moz-background-size: cover;
	height:100%;
	width: 100%;
	position: absolute;
}
#container {
	text-align: left;
	height: 100%;
	position: relative;
	background-color:black;
}
#content{
	background-color:blue;
	position: relative;
	overflow: auto;
}
#footer {
	background-color:red;
 	position: relative;
	height: 175px;
	text-align: center;
	margin-bottom: 0;
}
.header{
	background-color:green;
}
.header .wrap{
	height: 50px;
}


Comment dois je faire, j'ai tellement bidouillé que je ne sais plus comment faire et je m’emmêle les pinceaux!

Merci
Modifié par duff_john (10 Sep 2012 - 20:49)
Salut,
Je vois 2 solutions y en a peut être d'autres.

La simple. Tu peux fixer une hauteur minimum de contenu qui te permettra de ne pas avoir le footer en milieu de page si tu n'as que 2 ligne de contenu.

#content {
  min-height: 350px;
}


La moins simple. La c'est de tete, c'est donc plus une idée générale que une solution toute faite.
Tu peux aussi fixer ton container a 100% en hauteur avec un padding-bottom de la hauteur de ton footer. Tu le positionne en "relative".
A l'interieur de ton container tu mets ton footer. et tu le met en position "absolute" et bottom à 0. Ca devrait suffire à garder ton footer toujours en bas de ta page quelque soit le contenu de ta page.

#container {
  height:100%;
  position: relative;
  padding-bottom: 150px;
}
#footer{
  height:150px;
  position:absolute;
  bottom: 0;
}

Modifié par guetweb (02 Oct 2012 - 15:31)
Ouais mais dans un cas comme dans l'autre le footer ne sera jamais en bas de page :s
Du moins il ne sera pas "toujours" en bas de page.

:s
Non pas vraiment, il faudra scroller pour atteindre le footer non?

En tout cas merci déjà pour ces réponses Smiley smile
Modifié par duff_john (02 Oct 2012 - 15:38)
Sujet clos
Aller à