redesigning my website.

iPod Nano · Oct 14, 2009

Hello all. I am trying to redesign my website which I originally created with frames. I want to have a header that STAYS at the top of the page when you scroll down, but everything else scrolls. This is the effect I got with frames, but is it possible with iFrames? I thought that's what would happen, but I found that the whole page scrolls.

Raz0rEdge · Oct 14, 2009

You can create the same effect with just simple CSS. I loathe farmes, iframes and the rest..just messes up pages to no end.

Fixed header shows how to fix any part of the website (header, sidebar on either sides, and footer). Where possible always use CSS to layout your websites, this will GREATLY simplify your HTML code and allow you to make changes to layout by manipulating the CSS file easily..

Regards

iPod Nano · Oct 14, 2009

Hmm, CSS is not my strongpoint, but I'll try it.

B-Ryan · Oct 26, 2009

This is a barebones template for you. You would need to change heights and widths. The wrapper has a relative position so that if you use an absolute position inside any of the divs, they will be absolute to the wrapper and not the body.

CSS:

Code:

/* GLOBAL */
body {margin:0px;}
.wrapper {margin:0 auto;padding:0;position:relative;width:960px;}
div#hrd {height:300px; }
div#subBody {height:600px; overflow:scroll;}

HTML:

Code:

<body>
<div class="wrapper">
    <div id="content">
         <div id="hdr">Header goes here</div>
         <div id="subBody">Scrollable content</div>
    </content>
</div>
</body

Raz0rEdge · Oct 26, 2009

iPod Nano said:
Hmm, CSS is not my strongpoint, but I'll try it.

Understood, but know that XHTML/CSS is THE way of laying out webpages these days. Visit any website and take a peak at the sources and you'll see a number of CSS files being loaded to handle layout. The number of things you can do with CSS and the latest generation of browsers is absolutely amazing. So it's definitely a worthwhile thing to learn since it's no fad..

Regards

iPod Nano · Nov 27, 2009

Hi all. Sorry to reactivate an old thread. Finally I am making an attempt to do this with a fixed header. I'm not quite sure what it is that I'm doing wrong. I have pasted the above CSS code into the top of my style sheet and the HTML code into my HTML page. What's the problem? All I get is my header text (not in a header) and my content text below it.

Appreciate any and all help.

iPod Nano · Nov 28, 2009

Anyone?

redesigning my website.

iPod Nano

Raz0rEdge

Well-known member

iPod Nano

B-Ryan

Raz0rEdge

Well-known member

iPod Nano

iPod Nano

Shop Amazon