...

View Full Version : Different background images for centered divs and background



Davidn655
04-19-2007, 12:22 AM
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

Davidn655
04-19-2007, 12:48 AM
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

Excavator
04-19-2007, 01:27 AM
Hello Davidn655,
I started looking around at your code and found few places where your floats weren't cleared:

#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. (http://www.quirksmode.org/css/clearing.html)

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?

Davidn655
04-19-2007, 01:39 AM
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

Davidn655
04-19-2007, 03:11 AM
I'm getting closer, but, I just don't get the whole floats and clear thing.

Excavator
04-19-2007, 03:46 AM
Looking at http://www.ublybean.com/test/

Make these changes:
#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.


#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.php?p=558375&postcount=8

As always, take a look at the links in my sig below.

Davidn655
04-19-2007, 04:26 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum