css tab menu [Archive] - WebDeveloper.com

stephan.gerlach

04-19-2006, 02:32 AM

I am just creating a tab menu with css. I am currently using the code below

<style type="text/css">

.main_nav {
list-style: none;
margin-left: 0px;
padding-left: 0px;
}

.main_nav li{
display: inline;
background-color: #34642e;
padding: 0px;
margin: 3px;
}

.main_nav li:hover{
display: inline;
background-color: #ff642e;
margin: 3px;
width: 50px;
}

.main_nav a {
text-decoration: none;
color: #ffffff;
}

.main_nav a:hover {
color: #00ff00;
background-color: #ff642e;
}

.link {
display:inline;
}

.left_top {
background: url(gfx/tl.gif) no-repeat top left;
display: inline;
width: 10px;
}
.right_top {
background: url(gfx/tr.gif) no-repeat top right;
display: inline;
width: 10px;
}

</style>
</head>
<body>

<ul class="main_nav">
<li>
<a href="http://localhost/projects/code/">
<div class="left_top">   </div>
<div class="link">Home</div>
<div class="right_top">   </div></a></li>
<li>
<a href="http://localhost/projects/code/">
<div class="left_top">   </div>
<div class="link">About Us</div>
<div class="right_top">   </div></a></li>
<li>
<a href="http://localhost/projects/code/">
<div class="left_top">   </div>
<div class="link">Contact Us</div>
<div class="right_top">   </div></a></li>
</ul>

The main problem I have is as you can see i have a lot of   in my code. The reason for this is that for some reason I can't set the width or height of the divs which have the class "left_top" and "right_top".

Any Help??

jogol

04-19-2006, 03:59 AM

best practice for what you want to achieve would be:

#menu {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url("tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url("tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {
color:#000;
}
#menu a:hover {
background-position:0% -42px;
}
#menu a:hover span {
background-position:100% -42px;
}
}
<div id="menu">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
the trick is to set the left part of the menu bg in the a and the right part of the menu bg in the span.

the left bg is a rather short image (http://exploding-boy.com/images/cssmenus/tableftB.gif) and the right bg is rather long to avoid gaps when there is longer link text (http://exploding-boy.com/images/cssmenus/tabrightB.gif)

this whole code and info is taken from http://exploding-boy.com/images/cssmenus/menus.html

there is a nice free to use code/design gallery

using this technique u can´t go wrong. there isn´t even a flash when hovering the menu cause the default and hover state of the menu is loaded in one image, which is just changed in position in the css to create the hover effect.

stephan.gerlach

04-19-2006, 04:32 AM

Thanks. I used your code and shuffled it around a bit and now it works fine.

Thanks alot