CSS with images

Hey everyone, how are you?

Well it's been a month now since i read up on CSS tutorials and I know how to make a CSS website without images (except the banner and buttons). I never knew how to use CSS to code content boxes and such. I would continue experimenting with it but, this is a bit urgent and besides, my mind might melt if i try any more. Here's a content box i made as an example:



That's basicallt how i slice my content boxes when i use HTML tables to build websites. but I'm trying to avoid that as much as possible. Is there a certain way i need to slice the content box when coding with CSS? I need to know this because i volunteered to build a website for a local children's funding organisation. Any help at all would be so appreciated, Thanks!

The good thing with CSS, is that you don't need to slice, that whole box can easily be replicated with just pure CSS, just use a background-color: #xxxxxx; code. And then let it repeat-y so the box can expand

Originally Posted by Winters The good thing with CSS, is that you don't need to slice, that whole box can easily be replicated with just pure CSS

I'd like to see you try it without slicing into images...

Originally Posted by Winters The good thing with CSS, is that you don't need to slice, that whole box can easily be replicated with just pure CSS, just use a background-color: #xxxxxx; code. And then let it repeat-y so the box can expand

maybe a bit more details or a website that may have such information?

Originally Posted by Salathe I'd like to see you try it without slicing into images...

Salathe, a more constructive reply would have been nicer.

dumbcoder, this is what you need to do:

1. Slice the content box into a header, footer and a vertically expandable content section.

2. Surround all in a wrapping div.

3. Place header div at the top with header image as the background. Make sure you specify height and width and it's non repeating.

4. Make content div and have content image as background, make sure you have it can repeat in the y axis.

5. Make a footer div at the bottom with footer image as the background. Make sure you specify height and width and it's non repeating.

6. Place your wrapper div where you want it!

Originally Posted by Salathe I'd like to see you try it without slicing into images...

Only in a perfect world. :P

i think that is impossible to code without slicing because there are rounded corners, and the font is not really possible to generate in all comp .

Originally Posted by Julian Salathe, a more constructive reply would have been nicer. dumbcoder, this is what you need to do: 1. Slice the content box into a header, footer and a vertically expandable content section. 2. Surround all in a wrapping div. 3. Place header div at the top with header image as the background. Make sure you specify height and width and it's non repeating. 4. Make content div and have content image as background, make sure you have it can repeat in the y axis. 5. Make a footer div at the bottom with footer image as the background. Make sure you specify height and width and it's non repeating. 6. Place your wrapper div where you want it!

Thanks a lot Julian, you're always helpful heh.

Just to confirm what you said, I should slice the content box like this:



As you can see above, there are three images: header.gif, content.gif, footer.gif. Is padding required for the content.gif? i would assume so, but not sure.


and the XHTML code should be:


and the CSS code should be:

Originally Posted by simpson733 i think that is impossible to code without slicing because there are rounded corners, and the font is not really possible to generate in all comp .

You can make rounded corners without any images whatsoever. I've done it at www.aspiramedia.com (content box and tabs). Granted, image backgrounds are used but not to make any of the corners.

If I get time over the weekend I'll write a tutorial explaining how I made the expandable boxes at http://www.designagency.us/dev1/index2.html using a variation of the sliding-doors technique.