Positionnement incorrect de mon footer (il se trouve en haut du site)

Question

beegees

19 Jul 2010 à 20:05

Bonjour tout le monde,

Je crée actuellement un site mais j'ai un problème de positionnement.

Le footer vient se mettre tout en haut de mon site au lieu de se mettre en bas du site.

Voici le code (généré) de la page :

<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Service Galénique - Institut de Pharmacie - Université Libre de Bruxelles (ULB)</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="AJAX/Changer_page.js"></script>
<script type="text/javascript" src="AJAX/xhr.js"></script>
<script type="text/javascript" src="AJAX/Changer_Drapeau.js"></script>
<script type="text/javascript" src="AJAX/Changer_Projets.js"></script>

<!--- jquery Cycle -->
	<style type="text/css">
	#slideshow { position:absolute; top:300px; left:200px; height: 232px; width: 232px; margin: auto }
	#slideshow img { padding: 15px; /*border: 0.5px solid #024a96; background-color: #eee;*/ }
	
    </style>
	
	<script type="text/javascript" src="jquery/jquery_1.4.2.js"></script>
	<script type="text/javascript" src="jquery/cycle.js"></script>
<!--- Fin jquery Cycle -->

<script type="text/javascript">
$(document).ready(function() {
    $('#slideshow').cycle({
				fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
				});
});
</script>
</head><div methodname="log" firebugversion="1.5.2" style="display: none;" id="_firebugConsole"></div><body onload="Changer_page('FR','index.php');">
<div id="site">	<div id="header">

			<!--<img src="images/appareillage.jpg"  />-->
	</div>
    <div class="home">
        <a href="#" onclick="Changer_page('FR','index.php')" class="home">Accueil</a>	
	</div>

	<div class="langues">
        <a class="langues" onclick="Changer_drapeau('FR'); Changer_page('EN','index.php');">English version</a>    
	</div>

    <div id="nav">
  		<div class="btn"><a href="#" onclick="Changer_page('FR','equipe.php')" class="btn">équipe</a></div>
        <div class="btn"><a href="#" onclick="Changer_page('FR','projets.php')" class="btn">projets</a></div>
        <div class="btn"><a href="#" onclick="Changer_page('FR','collaborations.php')" class="btn">collaborations</a></div>
        <div class="btn"><a href="#" onclick="Changer_page('FR','appareillage.php')" class="btn">appareillage</a></div>
        <div class="btn"><a href="#" onclick="Changer_page('FR','theses.php')" class="btn">thèses</a></div>

        <div class="btn"><a href="#" onclick="Changer_page('FR','publications.php')" class="btn">publications</a></div>
        <div class="btn"><a href="#" onclick="Changer_page('FR','brevets.php')" class="btn">brevets</a></div>
    </div> 
	<div id="contenu">
		<div id="slideshow" align="center">
		<img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 452px; height: 384px;" src="images/index/Nath_HPLC.jpg">
		<img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 430px; height: 384px;" src="images/index/Nath2.jpg">
		<img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 452px; height: 410px;" src="images/index/MrAmighi.jpg">		
	</div>

	<div id="adress">
		Institut de Pharmacie<br>
		Campus de la Plaine<br>
		Boulevard du Triomphe<br>
		1050 Bruxelles<br>
		Bâtiment BC, 6ième étage, CP 207<br>

	</div>	
	
	<div id="footer">
		<p>Copyright © 2010 Service de Galénique (U.L.B.). Designed by <a href="http://www.steny.be">DD</a>.</p>
	</div>
	</div></div>
   
</body></html>

Voici le code CSS de mon site :


* {	height:auto; width:auto; padding:0px; margin:0px; }
body { margin:0px;  font-family:arial;}

#site { width:900px; height:600px; margin:0 auto; }
#header { height:200px; width:900px; position: absolute; z-index:1;}
.home {  height:17px; width:100px; position: absolute; z-index:2; padding:8px 0 0 24px; text-transform:uppercase; font-size:10px; }
a.home { top:130px; left:11px; text-decoration:none; color:#8ebb3a; background:url(images/home.png) no-repeat left; }
a.home:hover { text-decoration:none; color:white; background:url(images/home_h.png) no-repeat left; } /*au survol de home, ça devient blanc*/

.langues {  height:17px; width:100px; position: absolute; z-index:2; padding:8px 0 0 24px; text-transform:uppercase; font-size:10px; }
a.langues { top:160px; left:760px; text-decoration:none; color:#8ebb3a; cursor:pointer; background:url(images/drapeau-anglais_vert.png) no-repeat left; }
a.langues:hover { text-decoration:none; color:white; } /*au survol de home, ça devient blanc*/

.langues_fr {  height:17px; width:100px; position: absolute; z-index:2; padding:8px 0 0 24px; text-transform:uppercase; font-size:10px; }
a.langues_fr{ top:160px; left:760px; text-decoration:none; color:#8ebb3a; cursor:pointer; background:url(images/drapeau_francais.jpg) no-repeat left; }
a.langues_fr:hover { text-decoration:none; color:white; } /*au survol de home, ça devient blanc*/

#nav {  height:45px; width:870px; text-transform:uppercase;  font-size:10px; position: absolute; top:200px; margin-left:15px;}
.btn { height:29px; text-align:center; float:left;  }
a.btn {  text-decoration:none; width:118px; color:black; padding-top:9px; margin:0px 3px; }
a.btn:hover { text-decoration:none; color:#578e33; background:url(images/btn_h.jpg) no-repeat center; }
.btn_activ { background:url(images/btn_activ.jpg) no-repeat; height:29px; width:118px; padding-top:9px; text-align:center; color:white; float:left; margin:0px 3px;  }
#contenu { width:840px; top:750px; height:auto;}
#homme_medicament { position:absolute; top:300px; left:250px; text-decoration:none; float:left; }
#adress {position:absolute; top:350px; left:700px; text-decoration:none; float:left; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#598e1c; font-size:24px;}
#projects{ position:absolute; width:840px; top:250px; height:auto;}
p{ font-weight:bold; padding-top:3px; color:#999999;}
h1{ color:#90b83d; padding:5px; text-align:center; border-color:#3333CC;}
h2{ color:#024a96; padding:10px;}
.img_droite{ float:right; padding:5px;}
.img_gauche{ float:left; padding:5px;}
#publications{position:absolute; width:840px; top:250px; height:auto;}
li{font-weight:bold; padding-top:3px; color:#999999;}
#brevets{position:absolute; width:840px; top:250px; height:auto;}
#theses{position:absolute; width:840px; top:250px; height:auto;}
#collaborations{position:absolute; width:840px; top:250px; height:auto;}
.tableau{}
#appareils{
	position:absolute;
	width:840px;
	top:250px;
	height:auto;
	left: 225px;
}
.stop_css{ clear:both }
.par_court{ width:60%}
.blue{ color:#024a96; font-weight:bold;}
#footer
{
	clear:both;
	background-color:#4b8426;
	width:900px;
	
	margin-left:auto;
	margin-right:auto;
}
.tab_equipe{position:absolute; width:900px; top:250px; height:auto;}
.tab_photos{ padding:12px; margin:12px; border:0px; text-align:center;}
.fonction{ color:#518a21;}

Et voici l'adresse du site :

http://164.15.112.38/ULB-GALENIQUE/

J'espère que ce problème pourra être résolu Smiley confus

Merci d'avance.

beegees

pchlj

19 Jul 2010 à 22:39

bonsoir

bon vite fait à la louche...

tu ne ferme pas le div du slideshow... à la fin des images

et je dirai que tu as un fin de div en trop tout à la fin...

à vérifier donc
Modifié par pchlj (19 Jul 2010 - 22:39)

Jvtanguy

20 Jul 2010 à 03:08

Bonjour,
Au vu du code css, on peut aussi remarquer des position: absolute presque partout.
Cela a pour conséquence de sortir 90% des éléments de la page du flux. Le footer n'étant pas positionné de la même façon (il n'a pas de position: absolute; il reste donc dans le flux), il se retrouve en haut car le flux de la page le positionne à cet endroit.

Essaie de voir si tu peux modifier le code css afin de retirer ces position:absolute là où ils ne sont pas nécessaires. Un petit tour sur ce tutoriel pourra t'aider à comprendre la notion de flux.

En espérant que cela puisse t'aider

beegees

20 Jul 2010 à 08:05

Bonjour,

Merci à vous deux pour vos réponses.

Vous avez tous les deux raisons.

@ pchlj :

Je vais ajouter les balises manquantes (et en supprimer si nécessaire), merci pour l'aide.

@Jvtanguy :

Tu as raison, 90% de mon positionnement est absolu, l'affichage est donc tout à fait normal.

Je vais essayer d'y remédier, en espérant que cela fonctionnera.

Autrement, est-il possible d'obtenir un alignement en dessous d'une certaine div ?

Exemple :

Je voudrais que footer soit juste en dessous (centré) de la div adress ?

Encore merci pour l'aide.

beegees

Mikachu

20 Jul 2010 à 09:44

Salut,

Peut-être que tu peux t'inspirer des gabarits d'Alsacréations. Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

Positionnement incorrect de mon footer (il se trouve en haut du site)