|
|
|
|
Thread title: CSS with images |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
09-09-2005, 12:29 AM
|
#1
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
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!
|
|
09-09-2005, 01:36 AM
|
#2
|
Status: Member
Join date: Aug 2005
Location: Toronto, Canada
Expertise:
Software:
Posts: 213
|
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
|
|
09-09-2005, 01:41 AM
|
#3
|
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
Posts: 3,820
|
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...
|
|
09-09-2005, 02:55 AM
|
#4
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
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?
|
|
09-09-2005, 04:13 AM
|
#5
|
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
Posts: 5,572
|
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!
|
|
09-09-2005, 06:32 AM
|
#6
|
Status: Narassist
Join date: May 2005
Location: USA
Expertise:
Software:
Posts: 4,469
|
Originally Posted by Salathe
I'd like to see you try it without slicing into images...
|
Only in a perfect world. :P
|
|
09-09-2005, 10:27 AM
|
#7
|
Status: Junior Member
Join date: Mar 2005
Location:
Expertise:
Software:
Posts: 27
|
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 .
|
|
09-09-2005, 01:25 PM
|
#8
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
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:
Code:
<body>
<div id="header"></div>
<div id="content">Lorem Ipsum</div>
<div id="footer"></div>
and the CSS code should be:
Code:
#header {
background-image: url('images/header.gif');
padding: 0;
margin: 0;
height: *true height*
width: *true width*
}
#content {
background-image: url('images/content.gif');
padding-left: 10px; /* Is This Right? */
margin: 0;
height: *true height*
width: *true width*
}
#footer {
background-image: url('images/footer.gif');
padding: 0;
margin: 0;
height: *true height*
width: *true width*
}
|
|
09-09-2005, 01:43 PM
|
#9
|
Status: Member
Join date: Apr 2005
Location:
Expertise:
Software:
Posts: 138
|
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.
|
|
09-09-2005, 05:06 PM
|
#10
|
Status: unusual suspect ™
Join date: Feb 2005
Location: Lancaster, PA from London UK
Expertise:
Software:
Posts: 1,814
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|