Bonjour à tous,

J'ai tenté de modifier mon design pour améliorer sensiblement la navigation dans mon site Web.

Au lieu de forcer le navigateur à incruster une deuxième barre de défilement au cas où la page serait trop grande, j'ai mis une valeur minimale pour la hauteur de ma div.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#page
{
height: 420px;
width: 680px;
padding-top: 30px;
background: #FFFFFF;
padding-left: 30px;
padding-right: 30px;
color: #660033;
font-size: 1.2em;
}
html>body #page {
height: auto;
min-height: 420px;
}
Lorsque le contenu de la page est infèrieur à 420px, c'est nickel.
En revanche, lorsque celui-ci dépasse les 420px, le contenu passe sur le footer.
Or je désirerai que le footer s'abaisse tout simplement.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
div#footer
{
height : 25px;
width : 900px;
background-image: url("images/footer.jpg");
background-repeat: no-repeat;
text-align: center;
font-family: "Century Gothic", Verdana, Arial, serif; /* On essaie d'avoir Century Gothic en priorité, à défaut on obtiendra Verdane et ainsi de suite. Serif est une police présente sur TOUS les ordinateurs */
font-weight : bold;
font-size : 1.1em;
color: #660033;
clear : both;
}
Pour cela j'utilise la propriété clear : both mais cela ne donne rien.

Auriez-vous une idée ?

Lien pour exemple