J'aime comment Facebook garde cette barre d'outils au bas de la page.
Est-ce que cela nécessite des compétences de Ninja croisées croisées?
Leur JavaScript /
4 Réponses :
Voici un exemple de base. Non, cela ne nécessite pas de navigateur cross-navigateur Ninja Skillz. =)
<!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 la façon dont ils l'ont mis en œuvre exactement? (à un niveau de cours élevé)
Le meilleur est d'installer Firebug et voir comment ils l'ont fait. Lorsque je vois des choses intéressantes sur le Web, Firebug est la meilleure façon d'analyser la structure HTML, CSS attachée et vous pouvez même modifier directement la structure CSS / HTML pour voir comment cela change. Tout ce que vous voyez sur un site Web peut être simplement lu. N'oubliez pas que la source (HTML, CSS, JavaScript) est livrée avec elle :)
Cette solution ne fonctionne pas bien pour les pages contenant du contenu s'étendant au-delà du bas de la fenêtre du navigateur.
Essayez quelque chose comme ça à la place: P>
<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 pour que cela ne disparaisse pas.
Vous voulez dire, comment la positionne-t-il au bas de la fenêtre ou comment le rend-ils restent là via plusieurs demandes de page?
Comment le positionnent-ils au bas de la page? Je n'ai pas réalisé qu'il ne se recharge pas lorsque vous allez à une autre page?
Pour la plupart. Ils utilisent l'ajax Dressery pour cette partie de celui-ci.