Comment créer un objet en forme d'une barre d'outils en HTML qui suit le défilement de l'utilisateur pour qu'il soit toujours en haut de la page visible?Créer une barre d'outils statique sur la page Web qui défile en HTML
Merci d'avance!
css
.selector
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
html
<div class="selector">
... content for bar here ...
</div>
En avez-vous spécifiquement besoin pour faire défiler (animer) ou simplement un objet statique (barre d'outils)?
EDIT:
Ok, donc d'ajouter une statique (barre d'outils comme) objet qui a une largeur qui est de 100% de la page, et une hauteur de dire 25px, vous devez faire cela.
HTML
<div id="toolbar">
<p>Some content...</p>
</div>
CSS
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
S'il vous plaît noter que cela pourrait se chevaucher tout contenu que vous avez en haut de la page, utilisez donc une marge supérieure pour le pousser vers le bas sous la barre d'outils ou simplement définir:
body {
margin-top: 35px;
}
statique (barre d'outils) –
Je n'ai pas vu l'autre réponse - désolé pour le double post. – Marko
C'est bon, votre réponse m'aide avec la marge si, merci pour cela! –
est ici une idée. mais cette barre des tâches est en bas alors assurez-vous de remplacer bottom: 100%; avec position: fixed;
<html>
<head>
<title>
home - windows vista v 1.0
</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
bottom:100%;
}
</style>
<style>
#toolbar {
bottom: 100%;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
</style>
</head>
<body bgcolor="lime">
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="selector">
<div class="dropdown">
<span><img src="start button vista.png" width="50" height="50"></span>
<div class="dropdown-content">
<h1>Liam</h1>
<p>
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
</p>
</div>
</div>
</div>
</html>
</body>
</html>là deux images manquantes afin de les remplacer avec ce que vous voulez.
espérons que vous aimez le code! (le code est pour la page d'accueil sur mon programme windows vista en html je travaille sur.)
ne bloquera-t-il pas ce contenu? –