28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement footer en dessous du content

Bonsoir,

j'ai vu un nombre considérable de post parlant des footers, et à chaque fois, j'y retrouve le même code pour mon cas (c'est normal en même temps Smiley smile )

pourtant, mon footer ne veut pas rester en dessous de mon center, mais va se positionner en bas de l'écran, et si je scroll, rester en position fixe jusqu'à se retrouver au milieu de l'écran par exemple (il survole donc le content)

aidez moi! Smiley bawling

côté code :
html, body {
	height: 100%;
	margin: 0;
	background:#ccccdd;
	}
body {
	font: 90% "Trebuchet MS", sans-serif;
  }
div#global {
	min-height:100%;
	height:100%;
	position: relative;
	}
div#header {
	background: #223344 /*url(img/header.jpg) no-repeat*/;
	color: #fff;
	width : 100%;
	height: 101px;
	position: relative;
	}
div#header1 {
	background: #223344 /*url(img/header.jpg) no-repeat*/;
	color: #fff;
	width : 1000px;
	height: 101px;
	margin: auto;
	}
div#center {
	width: 1000px;
	margin: auto;
	margin-top : 10px;
	position: relative;

	}

[...]

div#footer {
	background: #223344;
	color: #fff;
	width:100%;
	position: absolute;
	bottom: 0;
	}
div#footer1 {
	background: #223344;
	color: #white;
	width:1000px;
	bottom: 0;
	margin: auto;
}


<html>

<head>
<title>Snow Production</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="global">
	<div id="header">
		<div id="header1">
			<h1>Snow Production</h1>
			<ul id="menuaccueil"><li>A</li><li>B</li><li>C</li></ul>
		</div>
	</div>
	<div id="center">
		<div id="sidebar">
			<div id="box1">
				<h3>blablalbla</h2>
				<p>tettettettettettettettet tet</p>
			</div>
			<div id="box2"><h3>balblalbalab</h3></div>
		</div>

		<ul id="lastestnews"><li>A</li><li>B</li><li id="test">C</li></ul>

		<div id="content2">
			<h2>deuxieme contentntntnt</h2>
			<p>blbalbllblaa</p>
			<a href="#">aaaa</a>
		</div>
		<div id="content1">
			<h2>article testiale [smile]</h2>
			<p>test test ?</p>
			<img src="img/pedro.gif" />
			<img style="padding:0px 25px 5px 25px;" src="pouet.jpg"/>
		</div>


	</div> <!--div center-->

	<div id="footer">
		<div id="footer1">test</br>re-test footer</div>
	</div>
</div>

</body>

</html>


Merci d'avance,

Cdt.
Modifié par NimS_ (19 Oct 2010 - 01:05)
Salut,

Est-ce possible de voir la page en ligne ?! Ce serait plus simple pour t'aider, et on pourrait voir ce qu'est ton problème.
Je te donne déjà un petit conseil. Ton code CSS, tu peux regrouper certaines parties :
div#footer[b], div#footer1[/b] { 
    background: #223344; 
    color: #fff; 
    width:100%; 
    position: absolute; 
    bottom: 0; 
}


A plus.
Modifié par JuJu57 (18 Oct 2010 - 22:40)
Salut,

hélas non, il n'est pas en ligne, je fais mes tests en local.

Concernant le regroupement de certaines parties :

j'ai séparer mon footer en deux partie pour avoir une bande qui prend 100% de largeur, puis des infos écrites centrées au milieu du footer sur une largeur de 1000px.

dans ce cas précis, je ne pense pas que je puisse regrouper les deux?
Modifié par NimS_ (18 Oct 2010 - 22:55)
le sticky footer n'a pas été une très grande réussite de mon côté, néanmoins, j'ai simplement ajouté un overflow: auto; dans ma <div id="center"> et là c'est bon...

edit : aussi un height: auto !important; dans ma div global...

Smiley eek Smiley confus
Modifié par NimS_ (19 Oct 2010 - 01:06)
Sujet clos
Aller à