i would love to learn about what methods were used to create the rounded corners for your tables here @ daniweb.
i run a vbulletin message board and i've done some searches on vbulletin.org and .com for rounded corners and there were many methods to choose from.... also many methods that were debated.

i would also love to know what method you use here to display your welcome header. i understand there is a mod @ vbulletin.org called welcome headers, but i was wondering if that was the one u used here.

Member Avatar for GreenDay2001

several ways to do that:
1. use tables and images to do that
2. use css and images
3. use javascript(most reliable and most probably used at daniweb to)
4. CSS3(which is not yet supported by browsers)

for a javascript snippet
http://www.html.it/articoli/nifty/index.html

We use the CSS method because I was having a problem getting the JavaScript method to be as cross-compatible among browsers and platforms as I would have liked.

All hacks are custom so nothing off of vB.org :)

We use the CSS method because I was having a problem getting the JavaScript method to be as cross-compatible among browsers and platforms as I would have liked.

All hacks are custom so nothing off of vB.org :)

so u just do the old fashioned 4 images in a table CSS thing?

Member Avatar for GreenDay2001

so u just do the old fashioned 4 images in a table CSS thing?

it's not old fashioned, i suppose. css is even needed when you use javascript. also several people still use that old method.

I STILL haven't figured out a good way for doing this.

There's another way to do it, pure css.

Try this:

<html>
<head>
<title>Round Corners</title>
<style>
*{margin:0}
body{font:105% arial;text-align:center;padding-top:4em}
h1{color:white;text-align:center;padding:10px 0 10px 0}
.sm_box{margin:0 auto;width:50%}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#7fdcff;overflow:hidden;border:0 solid #7fdcff;border-width:0 1px}
.sm_box .a{margin:0 5px;background:#7fdcff;border:0}
.sm_box .b{margin:0 3px;border-width:0 2px}
.sm_box .c{margin:0 2px}
.sm_box .d{height:2px;margin:0 1px}
.sm_box .content{padding:0}
</style>
</head>
<body>
 <div class=sm_box>
  <div class=a></div><div class=b></div><div class=c></div><div class=d></div>
  <div class=content>
   <h1>Round<br>Corners</h1>
  </div>
  <div class=d></div><div class=c></div><div class=b></div><div class=a></div>
 </div>
</body>
</html>

The idea is to create 4 lines each is 1px high, and each line is shorter than the other one by 1 or 2 px:

-----------
  ---------------
 -----------------
-------------------
       content...
-------------------
 -----------------
  ---------------
    -----------

and that makes the round corner effect.
:)

p.s. daniweb corners are made with jquery (i think so)

There's another way to do it, pure css.

Try this:

<html>
<head>
<title>Round Corners</title>
<style>
*{margin:0}
body{font:105% arial;text-align:center;padding-top:4em}
h1{color:white;text-align:center;padding:10px 0 10px 0}
.sm_box{margin:0 auto;width:50%}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#7fdcff;overflow:hidden;border:0 solid #7fdcff;border-width:0 1px}
.sm_box .a{margin:0 5px;background:#7fdcff;border:0}
.sm_box .b{margin:0 3px;border-width:0 2px}
.sm_box .c{margin:0 2px}
.sm_box .d{height:2px;margin:0 1px}
.sm_box .content{padding:0}
</style>
</head>
<body>
 <div class=sm_box>
  <div class=a></div><div class=b></div><div class=c></div><div class=d></div>
  <div class=content>
   <h1>Round<br>Corners</h1>
  </div>
  <div class=d></div><div class=c></div><div class=b></div><div class=a></div>
 </div>
</body>
</html>

The idea is to create 4 lines each is 1px high, and each line is shorter than the other one by 1 or 2 px:

-----------
  ---------------
 -----------------
-------------------
       content...
-------------------
 -----------------
  ---------------
    -----------

and that makes the round corner effect.
:)

p.s. daniweb corners are made with jquery (i think so)

WOW! That is AMAZING! Is that totally cross browser compatible!?
You are a god-send bro!
Listen, I have these classes I want to modify to be the same as they are shown below, but with rounded corners. Can you change one for me as an example?

.tcat
{
background: #869BBF url(../../images/gradients/gradient_tcat.gif) repeat-x top left;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #FFFF66;
text-decoration: underline;
}
.thead
{
background: #5C7099 url(../../images/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFF00;
}

Oh yeah, and is it possible to have a border on it as well?

DaniWeb corners use JQuery to dynamically insert multiple divs at the top and bottom of the div that needs to be rounded using the same technique as Spaiz illustrated.

DaniWeb corners use JQuery to dynamically insert multiple divs at the top and bottom of the div that needs to be rounded using the same technique as Spaiz illustrated.

What about the borders?
I don't mean to nag, but did you see my other question?

Oh yeah, and is it possible to have a border on it as well?

Check those two lines from the code I posted above:

.sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d,.sm_box .content{background:#7fdcff;overflow:hidden;border:0 solid #7fdcff;border-width:0 1px}
.sm_box .a{margin:0 5px;background:#7fdcff;border:0}

try to play with the colors (change all 3 #7fdcff to something different), that way you will undarstand more how it works, and you will get the borders you want :)

or change all the #7fdcff to #000000 one by one and refresh the window each time, to see what change.

Isn't this CSS?

$('div#heading').corner("cc:#FFFFFF top");  $('div.box').corner("cc:#FFFFFF"); $('.panel').corner("cc:#FFFFFF");

We use the CSS method because I was having a problem getting the JavaScript method to be as cross-compatible among browsers and platforms as I would have liked.

All hacks are custom so nothing off of vB.org :)

It looks like you are using JS again.
How did you fix the cross-compatibility issue?

DaniWeb corners use JQuery to dynamically insert multiple divs at the top and bottom of the div that needs to be rounded using the same technique as Spaiz illustrated.

Im so sorry.
I didn't see that post.
Please ignore my last post.

It is awesome how it is done but it seems to me that it would create alot of extra code. Does anyone know anymore about CSS3?

Safari, which is now available for Windows too, is CSS3 compatible. I suspect the other browsers out there will be rolling out their own CSS3 versions in the somewhat near future.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.