Page 1 of 1

How to add the Round Edge corner to this?

Posted: Sat Aug 04, 2007 4:10 am
by legend986
While I was using tables, it was so easy to actually use a round edge corner, but now when using CSS, I don't seem to be able to get it right for some reason. If I need to say do it for this layout, how would I do it?

Code: Select all

http://stijlstek.nl/demo/2003/3colhf.html
CSS for the above layout:

Code: Select all

/*  StijlStek.nl demo stylesheet 3colhf (3 kolommen met header en footer)
 *  This css file is copyright 2003 Ben de Groot. It is provided "as is"
 *  and (with the exception of the referred graphics which remain property of
 *  their respective owners) free for use WITHOUT ANY WARRANTY OR LIABILITY.
 */

body {
	margin: 0;
	padding: 0;
	font-family: verdana, sans-serif;
	line-height: 150%;
	background:  #fff;
	color: #000;
	}
#header {
	margin: 0;
	padding: 2em 7em;
	}

#middle {
	margin: 0;
	padding: 0;
	}

#col1 {
	float: left;
	width: 30%;
	}
#col2 {
	float: left;
	width: 40%;
	}
#col3 {
	float: left;
	width: 30%;
	}

.box {
	margin: 0 1em 2em 1em;
	padding: 1em 1em 0em 1em;
	background: #fff;
	}
#col1 .box {
	margin-left: 7em;
	}
#col3 .box {
	margin-right: 7em;
	}

h1, h2, h3, h4, h5, p, ul {
	margin: 0;
	padding: 0 0 1em 0;
	}
p, ul {
	font: .9em/1.5em verdana, sans-serif;
	}
pre {
	margin: 0em 2em 1em 2em;
	padding: .5em 1em;
	font: .9em/1.2em monospace;
	}
ul {
	list-style: none;
	}
.clear {
	clear: both;
	font-size: 1px;
	line-height: 0;
	margin: 0;
	padding: 0;
	}
#footerwrap {
	margin: 2em 0;
	padding: 0 7em;
	}
#footer {
	font-size: .9em;
	margin: 0;
	padding: .3em 1em;
	}
.box, pre, #footer {
	border: 1px dotted #aaa;
	}
The layout I'd like is something like:

Code: Select all

http://www.roboveda.org/roboregister.html
Observed the round edge corners? I made that site using HTML tables and small graphics files but here in CSS, I want to know an easier method... Any help please?

Posted: Sat Aug 04, 2007 4:21 am
by matthijs
There are a lot of examples of rounded corners in css (try google), 456bereastreet.com has a few examples.

In a layout like you show you would make a vertical repeating image for the container div, a non-repeating background image in the header div for the top corners and a non-repeating background image on the footer for the bottom corners. if you have a flexible layout you will need more "hooks" and seperate images for all corners.

Posted: Sat Aug 04, 2007 8:15 am
by superdezign
If you have a separate image for all four corners, you can do it easily by creating 4 nested elements, 1 for each corner. This may not look visually appealing in your HTML, but if you use a proper element (instead of just div or span... something with a meaning), then it shouldn't seem useless.

i.e.

Code: Select all

<h1 id="header">
    <strong><strong><strong>
        Title
    </strong></strong></strong>
</h1>
There 4 nested elements: H1, strong, strong, and strong. Then, you'd style those with CSS.

i.e.

Code: Select all

/* Top left */
#header {
background: #FFF url(path/to/images/top-left.gif) no-repeat top left;
}
/* Top right */
#header strong {
background: #FFF url(path/to/images/top-right.gif) no-repeat top right;
}
/* etc... */

Posted: Sun Aug 05, 2007 11:11 am
by legend986
Thanks a lot... Works like a charm... :)