locking header and nav so they won't...

Sep 25th, 2012 at 08:42 PM
User 2457434 Photo

Samuel Blair
Registered User
1 post

As with most questions, this is probably an easy one - but we'll see.

I have a site with a header which contains a banner graphic and navigation bar. On most pages the header comes out fine, but if the page is longer and needs to scroll the header section scrolls with it. I don't like this because you lose the banner and nav and also because it clips the banner so it's not the same across pages.

Is there a simple CSS/HTML way to place the scrolling section after the header?

code follows:

<body>
<!--header and nav-->
<header id="banner">
<div>
<img src="Graphics/banners/FWL logo2.png" border="0" alt="FaithWorksLocal" id="banner"/>
</div>

<ul id="nav">
<li id="nav-home"><a href="index.html">home</a>
<li id="nav-partners"><a href="partners.html">partners</a>
<li id="nav-about"><a href="about.html">about FWL</a>
<li id="nav-links"><a href="links.html">links</a>
<li id="nav-support"><a href="support.html">support FWL</a>
</ul>

</header>
<!--end header-->

css:


#banner{
max-width:100%;
-moz-border-radius-topleft:25px;
-webkit-border-top-left-radius:25px;
-border-top-left-radius:25px;
z-index:2000;
}

body{
background-color:#EEEDE3;
margin-left:5%;
z-index:1500;
overflow:scroll;
}
Sep 25th, 2012 at 09:07 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

I'm thinking adding position absolute, margin-left 0 margin-top 0 to your header id might be a direction to explore.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.