Creating Tabs for website

[cbg]

Hello,

I am trying to put tabs on my webpage. I think I may be doing something wrong with copying the codes. My Ideal type of Tabs are rounded with one slightly overlapping another with a fading out blue color.

Any and all suggestion are welcomed!

www.chesterbillinggroup.com

[ddadmin]

You might try these tabs: http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/

[cbg]

OMG - exactly what I am looking for. I will let you know how it turns out!!!
;)

[ryanspano7]

Hi, this is Ryan.
Actually i want to create the tab for the website, But i have no direction about this. So i want to direction for this work and some sugesstion also. So please reply the sugesstions. (http://www.tumblr.com/blog/maxburn123)

Thankyou

[cbg]

Ok,

so I have the tabs. However, now I need to know how to put in the content. Mind you I am not experienced in this. That is why I am asking what some might think as trivial questions. So when you explain this to me, pretend I am 3 so I can understand it. Also, on the DD website the tabs are more round, mine is more square is there a way I can fix that, OH and make the tabs larger? I am trying to go for a soft yet sophisticated look (if that makes sense).

BTW, if you go on my website (physician resources) you'll see what I mean about the buttons. I haven't changed the url just the name of the buttons so far.

Thank you in advance for your time and patience (LOL).

www.chesterbillinggroup.com

[ddadmin]

Based on your code I assume you've settled on this menu: http://www.dynamicdrive.com/style/csslibrary/item/overlapping-horizontal-tabs/ A few points:

1) The images that make up the tabs are currently not uploaded onto your server. You should upload them ("righttabdefault.gif" and "righttabselected") to the /media sub directory on your site, or modify the path to the images inside the CSS to point to where these images are located, for example:


background: transparent url(media/righttabdefault.gif) 100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;

2) Can you elaborate on what you mean by "how to put in the content"?

3) You said:


Also, on the DD website the tabs are more round, mine is more square is there a way I can fix that, OH and make the tabs larger?

The green tabs on DD most closely resemble these: http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs/ As far as making them rounder or bigger, basically it comes down to using your favorite graphics editor to modify the look of the images that make up the tabs.

[Mastersp]

"How to put in the content" I assume he means how to put this onto a webpage.
On a side note does


-moz-border-radius: 15px;
border-radius: 15px;

work on images?

[jscheuer1]

does


-moz-border-radius: 15px;
border-radius: 15px;

work on images?

Yes in supporting browsers, which includes all the latest versions of the major browsers, as well as most of the current version niche browsers. The only slightly tricky part is that in IE 9, you would need a standards invoking DOCTYPE for the page. Be aware though that IE less than 9 will not support this and that earlier versions of some browsers like Chrome, Safari and Konquerer would each require vendor specific properties. But as this is purely a cosmetic effect, I wouldn't worry about any of those. In the same spirit one can skip the Mozilla specific -moz-border-radius property, Mozilla based browsers like Firefox haven't required it for quite some time.

[cbg]

Wow!

Thank you all for your expertise! I am learning alot as I go along! Thanks again for all of your help.

Have a Healthy & HAPPY NEW YEAR!