Rounded Tab menu

[williamZanelli]

Hey guys,

 

I want to have a round  tabbed hortizontal menu, I tried using a background image/

 

The problem is the menu items [ie the menu tabs are of different sizes], so for some tabs the rounded tab image only covers part of the area it should cover.

 

So what I want is, to have rounded tab menu, which can accomadate a varible tab sizes

 

How do I tackle this problem?

 

Thanks for your thoughts in advance

 

Will

[williamZanelli]

My code is organised as below

 

<div>
<ul id="nav">
<li>
<a href="someURL.com">Menu item</a> </li>
<li>
<a href="someURL.com">Menu item</a> </li>
</ul>
</div>

[rhodesa]

you need to do what is called a "barned door"...or at least that is what i call it. basically, you have a really wide tab bg image...wider then you would ever use. then you have an absolutely positioned span that is the same height as the tab and like 10 pixels wide. position it on the right side of the tab and use the same BG image on it, but position the background image to the right too. here is an example that should work:

 

<style type="text/css">
  .clear {
    clear: both;
  }
  #nav {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #nav li {
    padding: 0;
    margin: 0;
    float: left;
    background: transparent url(images/bg_tabs.gif) no-repeat top left;
    height: 30px;
    margin: 0 5px;
    position: relative;
  }
  #nav a {
    display: block;
    padding: 3px 15px;
  }
  #nav span {
    position: absolute;
    right: 0;
    top: 0;
    background: transparent url(images/bg_tabs.gif) no-repeat top right;
    width: 10px;
    height: 30px;
  }
</style>
<ul id="nav">
  <li>
    <a href="#">Page 1</a>
    <span></span>
  </li>
  <li>
    <a href="#">Some other Page</a>
    <span></span>
  </li>
  <li>
    <a href="#">The last page with a long title</a>
    <span></span>
  </li>
</ul>
<div class="clear"></clear>

[williamZanelli]

Thanks for the detailed response Rhodesa.

 

You're a star!! 

[williamZanelli]

Ahhh,

 

Still a problem guys with this,

 

The issue i'm having is with the absolute and IE7

 

if I comment out absolute in the code below

#nav span {

   /*position: absolute;*/
   position:inherit;
       right: 0;
    top: 0;
    background: transparent url(/images/main_menu_bg.gif) no-repeat top right;
    width: 15px;
    height: 40px;
  }

 

Its works fine with IE7 and FF3, though the right side of the tab is square and not round, however if I have absolute the page goes all heywire

 

Any ideas?

 

 

 

[dbrimlow]

absolute positioning is not going to help. Rodhesha's example is fine for fixed width, pixel perfect fixed layouts.

 

But the "sliding doors" technique was created to have it auto-adust to widths and heights and be elastic with browser-size adjusted text.

 

Here is the original technique that explains each step. It WILL work.

 

sliding doors

[williamZanelli]

Thanks for the last link dbrimlow

 

I followed the instructions, and I end up with the with one side of the rounded tab showing, and the other missing.

 

Have a look at my site (The top menu specifically, where this issue resides)

http://www.cms3.darchy.com/

 

The CSS is located here..

http://www.cms3.darchy.com/templates/beez/css/layout.css

 

 

the structire of my website is

 

 <div id="menuTable">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

 

The CSS is

 

#menuTable{
   float:right;
    width:100%;
    /*background:yellow;*/
    font-size:93%;
    line-height:normal;

  }
  #menuTable ul {
    margin:0;
    padding:0;
    list-style:none;

  }
  #menuTable li{
    float:right;
    margin:0;
    padding:0;
    background:url('/images/main_menu_bg.gif') no-repeat right top; 
    height: 40px;
    margin: 2px 2px;
    color:#990033;
   
  }

  #menuTable a{
        display:block;
        background:url('/images/main_menu_bg.gif') no-repeat left top;
        margin-top:25px; 
margin-left: 15px;
margin-right: 15px;
text-decoration:none;
font-weight:bold; 
color:#FFFFFF;

}

 

Any idea.. how I could rectify this prob...?

 

[williamZanelli]

Anyone?

 

This is the best i've been able to do as yet - http://cms3.darchy.com/

 

Thanks in advance for your thopughts.