Please support our Site Layout and Usability advertiser: Internet Marketing Services
Views: 4080 | Replies: 16
 |
•
•
Join Date: Mar 2006
Posts: 25
Reputation: 
Rep Power: 3
Solved Threads: 0
Light Poster
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.
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.
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 5
Solved Threads: 32
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
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.
•
•
Join Date: Feb 2002
Location: Lawn Guylen, NY
Posts: 11,070
Reputation:
Rep Power: 33
Solved Threads: 118
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
All hacks are custom so nothing off of vB.org
Dani the Computer Science Gal
•
•
Join Date: Mar 2006
Posts: 25
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
•
•
•
•
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?
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 5
Solved Threads: 32
•
•
•
•
Originally Posted by sinjix_media
so u just do the old fashioned 4 images in a table CSS thing?
•
•
Join Date: Mar 2006
Posts: 25
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
I STILL haven't figured out a good way for doing this.
•
•
Join Date: May 2007
Posts: 14
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
There's another way to do it, pure css.
Try this:
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:
and that makes the round corner effect.
p.s. daniweb corners are made with jquery (i think so)
Try this:
HTML Syntax (Toggle Plain Text)
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)
•
•
Join Date: Mar 2006
Posts: 25
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
•
•
•
•
Originally Posted by Spaiz
There's another way to do it, pure css.
Try this:
HTML Syntax (Toggle Plain Text)
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;
} •
•
Join Date: Mar 2006
Posts: 25
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
Oh yeah, and is it possible to have a border on it as well?
•
•
Join Date: Feb 2002
Location: Lawn Guylen, NY
Posts: 11,070
Reputation:
Rep Power: 33
Solved Threads: 118
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
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
