if our webmasters here at daniweb would be so kind

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.

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

0

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

vishesh

Nearly a Posting Virtuoso

1,381 posts since Oct 2006

Reputation Points: 85

Solved Threads: 42

5 Years Ago

0

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 :)

cscgal

The Queen of DaniWeb

Administrator

19,421 posts since Feb 2002

Reputation Points: 1,474

Solved Threads: 229

5 Years Ago

0

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?

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

0

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.

vishesh

Nearly a Posting Virtuoso

1,381 posts since Oct 2006

Reputation Points: 85

Solved Threads: 42

5 Years Ago

0

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

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

0

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>RoundCorners</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)

Spaiz

Newbie Poster

20 posts since May 2007

Reputation Points: 14

Solved Threads: 0

5 Years Ago

0

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>RoundCorners</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;
}

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

0

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

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

0

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.

cscgal

The Queen of DaniWeb

Administrator

19,421 posts since Feb 2002

Reputation Points: 1,474

Solved Threads: 229

5 Years Ago

0

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?

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

0

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.

Spaiz

Newbie Poster

20 posts since May 2007

Reputation Points: 14

Solved Threads: 0

4 Years Ago

0

Isn't this CSS?

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

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

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?

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

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.

sinjix_media

Light Poster

25 posts since Mar 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

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?

roryt

Nearly a Posting Virtuoso

1,286 posts since Oct 2005

Reputation Points: 178

Solved Threads: 15

4 Years Ago

0

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.

cscgal

The Queen of DaniWeb

Administrator

19,421 posts since Feb 2002

Reputation Points: 1,474

Solved Threads: 229

if our webmasters here at daniweb would be so kind

This article has been dead for over three months