Site Layout and Usability RSS Site Layout and Usability RSS

if our webmasters here at daniweb would be so kind

Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: Mar 2006
Posts: 25
Reputation: sinjix_media is an unknown quantity at this point 
Solved Threads: 0
sinjix_media's Avatar
sinjix_media sinjix_media is offline Offline
Light Poster

if our webmasters here at daniweb would be so kind

 
0
  #1
Nov 17th, 2006
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: vishesh is on a distinguished road 
Solved Threads: 36
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

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

 
0
  #2
Nov 18th, 2006
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2002
Posts: 12,036
Reputation: cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light 
Solved Threads: 130
Administrator
Staff Writer
cscgal's Avatar
cscgal cscgal is offline Offline
The Queen of DaniWeb

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

 
0
  #3
Nov 23rd, 2006
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
Dani the Computer Science Gal
Follow my Twitter feed! twitter.com/daniweb
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2006
Posts: 25
Reputation: sinjix_media is an unknown quantity at this point 
Solved Threads: 0
sinjix_media's Avatar
sinjix_media sinjix_media is offline Offline
Light Poster

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

 
0
  #4
Nov 23rd, 2006
•
•
•
•
Originally Posted by cscgal View Post
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: vishesh is on a distinguished road 
Solved Threads: 36
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

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

 
0
  #5
Nov 23rd, 2006
•
•
•
•
Originally Posted by sinjix_media View Post
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2006
Posts: 25
Reputation: sinjix_media is an unknown quantity at this point 
Solved Threads: 0
sinjix_media's Avatar
sinjix_media sinjix_media is offline Offline
Light Poster

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

 
0
  #6
May 20th, 2007
I STILL haven't figured out a good way for doing this.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2007
Posts: 14
Reputation: Spaiz is an unknown quantity at this point 
Solved Threads: 0
Spaiz Spaiz is offline Offline
Newbie Poster

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

 
0
  #7
May 23rd, 2007
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)
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2006
Posts: 25
Reputation: sinjix_media is an unknown quantity at this point 
Solved Threads: 0
sinjix_media's Avatar
sinjix_media sinjix_media is offline Offline
Light Poster

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

 
0
  #8
May 23rd, 2007
•
•
•
•
Originally Posted by Spaiz View Post
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;
}
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2006
Posts: 25
Reputation: sinjix_media is an unknown quantity at this point 
Solved Threads: 0
sinjix_media's Avatar
sinjix_media sinjix_media is offline Offline
Light Poster

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

 
0
  #9
May 23rd, 2007
Oh yeah, and is it possible to have a border on it as well?
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2002
Posts: 12,036
Reputation: cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light 
Solved Threads: 130
Administrator
Staff Writer
cscgal's Avatar
cscgal cscgal is offline Offline
The Queen of DaniWeb

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

 
0
  #10
May 23rd, 2007
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.
Dani the Computer Science Gal
Follow my Twitter feed! twitter.com/daniweb
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the Site Layout and Usability Forum
Thread Tools Search this Thread



blogging content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server site tables template tips tomtom url wave web website websitedesignreview web_development web_sites
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC