/    Sign up×
Community /Pin to ProfileBookmark

css tab menu

Copy linkTweet thisAlerts:
Apr 19.2006

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

[code=html]

<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”>&nbsp;&nbsp;&nbsp;</div>
<div class=”link”>Home</div>
<div class=”right_top”>&nbsp;&nbsp;&nbsp;</div></a></li>
<li>
<a href=”http://localhost/projects/code/”>
<div class=”left_top”>&nbsp;&nbsp;&nbsp;</div>
<div class=”link”>About Us</div>
<div class=”right_top”>&nbsp;&nbsp;&nbsp;</div></a></li>
<li>
<a href=”http://localhost/projects/code/”>
<div class=”left_top”>&nbsp;&nbsp;&nbsp;</div>
<div class=”link”>Contact Us</div>
<div class=”right_top”>&nbsp;&nbsp;&nbsp;</div></a></li>
</ul>

[/code]

The main problem I have is as you can see i have a lot of

[code=html]&nbsp;[/code]

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??

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@jogolApr 19.2006 — best practice for what you want to achieve would be:

[CODE]#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;
}
}[/CODE]
[code=html]<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>[/code]
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.
Copy linkTweet thisAlerts:
@stephan_gerlachauthorApr 19.2006 — Thanks. I used your code and shuffled it around a bit and now it works fine.

Thanks alot
×

Success!

Help @stephan_gerlach spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...