943,545 Members | Top Members by Rank

Web Development > Web Design > Site Layout and Usability > if our webmasters here at daniweb would be so kind
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Nov 17th, 2006
0

if our webmasters here at daniweb would be so kind

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
sinjix_media is offline Offline
25 posts
since Mar 2006
Permalink
Nov 18th, 2006
0

Re: if our webmasters here at daniweb would be so kind

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
Last edited by vishesh; Nov 18th, 2006 at 5:39 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Nov 23rd, 2006
0

Re: if our webmasters here at daniweb would be so kind

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
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002
Permalink
Nov 23rd, 2006
0

Re: if our webmasters here at daniweb would be so kind

Click to Expand / Collapse  Quote originally posted by cscgal ...
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?
Reputation Points: 10
Solved Threads: 0
Light Poster
sinjix_media is offline Offline
25 posts
since Mar 2006
Permalink
Nov 23rd, 2006
0

Re: if our webmasters here at daniweb would be so kind

Click to Expand / Collapse  Quote originally posted by sinjix_media ...
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.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
May 20th, 2007
0

Re: if our webmasters here at daniweb would be so kind

I STILL haven't figured out a good way for doing this.
Reputation Points: 10
Solved Threads: 0
Light Poster
sinjix_media is offline Offline
25 posts
since Mar 2006
Permalink
May 23rd, 2007
0

Re: if our webmasters here at daniweb would be so kind

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

Try this:
HTML Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Round Corners</title>
  4. <style>
  5. *{margin:0}
  6. body{font:105% arial;text-align:center;padding-top:4em}
  7. h1{color:white;text-align:center;padding:10px 0 10px 0}
  8. .sm_box{margin:0 auto;width:50%}
  9. .sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
  10. .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}
  11. .sm_box .a{margin:0 5px;background:#7fdcff;border:0}
  12. .sm_box .b{margin:0 3px;border-width:0 2px}
  13. .sm_box .c{margin:0 2px}
  14. .sm_box .d{height:2px;margin:0 1px}
  15. .sm_box .content{padding:0}
  16. </style>
  17. </head>
  18. <body>
  19.  <div class=sm_box>
  20.   <div class=a></div><div class=b></div><div class=c></div><div class=d></div>
  21.   <div class=content>
  22.    <h1>Round<br>Corners</h1>
  23.   </div>
  24.   <div class=d></div><div class=c></div><div class=b></div><div class=a></div>
  25.  </div>
  26. </body>
  27. </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)
Reputation Points: 14
Solved Threads: 0
Newbie Poster
Spaiz is offline Offline
18 posts
since May 2007
Permalink
May 23rd, 2007
0

Re: if our webmasters here at daniweb would be so kind

Click to Expand / Collapse  Quote originally posted by Spaiz ...
There's another way to do it, pure css.

Try this:
HTML Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Round Corners</title>
  4. <style>
  5. *{margin:0}
  6. body{font:105% arial;text-align:center;padding-top:4em}
  7. h1{color:white;text-align:center;padding:10px 0 10px 0}
  8. .sm_box{margin:0 auto;width:50%}
  9. .sm_box .a,.sm_box .b,.sm_box .c,.sm_box .d{height:1px}
  10. .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}
  11. .sm_box .a{margin:0 5px;background:#7fdcff;border:0}
  12. .sm_box .b{margin:0 3px;border-width:0 2px}
  13. .sm_box .c{margin:0 2px}
  14. .sm_box .d{height:2px;margin:0 1px}
  15. .sm_box .content{padding:0}
  16. </style>
  17. </head>
  18. <body>
  19.  <div class=sm_box>
  20.   <div class=a></div><div class=b></div><div class=c></div><div class=d></div>
  21.   <div class=content>
  22.    <h1>Round<br>Corners</h1>
  23.   </div>
  24.   <div class=d></div><div class=c></div><div class=b></div><div class=a></div>
  25.  </div>
  26. </body>
  27. </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;
}
Reputation Points: 10
Solved Threads: 0
Light Poster
sinjix_media is offline Offline
25 posts
since Mar 2006
Permalink
May 23rd, 2007
0

Re: if our webmasters here at daniweb would be so kind

Oh yeah, and is it possible to have a border on it as well?
Reputation Points: 10
Solved Threads: 0
Light Poster
sinjix_media is offline Offline
25 posts
since Mar 2006
Permalink
May 23rd, 2007
0

Re: if our webmasters here at daniweb would be so kind

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.
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in Site Layout and Usability Forum Timeline: my dreamweaver mx webpage Pls help
Next Thread in Site Layout and Usability Forum Timeline: Confirmation of Bug





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC