Présentation fenêtre fixe

Présentation fenêtre fixe - HTML/CSS - Programmation

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

Reply

Marsh Posté le 18-01-2005 à 16:30:28   

Reply

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.

Reply

Marsh Posté le 19-01-2005 à 09:34:40    

met ton bottom en relative

Reply

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 ?

Reply

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
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;


dégage moi ça stpmerssi


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

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...

Reply

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
 
 

Reply

Marsh Posté le 19-01-2005 à 11:21:52    


 
Je t'attendais sur ce coup  :lol: [:aztechxx]


---------------
planuldep | Association pêche à la Sempé
Reply

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 !!

Reply

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 :o
 
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 ;)

Reply

Marsh Posté le 20-01-2005 à 12:02:43   

Reply

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 :'(


Message édité par Inekman le 23-01-2005 à 21:24:49
Reply

Marsh Posté le 24-01-2005 à 13:33:31    

En fait, t'as un HTML comme ça :

Code :
  1. <body>
  2.   <div id="header">
  3.     pouet
  4.   </div>
  5.   <div id="content">
  6.     pouet
  7.   </div>
  8.   <div id="footer">
  9.     pouet
  10.   </div>
  11. </body>


Et le CSS :

Code :
  1. body {
  2.   width: 700px;
  3.   margin: 0px auto;
  4. }
  5. #header {
  6.   position: fixed;
  7.   top: 0px;
  8.   right: 0px;
  9.   left: 0px;
  10.   height: 70px; // Hauteur désirée
  11. }
  12. #content {
  13.   position: fixed;
  14.   top: 70px; // Même que la hauteur du header
  15.   right: 0px;
  16.   left: 0px;
  17.   bottom: 70px; // Même que la hauteur du footer
  18.   overflow: auto;
  19. }
  20. #footer {
  21. position: fixed;
  22.   bottom: 0px;
  23.   right: 0px;
  24.   left: 0px;
  25.   height: 70px; // Hauteur désirée
  26. }


 
Maintenant, cette belle solution a un inconvénient majeur : ca marche pas sous IE :cry:

Reply

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à !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed