Design For Web: The Mystery of the Header Div

I managed to make my body colour the same pale off white colour of #EADECA which made the website look seamless.

Yesterday my main target was to make my webpage scrollable with the navigation stuck to the bottom of the screen.

I overcame this by creating a "navigation holder" css element which is the width of the website and the height of the navigation css element, of 50px.

I housed the navigation div, inside the navigation holder div, basically inside the DWT code. So this way, the navigation holder automatically stays glued to the bottom of the screen as it's coded AFTER the container </div> which puts it underneath rather than above. The navigation div inside worries about having the margins and being centralised. Sounds confusing but it's not really and it seems to work fine.

<div id= "nav-holder">

          <div id='navigation">

          </div>

</div>

How it looks in design view on DW, you can see it's separate from the container, and hangs onto the bottom of the screen in a fixed position, as specified on the navigation CSS.

How it looked afterwards

It acts similar to a liquid layout, when i shrink the window the content and navigation centralise, but the header's now being problematic! It's no longer centred and something seemed to be interfering with it but I was happy with the header sticking to the top and the navigation sticking to the bottom.

To fix the header, I adopted the same approach I took with the navigation.

I created a header-holder CSS element and placed the header element inside it with margins to stay centralised. The header is 130px in height, so the header-holder is width:1024px and height:130px

The CSS code

My navigation was bottom:0 so I did the bottom here and made the top:0 and it seemed to do the trick.

Again, I took the header div out of the container div, it's all got a transparent background anyway so I want it to just float above and stick to the top of the screen. Here's the DWT code

Div's inside Div's help me sleep at night.

Moment of truth...

Tears of joy. It works, it also seems to stay centralised when resizing the window too which is great. I feel ready to finalise the content and page order etc and start getting stuff into the layout.

I feel the template is now ready to put stuff into.



I have two types of page layouts. The template applies to both...

1. The scroll page, which is literally just more content in the middle column, as my body is the same colour as container, you can't tell that the text is over-running over the container, and it scrolls down as I want it to.

2. The slideshow page. This is the same layout as the scrollable page, I just add in the next and previous buttons into the margin. I think I can have a separate slideshow template, but I feel safer doing it this way manually for now. I'm not going to add in a javascript slideshow and will make the list of fighters in order of how I want them to be seen, and link the next and previous buttons accordingly.




Moving forward I'm going to look into font styles, as I originally planned to have a heading style and a body style, same font just bigger in size