Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Z-Index & Background issues

    Hi Everyone,

    I have two problems on my site- (link: http://www.sophieshepherd.com/curt/ )

    The first is that my dropdown nav menu goes behind the top image. I have adjusted z-indexes accordingly, but it still does it. The images are a javascript slideshow - could that code be interfering? I don't know enough about java to solve the problem.

    The second question is about the div with the white background (called "main") ... How do I get the white background to extend all the way to the footer, even if it is not filled with content? Also, how can I get the footer to "push" down if there is more content? It seems that the sidebar is controlling the positioning of the footer, rather than the main text area. On other pages, I will have a lot more content and need the footer to be pushed down accordingly.

    Thanks all!!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello sophshep,
    I think you have a lot of unnecessary positioning. When you put #line outside of #container in the markup and the position #main over it... it's just a lot of extra work for something those elements would do on their own without any positioning at all.

    To fix your menu though, try changing the z-index on #line to a higher number.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks, Excavator. Changing the z-index of my div "line" (since renamed header) did the trick.

    I tried cleaning up my positioning as well, but I'm still fully getting the hang of how it all works... still having trouble with my main content not pushing down the footer. Any suggestions?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by sophshep View Post
    Thanks, Excavator. Changing the z-index of my div "line" (since renamed header) did the trick.

    I tried cleaning up my positioning as well, but I'm still fully getting the hang of how it all works... still having trouble with my main content not pushing down the footer. Any suggestions?
    See if changing that negative bottom margin on #sidebar helps, like this -
    Code:
    	#sidebar {
    		width: 300px;
    		position: relative;	
    		bottom: 0px;	
    		margin: -80px 5px 0;
    		padding: 0px 0px 100px;
    		float:left;
    		background:url(../images/bg_side.png) repeat #1f3f5f;
    		-moz-box-shadow: 0px 0px 9px #000;
     		-webkit-box-shadow: 0px 0px 9px #000;
     	 	box-shadow: 0px 0px 9px #000;
    		z-index: 2;
    		
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    It helped, but didn't solve it. Here's a screenshot:

    http://www.sophieshepherd.com/curt/screenshot.tiff

    The footer is stuck to the bottom, which is good, but I want to blue and white Divs to extend all the way to the bottom no matter what.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by sophshep View Post
    It helped, but didn't solve it. Here's a screenshot:

    http://www.sophieshepherd.com/curt/screenshot.tiff

    The footer is stuck to the bottom, which is good, but I want to blue and white Divs to extend all the way to the bottom no matter what.
    Yes, it just doesn't work very well with all that positioning. Have a look at a full height layout that works. It wouldn't be too difficult to adapt your site to this method.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    sophshep (02-15-2011)

  • #7
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Yahoo! It worked! Always feels so good to figure something out that has been broken for so long. Thanks so much excavator!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •