Présentation fenêtre fixe - HTML/CSS - Programmation
Marsh Posté le 19-01-2005 à 09:29:20
J'ai essayé comme ça :
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>LinksTest</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body bgproperties=fixed scroll=no>
<div class="top">
En-tête de page
</div>
<div class="middle">
toto
</div>
<div class="bottom">
Pied de page
</div>
</body>
</html>
avec le CSS :
.top
{
height:100px;
}
.middle
{
background-color : #F5F8FC;
MARGIN:0px;
PADDING:5px;
overflow: auto;
SCROLLBAR-FACE-COLOR: #dee7ec;
SCROLLBAR-HIGHLIGHT-COLOR: #DDEEFF;
SCROLLBAR-SHADOW-COLOR: #DDEEFF;
SCROLLBAR-3DLIGHT-COLOR: #035D91;
SCROLLBAR-ARROW-COLOR: #035D91;
SCROLLBAR-TRACK-COLOR: #DDEEFF;
SCROLLBAR-DARKSHADOW-COLOR: #035D91;
}
.bottom
{
Position:absolute;
bottom:0px;
height:100px;
}
Mais le bas de la page passe par dessus le milieu.
Marsh Posté le 19-01-2005 à 09:43:36
Si je le mets en "relative", il ne reste pas collé en bas de la page... Ceci dit, la solution n'existe peut-être pas ! Est-ce possible en informatique ?
Marsh Posté le 19-01-2005 à 09:52:23
normalement, le position absolute bottom 0 est censé fixer l'élément en bas de la page (et non en bas de l'écran), malheureusement Firefox et MSIE sont buggés et placent cet élément au bas (initial) de l'écran et le laissent là, donc en plein milieu de la page.
L'idéal serait peut-être d'utiliser bottom en position absolute et de mettre en place une zone centrale défilante avec overflow et des marges hautes/basses équivalentes aux hauteurs de ton header et de ton footer (positionne le header en absolu)
et accessoirement
Citation : bgproperties=fixed scroll=no |
dégage moi ça stpmerssi
Marsh Posté le 19-01-2005 à 10:14:49
Oui, désolé pour ces artifices qui ne fonctionne que sous IE...
J'ai essayé cela :
.top
{
Position:absolute;
}
.middle
{
background-color : #F5F8FC;
MARGIN-TOP:100px;
MARGIN-BOTTOM:100px;
MARGIN-LEFT:0px;
MARGIN-RIGHT:0px;
PADDING:5px;
overflow: auto;
}
.bottom
{
Position:absolute;
bottom:0px;
height:100px;
}
Je ne sais pas si c'est ce que tu voulais dire, mais cela ne change rien, le bottom passe toujours par dessus le middle lorsqu'on resize la fenêtre, et le middle ne scroll toujours pas...
Marsh Posté le 19-01-2005 à 10:30:02
J'ai (et d'autres aussi) fait des recherches sur ce problème : réponse :
http://forum.hardware.fr/forum2.ph [...] h=&subcat=
http://forum.hardware.fr/forum2.ph [...] subcat=389
Marsh Posté le 19-01-2005 à 11:21:52
Hermes le Messager a écrit : J'ai (et d'autres aussi) fait des recherches sur ce problème : réponse : |
Je t'attendais sur ce coup
Marsh Posté le 19-01-2005 à 11:50:30
Merci beaucoup, je pense qu'il y a tout ce qu'il me faut !
Avec ça, on a de bonnes bases pour faire un site digne de ce nom !!
Marsh Posté le 20-01-2005 à 12:02:43
Masklinn a écrit : normalement, le position absolute bottom 0 est censé fixer l'élément en bas de la page (et non en bas de l'écran), malheureusement Firefox et MSIE sont buggés et placent cet élément au bas (initial) de l'écran et le laissent là, donc en plein milieu de la page. |
C'est pas un bug
C'est parce que le body n'est ni en absolute, ni en relative, et n'a pas non plus de height. Donc un bottom: 0px ne va pas positionner selon le body, mais selon le parent de body, qui n'est d'autres que html. Et html, lui a pour width et height, les dimensions de l'écran. Donc un bottom 0px comme ça va fixer par rapport à l'écran. Pour avoir par rapport à la page, suffit de faire un position relative sur le body
Marsh Posté le 23-01-2005 à 21:24:30
j'ai lu les post cité dessus et les liens proposé un peu partout dans les posts de chacun et j'ai toujours pas compris comment on peut faire une interface avec un header fixe en haut de l'écran, un contenu scrollab' et un footer fixe en bas de l'écran, le tout faisant 700px de large et centré en largeur sur l'écran
ouai moi aussi j'en peux pu, je cherche depuis 3 jours là et j'ai pu de neuronnes pour poursuivre les expérimentations
Marsh Posté le 24-01-2005 à 13:33:31
En fait, t'as un HTML comme ça :
Code :
|
Et le CSS :
Code :
|
Maintenant, cette belle solution a un inconvénient majeur : ca marche pas sous IE
Marsh Posté le 21-04-2008 à 21:28:41
Désolé de répondre trois ans après :-)
J'ai trouvé une solution, elle se trouve ici:
http://leloup.org/wp/?p=32
C'est compatible Firefox, IE6 et IE7, et peut-être d'autres navigateurs, et il n'y a pas une seule goutte de javascript.
Voilà !
Marsh Posté le 18-01-2005 à 16:30:28
Bonjour,
Je souhaiterais créer une interface de base, permettant d'avoir une entête et un bas de page fixe, et entre les 2, la page html contenant les données. Le scrolling ne serait par conséquent pas sur toute la page, mais seulement sur la partie du milieu.
Cette interface doit fonctionner à l'identique quelque soit le browser (IE ou FF), et quelque soit la taille de la fenêtre (> 800/600).
Personnellement, mon problème se situe surtout pour positionner le bas de page.
Merci
Robz