•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 402,891 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,043 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser: Programming Forums
Views: 3750 | 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: 4
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 4:39 am.
•
•
Join Date: Feb 2002
Location: Lawn Guylen, NY
Posts: 10,892
Reputation:
Rep Power: 32
Solved Threads: 109
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
Do you run a computer-related website? Feature it in our niche link directory!
Do you run a computer-related website? Feature it in our niche link directory!
•
•
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: 4
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: 10,892
Reputation:
Rep Power: 32
Solved Threads: 109
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
Do you run a computer-related website? Feature it in our niche link directory!
Do you run a computer-related website? Feature it in our niche link directory!
|
•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
afghanistan ajax backup badge bbc blog blogger blogging blogs breach building code community competition dani daniweb data protection database election events government hate home internet iraq itv jbennet mac macs mail member news on osx php qmail security serunson server site smtp tags terror terrorist voters war web week wmd
- Is thank you enough? (C++)
- New Cool guy (Community Introductions)
- beamformer matlab LMS, RLS (Community Introductions)
- Please Help (Community Introductions)
- hello (Community Introductions)
- homepage hijack please help! (Viruses, Spyware and other Nasties)
- hello (Community Introductions)
- .NET challenged... at least that's what my therapist said. (ASP.NET)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: my dreamweaver mx webpage Pls help
- Next Thread: Dreamweaver wrapping text around Pics
