Results 1 to 9 of 9

Thread: Creating Tabs for website

  1. #1
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Creating Tabs for website

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    DD Admin

  3. #3
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Thankyou
    Last edited by ryanspano7; 01-02-2012 at 08:09 PM.

  5. #5
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    Based on your code I assume you've settled on this menu: http://www.dynamicdrive.com/style/cs...rizontal-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:

    Code:
    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/cs...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.
    DD Admin

  7. #7
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    "How to put in the content" I assume he means how to put this onto a webpage.
    On a side note does
    Code:
    -moz-border-radius: 15px;
    border-radius: 15px;
    work on images?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Mastersp View Post
    does
    Code:
    -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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •