Barre fixe comme sur Facebook

Utilisateur anonyme -  
 younes -
Bonjour,
Je voudrais créer une barre comme il y en à sur facebook. Il s'agit d'une simple bar qui reste fixé en bas de la page même si ont déssend la page.Je pense qu'il faudrait utilisé une Iframe avec du css pour l'indiquai qu'il faut resté en place.

Si quelqu'un à une idée ou un lien.
Merci, Lucas
A voir également:

9 réponses

gaerebut Messages postés 1017 Date d'inscription   Statut Membre Dernière intervention   171
 
Salut

#div{
   position: fixed;
   width: 100%;
   height: 30px;
   left: 0px;
   bottom: 0px;
  background: #E5E5E5;
}


A+

Gaerebut
20
Eastchild Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   31
 
Ce code fonctionne avec tous les navigateurs sauf IE. Il faut faire un autre css que pour IE et, à la place de ce qu'à donner gaerebut, mettre :

#div{
    position : absolute;
    top : expression( ignore = - this.offsetHeight + document.documentElement.clientHeight + document.documentElement.scrollTop + "px" );
   width: 100%;
   height: 30px;
   left: 0px;
   background: #E5E5E5;
}
0
MESSINOU, le petit messin
 
Bonjour,

La barre (sous forme de div) que je viens de mettre sur le site http://messinou.euro.st (http://46.235.182.142/essai/site.html futur www.messinou.fr) fonctionne sous les divers navigateurs de tests...

div.barre-bas{
background : #f0f0f0;
height : 40px;
position : fixed;
bottom : -10px;
width : 100%;
left : 0;
overflow:hidden;
}

Bonne chance à tous les internautes...
0
Lostmen
 
Y'a la réponse ici :

http://anarchistcode.wordpress.com/2012/03/29/une-barre-fixe-comme-sur-facebook/

De rien !
11
Apatik Messages postés 5304 Date d'inscription   Statut Contributeur Dernière intervention   782
 
Je me souviens que c'est faisable juste avec les propriétés CSS. Regarde du coté de "fixed" Appliqué à un id, je crois que c'est un truc dans ce goùt là.
2
NookZ Messages postés 2138 Date d'inscription   Statut Membre Dernière intervention   514
 
Il y a le "position : fixed" en CSS qui fait ça mais il me semble qu'il n'est pas reconnu par tous les navigateurs donc ça dépend
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ICIoBRa
 
Salut,

<div style="position:fixed;bottom:0"></div>
1
Apatik Messages postés 5304 Date d'inscription   Statut Contributeur Dernière intervention   782
 
ça.. c'est ton code après. Le CSS s'applique au au bloc <div> a toi d'en écrire le contenu :)
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

{position:fixed;} ne fonctionne pas sous IE.

tu peux créer un <div id="barre"> dans <body> et lui attribuer
div#barre{
position:absolute;
bottom:0;
}

ça devrait fonctionner mais il faut sans doute l'adapter en fonction du contexte.
dis-nous si ça fonctionne !

pour ajouter du contenu à la barre il suffit d'ajouter du contenu au <div>…

<edit>
un exemple fait pour une question semblable.
</edit>
0
NookZ Messages postés 2138 Date d'inscription   Statut Membre Dernière intervention   514
 
La position absolute ne permet pas de contrer le défilement de la page, je crois bien que ça ne fonctionnera pas.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922 > NookZ Messages postés 2138 Date d'inscription   Statut Membre Dernière intervention  
 
La position absolute ne permet pas de contrer le défilement de la page
qu'est-ce que tu veux dire ?
0
NookZ Messages postés 2138 Date d'inscription   Statut Membre Dernière intervention   514 > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
Je veux dire que si tu utilises la scrollbar, ton div en position:absolute se déplacera en même temps que la page.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922 > NookZ Messages postés 2138 Date d'inscription   Statut Membre Dernière intervention  
 
Je veux dire que si tu utilises la scrollbar, ton div en position:absolute se déplacera en même temps que la page.
tout dépend du container par rapport auquel le positionnement est calculé.
c'est un peu le but de la manœuvre…
0
NookZ Messages postés 2138 Date d'inscription   Statut Membre Dernière intervention   514 > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
Il faudrait que le container soit en position fixed, non?
0
Utilisateur anonyme
 
Merci pour tout vos messages.

J'ai essayé ton exemple

<div id="barre"></div>

avec :
div#barre{
position:absolute;
bottom:0;
}


Sa fonctionne mais quand on "scrolle", le message ne reste pas en bas de la page.
Je vais essayé de me débrouiller autrement.

Merci.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
et quel est le container de référence pour le positionnement ?

as-tu mis ce <div> directement dans <body> ?
0
Ahaha
 
Tu peux faire un jeu de cadre sinon...
0