LE Classique Bas de page (footer
snakes14
-
enoch -
enoch -
Bonjour à tous,
Je suis jeune étudiant et il se trouve que j'ai un TD création de site web. Seulement voilà 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
Je suis jeune étudiant et il se trouve que j'ai un TD création de site web. Seulement voilà 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
A voir également:
- LE Classique Bas de page (footer
- Impossible de supprimer une page word - Guide
- Windows 11 affichage classique - Guide
- Numéro de page word - Guide
- Imprimer tableau excel sur une page - Guide
- Page d'accueil - Guide
1 réponse
Salut,
position : absolute;
ça veut dire ce que ça veux dire. Donc l'élément <div id=outerBasDePage> est situé en position absolue à -50 pixel du haut de la page(valeur fixe, pas du haut de la fenêtre du navigateur, il faut utiliser position:fixed; pour ça ).
Vous y gagnerez en clarté en utilisant HTML5, il y a une balise à cet effet:
<footer>
et tout les div sont remplacés par des élements indiquant leur utilité(nav, main, section, article...)
position : absolute;
ça veut dire ce que ça veux dire. Donc l'élément <div id=outerBasDePage> est situé en position absolue à -50 pixel du haut de la page(valeur fixe, pas du haut de la fenêtre du navigateur, il faut utiliser position:fixed; pour ça ).
Vous y gagnerez en clarté en utilisant HTML5, il y a une balise à cet effet:
<footer>
et tout les div sont remplacés par des élements indiquant leur utilité(nav, main, section, article...)
