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
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Different background images for centered divs and background

    Can anyone provide some ideas on how to do this with background images? Please the the attached image. The layout is fixed, centered. As you can see, I have background gradient images for the center column than the background. Is this easily possible with CSS?

    Nothing I've tried seems to be working. I'm about to go the tables route.

    Any help would be greatly appreciated.


    Thanks,

    David
    Attached Thumbnails Attached Thumbnails Different background images for centered divs and background-ideation.jpg  

  • #2
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a URL to what I have done so far
    http://www.ublybean.com/test/

    Link to CSSS
    http://www.ublybean.com/test/stylesheets/default.css

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Davidn655,
    I started looking around at your code and found few places where your floats weren't cleared:
    Code:
    #utilitiesbar {
    overflow: hidden;
    	margin: 0 auto;
    	width: 920px;
    	background: #C9C9C9 url('../images/bck_UtilitiesBar.jpg') repeat-x;
    }
    ...
    #navigationwrap {
    overflow: hidden;
    	width: 100%;
    	background: #B8B8B8 url('../images/bckgd_Body.jpg') repeat-x;
    }
    Read about clearing floats here.

    and then I run into a problem - http://www.ublybean.com/images/bckgd_Body.jpg isn't there.
    Could you check your paths and post back?
    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

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Excavator,

    Thanks for giving this a look. I posted a couple of the images. I'll clear the floats and see what happens.

    Thanks

  • #5
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm getting closer, but, I just don't get the whole floats and clear thing.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Looking at http://www.ublybean.com/test/

    Make these changes:
    Code:
    #wrapper {
    	width: 920px;
    margin: 0 auto;
    }
    ...
    #navigationwrap {
    	overflow: auto;
    	width: 920px;
    	background: #B8B8B8 url('../images/bck_NavWrap.jpg') repeat-x;
    }
    ...
    
    #page {
    overflow: hidden;
    	width: 920px;
    	background: #F5D925 url('../images/bck_PageBar.jpg') repeat-x;
    }
    I'm having a hard time understanding why you wrap each div with a div... the images are just a gradient color and there is no apparent reason for nested divs.

    Code:
    #sidebar {
    	text-align:left;
    	width: 284px;
    float: right;
    }
    ...
    
    #features {
    overflow: hidden;
    	text-align: left;
    	width: 920px;
    	background: gray url('../images/bck_FeaturesBar.jpg') repeat-x;
    }
    ...
    #footerwrap {
    	width: 100%;
    clear: both;
    	background: #676567 url('../images/bckgd_Body.jpg') repeat-x;
    }
    
    #footer {
    	width: 920px;
    clear: both;
    	background: #747474 url('../images/bckgd_Body.jpg') repeat-x;
    }
    Anyway, there's lots more to fix but you get the idea.
    If you don't have it already, get the webdeveloperstoolbar for FF and look at your page with the DOM inspector.
    Also, koyama had some excellent advice in a recent post that can be seen at http://www.codingforums.com/showpost...75&postcount=8

    As always, take a look at the links in my sig below.
    Last edited by Excavator; 04-19-2007 at 02:52 AM.
    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

  • #7
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Excavator,

    Maybe I'm going about this all wrong, but I do have a reason for the nested divs. If you look at the image I attached with my original post, you'll see I have horizontal gradient bands that fill the entire width of the browser window -- the "wrap" divs. The center content/page has slightly different horizontal gradient bands.

    I couldn't think of any other way to do this without nesting divs.

    Any ideas?


  •  

    Posting Permissions

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