28173 sujets

CSS et mise en forme, CSS3

[Résolu] Clear : both , oui mais ...

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.

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.

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
Modifié par seby2027 (17 Sep 2007 - 14:40)
seby2027 a écrit :
A noter que ça bug uniquement sur FF et MSIE 7.
En effet sous MSIE 6, cela fonctionne parfaitement Smiley cligne .

En général, ce genre de constat signifie que le «fonctionnement parfait» repose sur un bug d'IE6. Smiley lol

Le bug en question est la mauvaise interprétation de height par IE6, qui l'interprète comme un min-height (sauf si on utilise overflow: auto|hidden|scroll).

Tu as tenu compte de cette spécificité d'IE6 pour div#page, en utilisant un hack CSS (mauvaise idée: mieux vaut utiliser un commentaire conditionnel pour faire les choses proprement... voir la FAQ du forum à ce sujet). Mais tu n'en as pas tenu compte pour div#corps, si j'en crois le code suivant:
div#corps {
	float:left;
	[b][#red]height:525px;[/#][/b]
	width:740px;
}

Et voilà. Smiley smile
C'est dingue comme avec vous tout devient aussi facile.

Effectivement il a fallu que j'ajoutes le hackIE sur la div corps.

Je te remercie pour ta précieuse aide Smiley cligne
Je sais que les hacks ce n'est pas le top, mais en attendant que je trouve mieux (et j'ai trouvé -> utilisation de javascript), donc que je mette ça en place (demain ou après-demain), je préfére utiliser cette méthode. De facto mon site n'est pas bloqué.

Lorsque j'ai ajouté une hauteur minimale à div#corps, cela à tout de suite fonctionné.
Sujet clos
Aller à