Accueil > Forum > > > > Un div sur la hauteur d'une page
 Un div sur la hauteur d'une page
lundi 15 mai 2006 à 16:54:24 |
Un div sur la hauteur d'une page
sschupp
|
Bonjour,
Je fais la mise en page de mon site web et je n'arrive pas à faire ce que je veux.
J'essaye de faire en sorte que certains éléments de ma page soit toujours visible, quelque soit la quantité du contenu.
En gros, j'ai une structure comme ca :
[code]
<div id="en-tete">Mon titre</div>
<div id="corps">Mon contenu</div>
<div id="pied">Mon pied de page</div>
[code]
Je voudrais que l'en-tête et le pied de page soit toujours visible. Donc que si l'on doit défiler, le scroll soit seulement sur "corps".
Petit plus à celui qui me trouve la solution avec le pied de page toujours en bas de la page, pas au milieu dans le cas ou il n'y a quasi pas de contenu.
J'ai essayé de jouer avec les attributs scroll, position et z-index, mais je ne vois pas trop.
Ah vi, j'utilise un CSS externe pour définir mes styles.
Si quelqu'un peut m'aider... [font=Comic Sans MS]Ar Breizh Marsu[/font=Comic Sans MS]
|
|
mercredi 17 mai 2006 à 08:35:46 |
Re : Un div sur la hauteur d'une page
PetoleTeam
|
B
onjour...
Il me semble que le plus simple serait d'utiliser les FRAMES du type...
<FRAMESET ROWS="50,*,50" COLS="*" FRAMESPACING="0" FRAMEBORDER="no" BORDER="no">
<FRAME SRC="titre.htm" NAME="TITRE" scrolling="no" marginwidth="0" marginheight="0" NORESIZE>
<
FRAME
SRC="corps.htm" NAME="COPRS" scrolling="auto" marginwidth="0" marginheight="0">
<
FRAME
SRC="pied.htm" NAME="PIED" scrolling="no" marginwidth="0" marginheight="0" NORESIZE>
</FRAMESET>
...par exemle...
Tu mets tout cela dans un fichier index.htm par exemple...
<HTML>
<HEAD>
...a mettre ici...
</HEAD>
<BODY>
</BODY>
</HTML>
;0)
|
|
mercredi 17 mai 2006 à 08:35:48 |
Re : Un div sur la hauteur d'une page
PetoleTeam
|
B
onjour...
Il me semble que le plus simple serait d'utiliser les FRAMES du type...
<FRAMESET ROWS="50,*,50" COLS="*" FRAMESPACING="0" FRAMEBORDER="no" BORDER="no">
<FRAME SRC="titre.htm" NAME="TITRE" scrolling="no" marginwidth="0" marginheight="0" NORESIZE>
<
FRAME
SRC="corps.htm" NAME="COPRS" scrolling="auto" marginwidth="0" marginheight="0">
<
FRAME
SRC="pied.htm" NAME="PIED" scrolling="no" marginwidth="0" marginheight="0" NORESIZE>
</FRAMESET>
...par exemle...
Tu mets tout cela dans un fichier index.htm par exemple...
<HTML>
<HEAD>
...a mettre ici...
</HEAD>
<BODY>
</BODY>
</HTML>
;0)
|
|
mercredi 17 mai 2006 à 13:20:39 |
Re : Un div sur la hauteur d'une page
sschupp
|
J'aimerai bien, mais la plateforme utiliser ne l'autorise pas (c'est
pour un blog avec Blogger, et faire des frames ca risque d'être dur).
[font=Comic Sans MS]Ar Breizh Marsu[/font=Comic Sans MS]
|
|
mercredi 17 mai 2006 à 15:29:58 |
Re : Un div sur la hauteur d'une page
PetoleTeam
|
Re B
onjour...
Tu peux aussi essayer avec ce qui suit...
<HTML>
<BODY style="text-align:center; margin:0px 0px 0px 0px; background-color:#c08080">
<DIV style="height:10%; background-color:#c0c0f0">
<H1>Ceci est la zone de Titre</H1>
</DIV>
<IFRAME WIDTH="90%" HEIGHT="80%" SRC="lapage.htm">Ici l'iframe</IFRAME>
<DIV STYLE="height:10%;background-color:#c0c0c0">
<BR>Pied de Page
</DIV>
</BODY>
</HTML>
à toi de voir le résultats et d'adapter...
;0)
|
|
mercredi 17 mai 2006 à 15:43:08 |
Re : Un div sur la hauteur d'une page
sschupp
|
Même réponse : l'ensemble de la structure fait partie d'une seule et
même page... Donc la balise <iframe> ne me convient pas non plus.
Doit bien exister un moyen de le faire avec des balises div, non ?
[font=Comic Sans MS]Ar Breizh Marsu[/font=Comic Sans MS]
|
|
mercredi 17 mai 2006 à 16:00:46 |
Re : Un div sur la hauteur d'une page
PetoleTeam
|
Re Re B
onjour...
Aucun problème...
Il suffit de créer 3 <DIV> comme tu l'as fait...
Puis de gérer..
SI scroll de la page ALORS
Replace DIV_Titre en HAUT de la fenêtre...
Replace DIV_Pied en BAS
de la
fenêtre...
FIN SI
Les DIV_Titre et DIV_Pied doivent être déclarés en style="position:absolute" pour pouvoir être "mover".
on s'appui pour ce faire sur l'événement onscroll déclaré par exemple comme suit...
<BODY onscroll="Replace_DIV()"; >
Voila pour le principe de base, pour le code ce sera plus long...
;0)
|
|
mercredi 17 mai 2006 à 17:02:13 |
Re : Un div sur la hauteur d'une page
sschupp
|
A partir de cette idée, j'ai essayé un truc un peu différent.
J'ai assigné à ma <div> du milieu une grande hauteur (1000px), et
j'ai essayé de la réduire pixel par pixel jusqu'à ce que le scroll
disparaisse.
Les 2 autres <div> étant en haut et en bas de la page (pas de l'écran).
Voici ce que ca donne :
resizeDiv (var div, var haut) {
document.body.onScroll() {
haut--;
div.height = haut;
resizeDiv(div, haut);
}
// Si il y a un scroll sur body
// on réduit haut de div d'un pixel
// on appele resizeDiv avec le même div (retailler) et la hauteur - 1
// Sinon rien
}
chercheDiv () {
var mon_div = document.getElementByID('content').getElementByTagName('div')[0];
var haut = mon_div.height;
alert(haut);
resizeDiv (mon_div, haut);
}
window.onload = chercheDiv;
Bien sûr, ca ne marche pas... [font=Comic Sans MS]Ar Breizh Marsu[/font=Comic Sans MS] |
|
jeudi 18 mai 2006 à 09:32:34 |
Re : Un div sur la hauteur d'une page
PetoleTeam
|
H
ello...
L'idée est trés intéressante, c'est bien de ne pas attendre une réponse toute faite...
Je te livre le code suivant qu'il te restes à adapter...
<HTML>
<SCRIPT language="JavaScript">
var NETSCAPE = (navigator.appName == "Netscape");
var H_Fenetre;
var L_Fenetre;
//-------------------
function GetFenetre(){
if( NETSCAPE){
L_Fenetre = window.innerWidth;
H_Fenetre = window.innerHeight;
}
else{
L_Fenetre = document.body.clientWidth;
H_Fenetre = document.body.clientHeight;
}
}
//-------------------------------
function ObjMoveTo( div_, x_, y_){
var Obj = null;
var Arg = arguments;
Obj = document.getElementById(div_).style;
if( Obj){
if( NETSCAPE){
if( Arg[1] != null) Obj.left = x_;
if( Arg[2] != null) Obj.top = y_;
}
else{
if( Arg[1] != null) Obj.pixelLeft = x_;
if( Arg[2] != null) Obj.pixelTop = y_;
}
}
}
//---------------------------
function ObjGetHauteur( div_){
var Obj = null;
var Haut = 0;
Obj = document.getElementById(div_);
if( Obj)
Haut= Obj.offsetHeight;
return( Haut);
}
//----------------------------------
function ObjSetHauteur( div_, haut_){
var Obj = null;
Obj = document.getElementById(div_).style;
if( Obj)
Obj.height= haut_ +"px";
}
//----------------
function Replace(){
var Haut;
var H1 = ObjGetHauteur("TITRE");
var H2 = ObjGetHauteur("PIED");
//-- Récup info fenêtre affichage
GetFenetre();
Haut = H_Fenetre - (H1 +H2);
//-- Redim le DIV Centre et replace les autres
ObjSetHauteur( 'CENTRE', Haut);
ObjMoveTo( "PIED", 0, 0);
ObjMoveTo( "CENTRE",0, H1);
ObjMoveTo( "PIED", 0, H_Fenetre -H2);
}
//-- Ne pas oublier le Redimensionnement
window.onresize=Replace;
</SCRIPT>
<BODY BGCOLOR="#808080" style="margin:0px 0px 0px 0px;" onload="Replace();">
<DIV ID="TITRE" STYLE="position:absolute;left:0px;top:0px;height:50px;width:100%;background-color:#8080c0">Le Titre</DIV>
<DIV ID="CENTRE" STYLE="position:absolute;left:0px;top:0px;height:100px;width:100%;background-color:#8080f0">Le CENTRE</DIV>
<DIV ID="PIED" STYLE="position:absolute;left:0px;top:0px;height:50px;width:100%;background-color:#c0c0c0">Pied de Page</DIV>
</BODY>
</HTML>
je pense que tu devrais tout saisir...
Il te restera éventuellement à jouer avec le style sur le DIV CENTRE pour avoir un scroll...
;0)
|
|
jeudi 18 mai 2006 à 14:27:57 |
Re : Un div sur la hauteur d'une page
sschupp
|
Yes, ca marche ! Merci PetoleTeam ! J'ai touché un peu mon CSS, j'ai sorti le script dans un fichier JS, tout propre.
Par contre, c'est spé, si sur les <div> concernés par le
déplacement il y a des padding, alors ils ne sont pas pris en compte
lors du redimensionnement. Ce qui peut décaler le <div> du bas
hors de la fenêtre (et donc avoir un scroll sur la fenetre). J'ai
contourné le problême en mettant le padding sur les <div> à
l'interieur du <div> a déplacé.
Le résultat est visible sur  [ Lien ]Bon, par contre, ca marche sur Firefox, mais pas sous Konqueror (IE, je ne sais pas, je n'ai pas). Bizarre. [font=Comic Sans MS]Ar Breizh Marsu[/font=Comic Sans MS] |
|
Cette discussion est classée dans : page, contenu, pied, toujours, div
 Répondre à ce message
 Sujets en rapport avec ce message
Editeur de texte en ligne avec des objets dragables [ par calitom ]
Bonjour, Je cherche a faire une page permettant de regroupper plusieurs DIV draggables dans un DIV général. - En gros, il y aurait un DIV général. - E
Affichage du contenu d'une page dans un DIV [ par aloisio11 ]
Bonjour,Je suis dans ma page Article.asp avec ma liste d'articles.Au clique sur un article je voudrais, en Javascript, afficher le contenu d'une page
bas de page plus bas que contenu [ par inaden ]
Bonjour,Je construit ma feuille de style en div positionné en relatif.J'ai un premier div qui est en marge "auto" pour centrer le tout et des div deda
sortir du flux pour positionner mon div en haut [ par attentio ]
bonjour, voila j'ai un code qui me permet d'avoir toujours mon footer en bas de ma page quelque soit le contenu.cela fonctionne tres bien. voici m
Pb de soumission de formulaire php avec jQuery [ par prozenproses ]
Bonjour,Avant toute chose je vous annonce que je travaille sur une "plateforme" AJAX avec jQuery.Mon site se compose en 3 partie : - l'entete : qui re
affichage et modification du contenu d'un div selon choix du bouton [ par halowinnl ]
bonjour, je me décide á vous demander de l'aide, après avoir chercher un solution á mon problème...Je souhaite comme énoncé dans le titre, pouvoir aff
Réinitialiser le contenu dynamique d'une div cachée [ par istella ]
Bonjour, J'ai un niveau débutant en Javascript et php, je dois réaliser une page qui contient des données provenant d'une base de données. Au survol d
div qui suit le scrolling de la page => PETOLETEAM [ par torg33 ]
Bonjour tout le monde, je viens d'intégrer le script de PetoleTeam à mon portfolio et je tiens a dire que c'est tout à fait ce qu'il me faut. Mais (et
Comment rafraichir 3 iframe ? [ par davis22 ]
bonjour dans ce script en bas le contenu des 3 iframe ce change chaque 10 s ! donc moi je veux que le contenu de premier iframe ce change apres 15 s l
ouvrir fermer des div sur une même page css/javascript [ par catejo ]
Bonjour à tous, j'ai un petit problème de script pour activer le deuxieme bouton Pour l'instant seul le premier bouton fonctionne . Que faut-t-il mo
 Livres en rapport
|
Derniers Blogs
 DéMARRONS AVEC LES TASKSDéMARRONS AVEC LES TASKS par richardc
Que vous le vouliez ou non, le développement multi-tâche est maintenant une obligation pour toute nouvelle application. Il est donc vital d'en comprendre les mécanismes et de s'y mettre le plus tôt possible.
En attendant le .NET Framework 4.5 avec le...
Cliquez pour lire la suite de l'article par richardc SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|