Forum Moderators: not2easy
I'm trying to create a layer that stays fixed at the top of the browser window and have the text of page scroll up and seem to disapear underneath it.
is this possble in a css retrieving html document? at the moment the header/banner just scrolls with the rest of the page.
My thoughts are perhaps i need to create a framed layout... But i do not want to have a framed layout on my pages. I've seen it on other pages, but I haven't got a clue how to do it myself.
Floating isn't the answer either. as floating sometimes takes time to catch up with the rest of the page...
Thanks in advance anyone that has helpful answers.
What you need is very simple...
YOUR SELECTOR {
position: fixed;
}
...where YOUR SELECTOR is the <div> containing the header you want stationary.
Good luck,
cEM
I positioned it fixed (I originally thought this would do what I'm after but it didn't work back when I started trying to get this page layout a few weeks ago before my old comp blew up-but I was using only IE to check it), and it just isn't working in IE, in Firefox it's just all skew wiff. If I change the positioning for the latter it looks bad in Opera, and IE...
here's a link: <ooops>
the page works in perfectly in Opera, iffy in Firefox, and I don't have nippyscape so I couldn't tell you about that... In my IE browser the whole page scrolls..
Think I'm going to check out w3scools, see if there are different commands to help the different browsers.. I am so confused!
[edited by: SuzyUK at 5:55 pm (utc) on Nov. 2, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]
But FF does support this feature.
If the problem you're having with FF is that the navigation pokes out of the bottom, it's because you have the height on that div (#sect_nav) explicitly set to 40px, which is not tall enough. Remove the height setting altogether and the div's height becomes determined by the content (i.e., all looks well).
Also note that the WebmasterWorld TOS doesn't allow for posting personal URLS, even when it comes to providing a chance for others to see what your problem is. I happened to have been able to see the site, but only because I got here before a mod clipped the link.
In future posts, try to snip out the relevant peices of your code and css and post those instead. I've done it for you below both so you can see what I mean, and for others who might come along to read the thread...
html:
<div id="logo_ban">
<img src="logoban.jpg">
</div>
<div id="sect_nav">
<p><a href="">HomePage</a> : <a href="">Games</a> : <a href="">State Benefits</a> : <a
href="">Parents/Carers</a><br><a href="">Charities</a> : <a href="">Translated
Legislation</a> : <a href="">Disabled Access Holidays</a> : <a href="">Forum</a></p>
</div>css:
div#logo_ban {
position: fixed;
top:0;
}
div#sect_nav {
position: fixed;
top: 78px;
left: 0px;
right: 0px;
width: 770px;
height:40px; /*remove*/
background: #ffccff;
}
This isn't a criticism or an attack! :)
Everyone goes through a learning process of seeing just how this forum works. It's a different set of rules than most people are used to, but stick around because it's also one of THE best resources on the net. :)
cEM
And Thank You CEM for the advice and the placing of the codes in your post (No worries, no offence taken). It works perfectly now! Guess you'd know that already though... Just got to sort the colours so that it doesn't look like a blooming nursery anymore! ;o)
I agree with you, this is the best web building forum I have ever used; see you around. Oh, and I'll post whatever working solution I find to trick IE into doing what I want it to (I want to keep away from javascript for security reasons and because I can't assume that the user's of the site I'm building will have javascripting support activated or present in their browsers).
Thanks again :o)
