Navbar fixed on the top of HTML page (CSS / HTML)
I'm trying to learn some of CSS3 and HTML5 but I'm a little confused with
somethings. For now, I want create a page with a fixed navbar on the top
of page, that scrolls with the page.
Actually the navbar is fixed on the top and scrolls with the page, but the
content start at the top of the page, in other words, the content start
BEHIND the navbar, I don't want this.
See wanted design bellow:
Current design:
Following is my CSS:
body{
left: 0;
top: 0;
margin: 0px;
padding: 0px;
}
header.topbar{
background-color: #f8f6f6;
position: fixed;
width: 100%;
height: 100px;
opacity: 0.7;
z-index: 1;
top: 0;
left: 0;
}
#content{
z-index: 0;
position: absolute;
}
And my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title> Test </title>
<meta name="description" content="página de teste.">
<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>
<header class="topbar">
test
</header>
<p>another
test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<p>again</p>
</body>
So, what can I do to solve my problem? Please, try to answer using CSS, I
really don't want learn JavaScript/jQuery at the moment.
Thanks!
No comments:
Post a Comment