Bonjour,
En voulant transformer mes pages HTML 4.01 en XHTML 1.0, je me suis trouvé confronté à un problème concernant le design général des pages. J'utilise les propriétés "overflow:auto" et "overflow:hidden" pour disposer mes blocks sur les pages. Or j'ai découvert que Firefox 1.5 (et peut-être d'autres navigateurs) gère différemment cette propriété en fonction du Doctype, plus précisemment en fonction du mode quirks/standards.
J'ai réalisé la page de test ci-dessous pour exposer le problème, en épurant le code de tout ce qui n'était pas nécessaire.
Alors, voilà ce que je désire faire :
Cette page fonctionne parfaitement bien, à la fois sous FF et sous IE.
Mais, comme vous l'aurez remarqué, le Doctype n'est pas complet, on est donc en mode quirks...
Or, dès que je rajoute l'url (par exemple http://www.w3.org/TR/html4/loose.dtd pour l'HTML 4.01 Transitional), la page ne fonctionne plus, la scrollbar n'apparaît plus !! (au moins sous Firefox, parce que bien évidemment, IE5.5 n'y voit que du feu et continue à bien fonctionner...).
Le même problème se pose avec n'importe lequel des Doctypes (en particulier avec celui de XHTML 1.0, Transitionnal ou pas).
Ma question est donc la suivante :
- existe-t-il une ligne "magique" à rajouter dans le css pour faire marcher ma page en mode "Standards" ?
- ou bien faut-il que je me restreigne à n'utiliser que le mode "Quirks" pour mes pages ?
Remarque : ma mise en page ressemble en gros à un "mix" entre les modèles 13 et 14 disponibles sur Alsa. J'ai un menu fixe à gauche et un header fixe en haut, la grosse différence étant que mon header doit faire 180 px (pas un pourcentage, donc je ne peux pas connaître la hauteur de mon div contenu, qui doit aller jusqu'en bas de la page).
Merci.
Modifié par Mpok (12 Feb 2006 - 18:32)
En voulant transformer mes pages HTML 4.01 en XHTML 1.0, je me suis trouvé confronté à un problème concernant le design général des pages. J'utilise les propriétés "overflow:auto" et "overflow:hidden" pour disposer mes blocks sur les pages. Or j'ai découvert que Firefox 1.5 (et peut-être d'autres navigateurs) gère différemment cette propriété en fonction du Doctype, plus précisemment en fonction du mode quirks/standards.
J'ai réalisé la page de test ci-dessous pour exposer le problème, en épurant le code de tout ce qui n'était pas nécessaire.
Alors, voilà ce que je désire faire :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test overflow</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: Arial,Helvetica,serif;
font-size: 80%;
padding-top: 180px;
overflow: hidden;
}
#scrollcont {
height: 100%;
overflow: auto;
margin-left: 70px;
margin-right: 20px;
border: 1px solid black;
}
p {
margin-bottom: 1.5em;
}
</style>
</head>
<body>
<div id="scrollcont">
<h2>Contenu bidon :</h2>
<p>bla bla bla....</p>
<p>plein de contenu....</p>
<p>etc...</p>
</div>
</body>
</html>
Cette page fonctionne parfaitement bien, à la fois sous FF et sous IE.
Mais, comme vous l'aurez remarqué, le Doctype n'est pas complet, on est donc en mode quirks...
Or, dès que je rajoute l'url (par exemple http://www.w3.org/TR/html4/loose.dtd pour l'HTML 4.01 Transitional), la page ne fonctionne plus, la scrollbar n'apparaît plus !! (au moins sous Firefox, parce que bien évidemment, IE5.5 n'y voit que du feu et continue à bien fonctionner...).
Le même problème se pose avec n'importe lequel des Doctypes (en particulier avec celui de XHTML 1.0, Transitionnal ou pas).
Ma question est donc la suivante :
- existe-t-il une ligne "magique" à rajouter dans le css pour faire marcher ma page en mode "Standards" ?
- ou bien faut-il que je me restreigne à n'utiliser que le mode "Quirks" pour mes pages ?
Remarque : ma mise en page ressemble en gros à un "mix" entre les modèles 13 et 14 disponibles sur Alsa. J'ai un menu fixe à gauche et un header fixe en haut, la grosse différence étant que mon header doit faire 180 px (pas un pourcentage, donc je ne peux pas connaître la hauteur de mon div contenu, qui doit aller jusqu'en bas de la page).
Merci.
Modifié par Mpok (12 Feb 2006 - 18:32)
).
(c'est pour ça qui semble servir a rien) , 100% de quoi se demande les navigateurs, la hauteur que body ou html ont deja atteinte, 0, ou la hauteur de la fenetre du navigateur ?...
Parce que les réponses sont contenues dans tes questions !!
)