#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    1
    Rep Power
    0

    Rounded-corner tabbed menu bar


    I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help.

    Kate

    CSS CODE:

    #tabs8 {
    float:left;
    width:100%;
    background:#FCF1F6;
    border-bottom:4px solid #E276A7;
    overflow:hidden;
    position:relative;
    }
    #tabs8 ul {
    clear:left;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
    text-align:center;
    }
    #tabs8 ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0 0 0 1px;
    padding:0px 3px;
    position:relative;
    right:50%;
    }
    #tabs8 ul li a {
    display:block;
    margin:0 0 0 1px;
    padding:3px 0px;
    background:url("tableft8.gif") no-repeat left top;
    text-decoration:none;
    line-height:1.3em;}
    #tabs8 a span {
    background:url("tabright8.gif") no-repeat right top;
    padding:3px 10px;
    color:#333;
    line-height:1.3em;}

    #tabs8 ul li a:hover {
    background:#369;
    color:#fff;
    }
    #tabs8 ul li a.active,
    #tabs8 ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
    }-->




    HTML CODE:

    <div id="tabs8"><ul>
    <li id="current">
    <div align="center"><a href="index.html"><span>Home</span></a></div>
    </li>
    <li>
    <div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div>
    </li>
    <li>
    <div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div>
    </li>
    <li>
    <div align="center"><a href="gallery.html"><span>Gallery</span></a></div>
    </li>
    <li>
    <div align="center"><a href="blog.html"><span>Blog</span></a></div>
    </li>
    <li>
    <div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div>
    </li></ul></div>
  2. #2
  3. No Profile Picture
    gettin **** cold ouside bro
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Location
    Sofia, Bulgaria
    Posts
    133
    Rep Power
    153
    2 ways you can achieve this:
    1.make 2 png(or gif if its a single colour) files for each side and apply them to each one of the sides which has its good sides and bad sides:
    works in IE(one of the few things that actually work in IE for that matter) but a nightmare till you get it done
    2.css 3.0-doesnt work in IE but people should have learned by now that the ony thing that IE is good for is to download some other browser. add a class to each one of the divs in the tabs:
    class="div_tabs_menu"
    and then add the following to the css:

    Code:
    .div_tabs_menu{
    border-top-left-radius:5px 5px;
    -moz-border-radius-topleft:5px 5px;
    border-top-right-radius :5px 5px;
    -moz-border-radius-topright:5px 5px;
    }
    or different parameters if thats what you are after:
    Code:
    border-radius
    -moz-border-radius
    border-top-left-radius
    -moz-border-radius-topleft
    border-top-right-radius 
    -moz-border-radius-topright
    border-bottom-right-radius
    -moz-border-radius-bottomright
    border-bottom-left-radius
    -moz-border-radius-bottomleft

IMN logo majestic logo threadwatch logo seochat tools logo