Sujet Précédent Sujet Suivant

LE Classique Bas de page (footer

Fermé
snakes14 - 15 mars 2016 à 19:23
 enoch - 16 mars 2016 à 20:11
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
A voir également:

1 réponse

Réponse 1 / 1
enoch
Modifié par enoch le 16/03/2016 à 20:13
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...)
0

Discussions similaires

Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses
tiret du bas
na -
Kahlan2016 -

14 réponses
CHERCHE (_)
gloriano1 -
Utilisateur anonyme -

17 réponses