Bonjour à tous,
J'ai le même problème j'en profite donc pour poster dans ce sujet. Après mainte bidouillage et recherche je continue de galérer avec mon bas de page c'est pourquoi je fais appel à vous. Il se trouve que sur Google Chrome le rendu est pas mal et correspond plus ou moins à ce que je voudrai faire. Par contre avec les navigateur mozilla et internet explorer ça le fait pas du tout. Quand la page s'ouvre le "footer" est bien en bas de la page mais dès que je scroll il reste fixe et du coup recouvre le contenu.
Je vous laisse le HTML d'une page et une partie de mon CSS peut être que vous verrez les erreurs que j'ai commise et d'où vient le problème
.
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="moncss1.css">
<link rel="stylesheet" type="text/css" href="cssmediaimages.css">
<title> Mountain World </title>
</head>
<body>
<div id="global">
<div id="titre"> <a href="index.html"><img src="logosite.png" alt="Logo" width="253" height="200" /></a> </div>
<br><br>
<ul id="menu">
<li><a href="index.html">Accueil</a>
<li><a href="mediamain.html">Média</a>
<ul>
<li><a href="mediaimages.html">Images</a></li>
<li><a href="mediavideo.html">Vidéos</a></li>
</ul>
<li><a href="biographiesmain.html">Biographies</a>
<ul>
<li><a href="biographiesski.html">Skieurs</a></li>
<li><a href="biographiessnow.html">Snowboarders</a></li>
</ul>
<li><a href="evenements.html">Evénements</a>
<li><a href="contacts.html">Contacts</a>
</ul>
<div id="contenu">
<h2> <div class="cadre">Biographies Skieurs </div></h2> <br>
<div class="column-layout">
<div><img src="imagebiocandide.jpg" alt="candidethovex" width="175" height="91" />
<br>Candide (texte .....) </div>
<div><img src="imagesbiokevin.jpg" alt="kevinrolland" width="175" height="91" />
<br>Rolland (texte .........) </div>
<div><img src="imagebioedgar.jpg" alt="edgargrospiron" width="175" height="91" />
<br>Edgar Grospiron (texte ...... ) </div>
</div>
</div>
</div>
<div id="outerBasDePage">
<div id="baspage">
<a href="http://www.facebook.com" target="_blank">
<img src="facebook.png" alt="logofacebook" class="logo">
</a>
<a href="http://www.twitter.com" target="_blank">
<img src="twitter.png" alt="logotwitter" class="logo">
</a>
<a href="https://plus.google.com/" target="_blank">
<img src="google-plus.png" alt="logogoogleplus" class="logo">
</a>
</div>
</div>
</body>
</html>
ET MAINTENANT UNE PARTIE DU CSS :
{
margin: 0px;
padding: 0px;
}
h1{
color: #00E102;
font-size: larger;
font-family: sans-serif;
font-style: italic;
text-align: center;
}
h2 {
color : white;
font-size: larger;
font-family : Comic Sans MS;
font-weight: bold;
text-align : center;
}
.cadre {
border : 5px white groove;
width : 400px;
margin : auto;
}
html{ background:url(wallpapersite.jpg) no-repeat;
height:100%;
}
body{height: 100%;
}
#titre, #menu, #contenu, #baspage {
padding:1px 0;
}
#global {
max-width : 960px;
height:100%;
margin : auto;
padding-bottom : 50px;
overflow : visible;
}
#titre {
font-family: fantasy;
text-align: center;
}
#contenu {
margin-top: 20px;
text-align: center;
background: transparent;
color : white;
font-size : medium;
font-family : Comic Sans MS;
width : 100%;
}
#outerBasDePage{
width : 100%;
margin-top : -50px;
height: 50px;
position : absolute;
text-align : center;
}
#baspage {
text-align: center;
background:url(basdepage3.jpg);
color : white;
}
Voilà je vous remercie d'avance et passez une bonne soirée
