Using 2 'layers' in a web page

Discussion in 'Web Design and Development' started by sammich, May 18, 2008.

  1. sammich macrumors 601

    sammich

    Joined:
    Sep 26, 2006
    Location:
    Sarcasmville.
    #1
    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
     
  2. Trip.Tucker Guest

    Joined:
    Mar 13, 2008
    #2
    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.
     
  3. sammich thread starter macrumors 601

    sammich

    Joined:
    Sep 26, 2006
    Location:
    Sarcasmville.
    #3
    Ah yes, div tags. I always knew to use them, just not how.

    Awesome, thanks for that.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. timmillwood macrumors 6502a

    Joined:
    Apr 7, 2006
    #5
    You should NEVER use tables for layout on a web site, they should only be used for tables.
     
  6. davidwes macrumors 6502

    Joined:
    Dec 28, 2004
    #6
    What should you use instead?
     
  7. savar macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #7
    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.
     
  8. macsig macrumors regular

    Joined:
    Oct 27, 2006
    Location:
    Marina del Rey, CA

Share This Page