J'aime comment Facebook conserve cette barre d'outils sur le bas de la page.Comment Facebook conserve-t-elle cette barre d'outils en bas de la page?
Est-ce que cela nécessite des compétences de ninja multi-navigateur?
Leurs fichiers JavaScript/CSS sont énormes donc j'ai du mal à réduire l'implémentation (à des fins d'apprentissage).
Vous pouvez obtenir l'effet with CSS.
Voici un exemple de base. Non, il ne nécessite pas de skill ninja cross-browser. =)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>
est-ce ainsi qu'ils l'ont implémenté exactement? (à un haut niveau de cours) – mrblah
C'est le même concept, oui. –
Le meilleur est d'installer Firebug et de voir comment ils l'ont fait. Quand je vois des choses intéressantes sur le web, Firebug est la meilleure façon d'analyser sa structure HTML, de la CSS jointe et vous pouvez même directement modifier la structure CSS/HTML pour voir comment elle change. Tout ce que vous voyez sur un site web peut être simplement lu. Rappelez-vous, la source (HTML, CSS, JavaScript) est livrée avec elle :)
Cette solution ne fonctionne pas bien pour les pages dont le contenu s'étend au-delà du bas de la fenêtre du navigateur.
Essayez quelque chose comme ceci:
<div style="display: block;
position: fixed;
text-align: center;
z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>
On dirait que votre code a été mangé. Utilisez le bouton "code" (1010) pour l'envelopper afin qu'il ne disparaisse pas. –
Vous voulez dire, comment situez-ils au fond de la fenêtre, ou comment font-ils y rester par plusieurs demandes de page? –
comment les positionnent-ils au bas de la page. Je n'ai pas réalisé que ça ne recharge pas quand vous allez à une autre page? – mrblah
Ce n'est pas le cas pour la plupart. Ils utilisent la tricherie ajax pour cette partie de celui-ci. –