Using 2 'layers' in a web page

[sammich]

Okay, in my site I was planning of having a full width bar along the bottom of the browser window for various user functions. So far i've only managed to do it so that it sits in a table, but then it'll move when the person scrolls/page is taller than the window.

So how can I put this bar above all the content, so it sits fixed to the bottom of the page, while the main content slides underneath it?

I've uploaded a concept of a page up at http://chan1.com/livinggreen/home.html

I also wanted to put this image so that it sits at the bottom right of the browser window. I've looked for solutions on the web but so far every one of those has been fruitless. How can I achieve this?

Summary:
bottom layer/background: bottom, right aligned image
middle layer: content
top layer: control/user bar along the bottom

Thanks for the help in advance,
Sam

 

[Trip.Tucker]

You would want to set the z-order of the div to a higher number than other (or all other) divs. I'm assuming you want that 'menu bar' div to remain at the bottom of the web browser no matter where the page is scrolled to and for this you will need to employ a little javascript to manipulate that particular DOM object.

Google on 'div z-order' and 'javascript floating div'

http://www.javascript-fx.com/submitscripts/float/float.html

For the background wall paper, there are a couple of methods that can be used. For simplicity use a div that has 100% for width and height and set the align value to bottom and the background-image to that picture you want to use.

 

[sammich]

Ah yes, div tags. I always knew to use them, just not how.

Awesome, thanks for that.

 

[angelwatt]

The preferred way of sticking something to the bottom and keep it there while scrolling is using CSS property display:fix. Unfortunately IE is a dumdum so doesn't understand that. You could use JavaScript to reposition it at the bottom, but that isn't always very elegant. You can also set your menu to the bottom and have the rest of the content set to scroll. This is something Yahoo and Google do regularly on their pages. It can all be done with CSS so you don't have to worry about it breaking when someone with JavaScript disabled (like me) crosses your site.

 

[timmillwood]

You should NEVER use tables for layout on a web site, they should only be used for tables.

 

[davidwes]

You should NEVER use tables for layout on a web site, they should only be used for tables.

What should you use instead?

 

[savar]

What should you use instead?

Divs. Only use tables when you are presenting tabular data (like a spreadsheet).

This is just a recommendation. You can use tables all you want, but it makes your sites very hard to maintain, especially as the layout gets more complicated. You'll eventually find yourself in a situation where you have typed a tag incorrectly and the whole page layout is completely messed up, but you have so many tables you can't figure which one to fix.

It's obviously up to you, but if you search for "tableless layouts" you should get a good start on learning more modern site building techniques. If you do lots of web work, it will save you hours of work in the future.

 

[macsig]

Start studying CSS.
This is a good starting point

Hope this helps