Je n'ai jamais traité avec CSS mais je dois maintenant. Je développe un code HTML - un croquis d'un site Web et pose problème avec CSS. J'aimerais avoir mon en-tête dans une position fixe, je veux dire que cela devrait toujours être sur le dessus du site, même s'il y a tellement de contenu que le site doit être défilé pour tout voir. J'ai essayé quelque méthig, mais cela ne fonctionne pas correctement.
html: p>
p>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
</head>
<body>
<header>
<div id="top-menu-bar">
Login | Registration
</div>
<div id="logo-bar">
LOGO
</div>
<div id="main-menu-bar">
MenuItem1 | MenuItem3 | MenuItem3
</div>
</header>
<div id="content">
<h1>
Content
</h1>
<p>
Some content<br/>
</p>
</div>
<footer>
Footer
</footer>
</body>
</html>3 Réponses :
Cela devrait fonctionner pour vous:
header {
position: absolute;
top: 0px;
width: 100%;
border: 2px solid red;
}
Ajouter une hauteur fixe à l'en-tête et utilisez la même valeur pour le remplacement du contenu du contenu.
voir http://jsfiddle.net/dmlkq/
Si vous ne voulez pas de hauteur fixe, utilisez jQuery:
Ok, ce n'est pas une solution parfaite que je cherchais. Je veux dire que j'ai déjà essayé cela, mais je n'aime pas le fait que l'en-tête ait une hauteur fixe. Néanmoins, merci :)
Ah, alors ce n'est pas possible - comme @jamwaffles mentionné. Vous pouvez le faire avec JQuery cependant, en vérifiant d'abord la hauteur de l'en-tête, puis en passant cette hauteur à la tête de rembourrage ...
Si je comprends votre problème correctement, vous souhaitez ajouter le CSS suivant à votre en-tête pour le faire rester en haut de la page:
header {
border: 2px solid red;
position: fixed;
width: 100%;
top: 0px;
}
#content {
border: 2px solid black;
margin-top: 200px;
}
Merci de répondre. Mais pourquoi dans le #Content {Margin-top: 200px}? J'ai dit que l'en-tête n'avait aucune hauteur fixe, alors si l'en-tête aurait par exemple 250px de hauteur, cette soultion échoue.
C'est la seule chute de cette technique. Parce que Position: fixe Les éléments sont retirés du flux normal, vous devez positionner manuellement les choses sous eux. Vous ne pouvez pas le faire d'une autre manière.
J'ai déjà essayé la solution que vous avez proposée. J'étais juste curieux s'il est possible d'obtenir ce que j'ai besoin en contournant une propriété de hauteur fixe. Je ne sais pas comment, mais j'ai hostume que certains Guru CSS feraient cela: D Néanmoins, Thanx!
Pas de problème. En fait, je travaille sur un site avec une mise en page similaire et oui, ne pas avoir à faire les choses sur une base par pixelle serait géniale!
Vous voulez que l'en-tête soit toujours fixé au sommet de la fenêtre du navigateur, mais le contenu de Onyl va sous dessus lorsque la fenêtre est défilée, correcte?