Bonjour à tous !
débutant en css, j'ai un problème de footer sur mon site.
après plusieurs jours de recherche sur la toile et bien entendu ici sur le forum, je n'ai pas réussi à trouver ce qui cloche dans mon code;
Je souhaiterais que mon footer soit "coulissant", qu'il soit donc collé au bas de mon contenu, quelque soit la dimension de la page.
Quelqu'un aurait-il une idée de l'erreur que j'ai commise ?
Ma page html :
ma feuille de style :
Par ailleurs, google chrome mouline pour charger cette page, et je suis quasiment certain que ça vient de mon code...
Une idée ?
Merci d'avance
débutant en css, j'ai un problème de footer sur mon site.
après plusieurs jours de recherche sur la toile et bien entendu ici sur le forum, je n'ai pas réussi à trouver ce qui cloche dans mon code;
Je souhaiterais que mon footer soit "coulissant", qu'il soit donc collé au bas de mon contenu, quelque soit la dimension de la page.
Quelqu'un aurait-il une idée de l'erreur que j'ai commise ?
Ma page html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Kimeyra.com : Musique sur mesure - Gestion multimedia</title>
<link rel="stylesheet" href="style2.css" type="text/css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[if lte IE8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
</head>
<body>
<header>
<div id="tete"></div>
<div id="kimeyra"></div>
</header>
<div id="page">
<ul id="menu_horizontal">
<li><a href="#" title="accueil">accueil</a></li>
<li><a href="#" title="musique">musique</a></li>
<li><a href="#" title="medias">medias</a></li>
<li><a href="#" title="print">print</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
<div id="global">
<div id="cadre"></div>
<div id="sous_cadre">
<div id="pieds"></div>
<div id="content"></div>
</div><!-- fin sous_cadre -->
</div><!-- fin global -->
<footer>
<div id="footer"></div>
</footer>
</div><!-- fin page -->
</body>
</html>ma feuille de style :
@charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
color:#FFF;
background-color:#000;
}
@font-face{
font-family: 'moolboran';
src: local('moolbor'), url('fonts/moolbor.ttf');
}
h1{
font-family : 'moolboran' , Arial, Sans-Serif;
}
header {
position:relative;
margin:auto;
width:930px;
}
#page {
height:auto;
position:relative;
margin: auto;
width: 930px; /* largeur obligatoire pour être centré */
}
footer {
position:absolute;
width:930px;
margin:auto;
margin-bottom:0;
}
#footer {
height:40px;
position:absolute;
margin:auto;
width:930px;
background:url(images/bottom.jpg);
bottom:0px;
}
#global {
height:auto;
position:absolute;
padding-bottom:40px;
margin-top:0px;
width: 930px; /* largeur obligatoire pour être centré */
}
#tete {
position:absolute;
background:url(images/tete.jpg);
width:263px;
height:111px;
margin-left:0px;
margin-top:39px;
}
#kimeyra {
position:absolute;
background:url(images/kimeyra_logo.jpg);
width:223px;
height:58px;
right:0px;
margin-right:0px;
margin-top:39px;
}
#cadre {
position:absolute;
background:url(images/cadre.jpg);
width:930px;
height:350px;
margin-top:150px;
}
#sous_cadre {
position:absolute;
width:930px;
margin-top:500px;
}
#pieds {
position:absolute;
background:url(images/pieds.jpg);
width:263px;
height:183px;
margin-top:0px;
}
#content {
position:absolute;
width:667px;
background-color:#000;
margin-top:500px;
right:0;
}
ul {
padding:0;
margin:0;
}
ul#menu_horizontal {
position:absolute;
right:0px;
margin-top:123px;
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
/* Je sélectionne les <li> du menu horizontal */
ul#menu_horizontal li {
display : inline;
padding : 0 0.3em; /* Pour espacer les boutons entre eux */
font-size: 1.4em;
font-family:moolboran;
color:#996600;
font-variant: small-caps ;
letter-spacing:2px;
text-decoration:none;
}
ul#menu_horizontal a {
color:#996600;
font: 1.3em "moolboran";
font-variant: small-caps ;
text-decoration:none;
padding : 0 0.5em;
}
ul#menu_horizontal a:hover {
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
font-size: 1.3em;
font-family:moolboran;
color:#FFCC00;
font-variant: small-caps ;
text-decoration:none;
}
Par ailleurs, google chrome mouline pour charger cette page, et je suis quasiment certain que ça vient de mon code...
Une idée ?
Merci d'avance
