rounded boxes with CSS

stupid dog · #1 (**permalink**) Aug 16th, 2007, 21:39

OK, need a bit of help here. I am trying to make this box with CSS. You'll notice there is also a drop shadow. My thought was to take a horizontal slice and tile that for the background, then put the top and bottom 'caps' on it

I've tried alot of combos, searched the web, can't really find anything. Alot of info making rounded corners without shadows....

Too much more this, I'm about to say f' this and throw the GD thing in a 3 row table!

Any ideas on the best way to build this box in CSS?

Thanks!

Lchad · #2 (**permalink**) Aug 16th, 2007, 22:26

Slice it into three rows.
Top will have the top horizontal part of the box. Place it in a div called #top.
Set the width and height to this div and no need to repeat.

Middle slice just needs to be a slice of about 3px high by the width.
Place this in a div called #middle as the background image. Repeat-y and set the width. Now this is where you will put the content. This div will expand down with more content.

Slice the bottom portion of the box and place it in a div called #bottom. Set the width and height to this div- no need to repeat.

This can all be nested inside another div if it helps you to place it correctly on the page.

This box is famous for having spaces so make sure to add this to your css:

Code: Select all

* {
margin: 0 
padding: 0;
}

stupid dog · #3 (**permalink**) Aug 16th, 2007, 23:41

OK, but this was my first approach, and it didn't seem to work. hmm.. I put the three in a div container that was set to float:left (there's another box like this next to it)

Oh, sorry to offend anyone here, but I have a certain amount of hours to get this thing built, so I just through it in a 3 row table wrapped in a div. Worked, and took me 5 minutes...

Maybe I'll revisted this section when I have some extra time..

stupid dog · #4 (**permalink**) Aug 17th, 2007, 01:02

Well, I tried it on a test page, seems to work, with the exception of one thing. In NS and FF, I cannot add any padding to the right. IE is fine

Code: Select all

 
<style>
 #wrapper {
  width: 478px;
  margin: 0px;
  padding: 0px;
 }
 #top {
  width: 478px;
  height: 7px;
 }
 #middle {
  width: 478px;
  background-image: url(images/leftBoxBG.gif);
  background-repeat: repeat-y;
  padding: 10px;
 }
 #bottom {
  width: 478px;
  height: 13px;
 }
</style>
</head>
<body>
<div id="wrapper">
<div id="top"><img src="http://www.webforumz.com/images/leftBoxTop.gif" width="478" height="7" alt=""></div>
<div id="middle">Slice it into three rows.
Top will have the top horizontal part of the box. Place it in a div called #top.
Set the width and height to this div and no need to repeat.
Middle slice just needs to be a slice of about 3px high by the width.
Place this in a div called #middle as the background image. Repeat-y and set the width. Now this is where you will put the content. This div will expand down with more content.
Slice the bottom portion of the box and place it in a div called #bottom. Set the width and height to this div- no need to repeat.
This can all be nested inside another div if it helps you to place it correctly on the page.</div>
<div id="bottom"><img src="http://www.webforumz.com/images/leftBoxBottom.gif" width="478" height="13" alt=""></div>
</div>

Lchad · #5 (**permalink**) Aug 17th, 2007, 11:21

Can't add padding to the right? Right of what?
Can you add a margin?

stupid dog · #6 (**permalink**) Aug 17th, 2007, 14:28

I needed to put the text in a p tag, and add padding to that. Without it, the text would flow all the way to the right edge of the conatiner, over the border, and neither padding nor margin worked on that side for some reason.

butm thanks for your help. I guess I will strip out my tables now and use these

moojoo · #7 (**permalink**) Aug 17th, 2007, 14:39

Basically you want this to be done in 3 cuts as you planned for.

Top

Middle

Bottom

Code: Select all

#top {
height:7px;
overflow:hidden;
background: url("fooTop.jpg")no-repeat left top;
}

#middle {
background: url("fooMiddle.jpg") repeat-y left top;
}

#middle p {
padding:0 10px 0 10px;
}

#bottom {
 height:7px;
 overflow:hidden;
 background: url("fooBottom.jpg")no-repeat left top;
 }

in HTML

Code: Select all

<div id="wrapper">
<div id="top">&nbsp;</div>
<div id="middle">
<p>Content goes here</p>
</div>
<div id="bottom">&nbsp;</div>
</div>

That should work.

#wrapper will contol the width of the elements.

Marc · #8 (**permalink**) Aug 21st, 2007, 18:22

Have a look at the 'Cover' page on the newsletter. It has a rounded corner box and it was as easy as pie to make

Link to newsletter: www.creativecoding.webforumz.com

Hope it gives you another option.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css rounded boxes ontop of each other	Gurpreet82	Web Page Design	7	Feb 22nd, 2007 22:45
css rounded corners	geoffmuskett	Web Page Design	8	Jan 4th, 2007 20:40
Css rounded div corners	AdRock	Web Page Design	2	Aug 7th, 2006 13:25
Rounded Rectangle	gwx03	Graphics and 3D	2	Dec 16th, 2003 10:31

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
rounded boxes with CSS