72 users online (0 members and 72 guests)  


  Results 1 to 4 of 4

Related

  1. Images, Layers, and Divs... Oh my.    Forum: CSS Forum
    Replies: 2
  2. Preventing overlapping layers    Forum: HTML Forum
    Replies: 6
  3. Show/Hide layers in IE    Forum: Javascript Forum
    Replies: 3
  4. layers? frames? what? yikes    Forum: HTML Forum
    Replies: 2
  5. columns associated with layers    Forum: CSS Forum
    Replies: 1
  1. #1
    msparks's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Location
    Lexington, KY
    Posts
    1

    Post CSS Layers and Scrolling

    Hey everyone. I'm glad I came across this site, it looks like a great community. I'll try to help out with questions whenever I can.

    I was wondering if someone could help me with a question I have.

    I'm trying to create the footer effect on this website:
    http://www.csszengarden.com/?cssfile=/213/213.css&page=0

    Basically, I can't figure out how the designer fixed the footer to the bottom of the page to allow content to scroll underneath it. I've studied the code and I'm stumped. Anyone have an idea of how this was achieved?

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: CSS Layers and Scrolling

    The relative CSS code is: (I have cut out the parts that are irrelevant to this question)
    Code:
    #container {
    	z-index: 4;
    	position: relative;
    }
    #extraDiv2 {
    	background-image: url(bottom.png);
    	position: fixed;
    	bottom: 0px;
    	z-index: 5;
    }
    The "position: relative" on the container allows the z-index to work. The z-index value is used to create layers. The lower the z-index, the farther away from you the layer will appear. #extraDiv2 will appear on top of #container because the z-index is larger.

    NOTE: The z-index only works in IE if the element also has its CSS position set. The position does not need to be set in other browsers.
    The second thing that is necessary is the "position: fixed" and "bottom: 0px" describing #extraDiv2. The position puts it in whatever spot you want it in and leaves it there. bottom tells you to put the bottom of the div 0 pixels away from the bottom of the page.

    NOTE: Top, bottom, left, and right only work if the position is set. This is true for any browser.

  3. #3
    raaj22's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2009
    Posts
    10

    Re: CSS Layers and Scrolling

    this is the link where you can learn scrolling :
    http://www.dyn-web.com/code/scroll/vert.php

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: CSS Layers and Scrolling

    That is a good link with some really good information, raaj22, but not quite what he was looking for.



Tags for this Thread