Newb CSS Question

geeky · February 15th, 2008, 5:22 PM

Okay, so I'm trying to customize this Wordpress theme and I honestly suck at this coding stuff right now.

For the sidebar, I'm trying to make every section (like "About Me" "Site" etcetc) appear inside separate box-thingies, kind of like this:

I tried doing a #container thing and putting it into a div id="container" w/ the #container settings like this:

background: #ffffff url('images/boxbg.jpg') repeat;
border-top: #ffffff url('images/boxheader.jpg') no-repeat;
border-bottom: #ffffff url ('images/boxfooter.jpg') no-repeat;

You guys are probably laughing at my supreme newbness right now, but how do I "wrap" my sections with a round-cornered box? What is this thing called (I tried searching it but didn't know what the term was so it didn't do much good)?

Please help me.

**ceo** · February 15th, 2008, 5:44 PM

I'm by no means a CSS expert - but I don't know of any styling for "rounded" borders, other than using a background image.

H · February 15th, 2008, 5:50 PM

As far as I know, you can't specific an image for a border.

Well, I think CSS3 might.. but CSS3 also has border-radius which would give the result of rounded corners.

You'll either have to use a JavaScript library that does rounded corners or have extra mark-up and use background images.

**ceo** · February 15th, 2008, 5:53 PM

Quote:

Originally Posted by H

As far as I know, you can't specific an image for a border.

Er, yeah. I meant . . . well, using the image as an effect of a border.

**Mark** · February 15th, 2008, 5:53 PM

You are probably looking for this:
Mozilla CSS Extensions - MDC

This does not work in IE though.

reddshack · February 15th, 2008, 6:04 PM

There are a few way to go about this. As mentioned by H you cannot set a background image with the border. The easiest way for you to accomplish this with your images is to have 3 div blocks.

Code:

<style type="text/css">
.sideNavHead, .sideNavBody, .sideNavFoot {
  margin: 0;
  padding: 0;
}

.sideNavHead {
  background: url('images/boxheader.jpg') center center no-repeat;
  width: XXpx;
  height: XXpx;
}
.sideNavBody {
  background: url('images/boxbg.jpg') center center repeat-y;
  width: XXpx;
}
.sideNavFoot {
  background: url('images/boxfooter.jpg') center center no-repeat;
  width: XXpx;
  height: XXpx;  
}
</style>

<div class="sideNavHead">

</div>

<div class="sideNavBody">

</div>

<div class="sideNavFoot">

</div>

Now just plug in your width and height values.

H · February 15th, 2008, 6:33 PM

Quote:

Originally Posted by ceo

Er, yeah. I meant . . . well, using the image as an effect of a border.

I was referencing the code. There's url(image stuff) for borders in it.

Mark: I'd strongly suggest never using that -moz- or -webkit- specific crap. Just use the actual property and it'll come into play when the browser actually releases support for it.

I'd suggest not using the -moz- one especially. It looks like absolute crap in Firefox 2.

**cowboy** · February 15th, 2008, 7:15 PM

See a detailed tutorial at:

CSS and round corners: Borders with curves

You can probably use the corner images you already have that are used in your existing box. You might want to open them in a graphic program and change the color, etc.

geeky · February 15th, 2008, 7:19 PM

Thanks for all the responses, guys. I decided to stick with something simple... found this after a while and it seems to do the trick:

CSS and round corners: Boxes with curves

I tried plugging it into my sidebar though, and right after "Pages" it screws up in IE. Not sure what to do about it, but I'll play around some more and see what happens.

February 15th, 2008, 5:22 PM	#1 (permalink)
geeky Honey Pot Seasoned Poster Joined in Feb 2008 Lives in Hawai'i Hosted on pass80, sh134 32 posts Gave thanks: 8 Thanked 7 times	Newb CSS Question Okay, so I'm trying to customize this Wordpress theme and I honestly suck at this coding stuff right now. For the sidebar, I'm trying to make every section (like "About Me" "Site" etcetc) appear inside separate box-thingies, kind of like this: I tried doing a #container thing and putting it into a div id="container" w/ the #container settings like this: background: #ffffff url('images/boxbg.jpg') repeat; border-top: #ffffff url('images/boxheader.jpg') no-repeat; border-bottom: #ffffff url ('images/boxfooter.jpg') no-repeat; You guys are probably laughing at my supreme newbness right now, but how do I "wrap" my sections with a round-cornered box? What is this thing called (I tried searching it but didn't know what the term was so it didn't do much good)? Please help me. __________________ pass80 & sh134 \| geeky.nu & heyhoneypot.org \| bronze & power

February 15th, 2008, 5:53 PM	#5 (permalink)
Mark Surpass Developer On a golden path... Joined in Jan 2004 Lives in Florida Hosted on decc.surpasshosting.com 493 posts Gave thanks: 17 Thanked 76 times	You are probably looking for this: Mozilla CSS Extensions - MDC This does not work in IE though. __________________ Mark Surpass Hosting Developer sɹnoʎ uɐɥʇ ɹǝʇʇǝq sı bıs ʎɯ

February 15th, 2008, 7:15 PM	#8 (permalink)
cowboy Surpass Fan Excelling Contributor Joined in Nov 2005 Lives in Colorado Hosted on DEDI 934 posts Gave thanks: 2 Thanked 94 times	See a detailed tutorial at: CSS and round corners: Borders with curves You can probably use the corner images you already have that are used in your existing box. You might want to open them in a graphic program and change the color, etc. __________________ Where would you be if you were at the highest court in the land (US)?

February 15th, 2008, 7:19 PM	#9 (permalink)
geeky Honey Pot Seasoned Poster Joined in Feb 2008 Lives in Hawai'i Hosted on pass80, sh134 32 posts Gave thanks: 8 Thanked 7 times	Thanks for all the responses, guys. I decided to stick with something simple... found this after a while and it seems to do the trick: CSS and round corners: Boxes with curves I tried plugging it into my sidebar though, and right after "Pages" it screws up in IE. Not sure what to do about it, but I'll play around some more and see what happens. __________________ pass80 & sh134 \| geeky.nu & heyhoneypot.org \| bronze & power

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

February 15th, 2008, 5:44 PM	#2 (permalink)
ceo Senior Member Super #1 Joined in Jan 2005 1,540 posts Gave thanks: 69 Thanked 33 times	I'm by no means a CSS expert - but I don't know of any styling for "rounded" borders, other than using a background image.

February 15th, 2008, 5:50 PM	#3 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,058 posts Gave thanks: 48 Thanked 129 times	As far as I know, you can't specific an image for a border. Well, I think CSS3 might.. but CSS3 also has border-radius which would give the result of rounded corners. You'll either have to use a JavaScript library that does rounded corners or have extra mark-up and use background images.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)