Positionner un div en bas du navigateur

Positionner un div en bas du navigateur - HTML/CSS - Programmation

Marsh Posté le 12-02-2008 à 11:13:05    

Bonjour,
Je souhaite afficher un div "popup" périodiquement pour afficher qq infos dedans, infos générées dynamiquement provenant d'un BD (c'est juste pour dire que la taille en hauteur du div est variable, en largeur, je l'ai fixée) et obtenues par une requête ajax. j'utilise script.aculo.us pour faire l'effet d'apparition et placer le div sur le côté droit du navigateur mais j'ai un pb pour le placer en hauteur.
En effet, la taille de ma page web est variable et peut s'étendre sur plusieur "écrans" en hauteur (comprendre, l'utilisateur doit scroller verticalement). Ce que je voudrais, c'est que ma div se place toujours en bas de la fenêtre du navigateur web et non pas de la taille de ma page web (afin de faire un effet de "notification", comme si le div provenait de la barre de statut du navigateur).
Sou IE, ça marche bien comme je veux, mais sur firefox, non. Si ma page web fait moins d'1 écran, c'est ok. Si elle fait plus et que l'utilisateur n'a pas scrollé, c'est ok aussi. Mais si elle fait plus et que l'utilisateur a scrollé alors le div va se positionner trop haut et l'utilisateur ne verra pas le div (sauf s'il remonte).
 
Je précise que mon div est bien positionné en absolute et que je l'ai inséré par JS en tant que noeud enfant du body.
 

Code :
  1. #DialogPopupPluginArea {
  2.   width: 150px;
  3.   background: #ebebff;
  4.   border: 1px solid #000084;
  5.   padding-top: 0;
  6.   position: absolute;
  7.   right: 10px;
  8.   bottom: 10px;
  9. }


Message édité par rufo le 12-02-2008 à 11:32:25

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 12-02-2008 à 11:13:05   

Reply

Marsh Posté le 12-02-2008 à 13:56:47    

si je ne m'abuse pour ce type d'alignement tu devras ajouter du javascript à la sauce pour que ça prenne. J'avais fait un script similaire pour centrer une boite au milieu d'un écran lorsqu'on scrolle :
 

Code :
  1. function popupAlignMiddle(){
  2. var boite = document.getElementById('boite');
  3. var newTop = document.body.scrollTop + document.documentElement.scrollTop + (document.body.clientHeight + document.documentElement.clientHeight) / 2;
  4. boite.style.top = newTop + 'px';
  5. }

Reply

Marsh Posté le 12-02-2008 à 18:14:50    

Euh, sinon il y a aussi l'attribut: "position: fixed", qui se réfère à la fenêtre du navigateur et non au document. En mettant ensuite les attributs right et bottom, ton div sera toujours calé en bas à droite de la fenêtre (quel que soit sa taille).
 
Bon évidemment IE6 vient foutre la merde comme à son habitude. IE7 est correct (Edit: avec un rendu en mode "compliance" évidemment).


Message édité par tpierron le 12-02-2008 à 18:15:53
Reply

Marsh Posté le 13-02-2008 à 14:34:12    

tiens, j'y pensais plus à fixed. Effectivement, ça me paraît pas mal. Je vais tester ça pour FF, sachant que la solution que j'ai faite fonctionne correctement pour IE6.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

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