Présentation fenêtre fixe

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Présentation fenêtre fixe

robz

www.volumecase.com

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

Publicité

robz

www.volumecase.com

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.

Profil supprimé

met ton bottom en relative

robz

www.volumecase.com

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 ?

masklinn

í dag viðrar vel til loftárása

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

robz

www.volumecase.com

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

Hermes le Messager

Breton Quiétiste

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

Flyman30

Hermes le Messager a écrit :

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

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

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

robz

www.volumecase.com

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

FlorentG

Unité de Masse

Masklinn a écrit :

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

Publicité

Inekman

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

FlorentG

Unité de Masse

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

Code :

<body>
<div id="header">
pouet
</div>
<div id="content">
pouet
</div>
<div id="footer">
pouet
</div>
</body>

Et le CSS :

Code :

body {
width: 700px;
margin: 0px auto;
}
#header {
position: fixed;
top: 0px;
right: 0px;
left: 0px;
height: 70px; // Hauteur désirée
}
#content {
position: fixed;
top: 70px; // Même que la hauteur du header
right: 0px;
left: 0px;
bottom: 70px; // Même que la hauteur du footer
overflow: auto;
}
#footer {
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
height: 70px; // Hauteur désirée
}

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

voleurdecarottes

On peut cogner, chef ?

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

FORUM HardWare.fr

Programmation

HTML/CSS

Présentation fenêtre fixe

Sujets relatifs
lien vers fenetre deja ouverte	[MFC/SDI] Comment changer la className de la fenetre principale?
fermer le navigateur même fenêtre première!	Appel d'une fenêtre de windows ?
Couleur d'une fenetre	[BAT] reduire une fenetre a son lancement
rafraichir une Jpanel dans une fenetre	Detecter la fermeture d'une fenetre
Souris enfermée dans la fenêtre ?	fermer automatiquement une fenetre en ouvrant une autre
Plus de sujets relatifs à : Présentation fenêtre fixe

Page générée en 0.073 secondes