Menu
I've never dealt with CSS but now I have to. I'm developing some HTML code - a sketch of a website and have a problem with CSS. I would like to have my header in a fixed position, I mean it always should be on the top of the site, even if there is so much content that site has to be scrolled to see everything. I've tried somethig, but it does not work properly.
HTML:
body {
margin: 0px 0px 0px 0px;
}
header {
border: 2px solid red;
position: fixed;
width: 100%;
}
#top-menu-bar {
border: 1px dashed red;
padding: 15px;
text-align: right;
}
#main-menu-bar {
border: 1px dashed red;
padding: 15px;
}
#logo-bar {
border: 1px dashed red;
padding: 35px;
}
#content {
border: 2px solid black;
}
footer {
border: 2px solid blue;
padding: 15px;
} <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>if you still do not get it what I mean, here I provide links with fixed, witout fixed
Of course, what I'm looking for is nice a solution, without unnecessary code (even CSS and JS). It is important to note that no one element, especially header has not fixed height!
837
If I understand your problem correctly, you want to add the following CSS to your header to make it stay at the top of the page:
top: 0px;
Then, with div#content, give it a top margin to push it down out of the header's way:
margin-top: 200px;
So your CSS ends up looking like this:
header {
border: 2px solid red;
position: fixed;
width: 100%;
top: 0px;
}
#content {
border: 2px solid black;
margin-top: 200px;
}
Add fixed height to header, and use the same value for padding-top of content.
See http://jsfiddle.net/DmLkQ/
If you don't want fixed height, use jQuery:
http://jsfiddle.net/DmLkQ/5/
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
