12 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I'v created a css tab bar menu made with rounded corners and different colors for active and hover but I can't get the active tab to raise. I've tried enlarging the height and placing margins but nothing seems to work...

Please advise?

sperks
Offline
Enthusiast
New York
Last seen: 15 years 22 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

Can you show use what you

It could be to do with LoVe HAte (the states need to be in order in your css)
:link, :visited, :hover, :active
Otherwise can you show use what you currently have or point us to a URL?

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Code...

Here is my css code:

#tabsmenu { float: left; width: 96.93%; font-size: 97%; line-height: normal; border-bottom: 0px solid #A3A8B2; margin: 10px 0px 0 10px; padding: 0px; }

* html #tabsmenu {
margin-bottom: 1em;
}

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

#tabsmenu li {
display: inline;
margin: 0;
padding: 0;
height: 25px;
}

#tabsmenu a {
float: left;
background: url("images/left-tab.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 10px;
text-decoration: none;
height: 25px;
}

#tabsmenu a span {
float: left;
display: block;
background: url("images/right-tab.gif") no-repeat right top;
padding: 3px 14px 3px 5px;
font-weight: normal;
color: #333;
margin: 0 1px 0 0;
height: 25px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a span {
float: none;
}
/* End IE5-Mac hack */

#tabsmenu #current a {
background: url("images/left-tab-hover.gif") left top no-repeat;
}

#tabsmenu #current a span {
background: url("images/right-tab-hover.gif") right top no-repeat;
color: #000;
font-weight: bold;
}

#tabsmenu a:hover {
background: url("images/left-tab-hover.gif") left top no-repeat;
}

#tabsmenu a:hover span {
background: url("images/right-tab-hover.gif") right top no-repeat;
color: #000;
}
#tabborder { height:1em; background:#FFEAB7;
}

sperks
Offline
Enthusiast
New York
Last seen: 15 years 22 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

can you put show me the HTML

can you put show me the HTML for the menu too?

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

HMTL

Sure. I removed the height and all my experimenting from the css because it wasn't working anyway...
But here is my HTML markup.

  • General Information
  • Ledger Information
  • Premises
  • Services
  • Features

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

SOMETHING TO LOOK AT...

I was doing some search on the web and came across this grid software http://www.activewidgets.com/grid/.

The bottom tab sample is what I would like to establish. Is this possible with css only? Or with a css/javascript combo?

sperks
Offline
Enthusiast
New York
Last seen: 15 years 22 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

I honestly can't see

I honestly can't see anything amiss there. If you're hover is working the current ID should too. The only thing that looks questionable is the order of your background image. I've always done url, repeat, left/right, top/bottom. If you still can't get it up and running I'll have a little play with it.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

?

Not sure what you mean when you say url left/right ect. Could you show me? Because I'm using rounded images the right image is extended as to provide enough room for text.

I've uploaded my custom images so you can see for yourself and maybe play with it.
Let me know what you think. Thanks for your help! Smile

Also note - the background color for this tab is #7F9DB9

AttachmentSize
right-tab-hover.gif 914 bytes
right-tab.gif 884 bytes
left-tab-hover.gif 429 bytes
left-tab.gif 422 bytes
sperks
Offline
Enthusiast
New York
Last seen: 15 years 22 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

You had:

You had:

background: url() left top no-repeat;

where I've always done:

background: url() no-repeat left top;

Actually, if you want to clean it up, put the following in to make sure:

#tabsmenu a {
background-color: #fff;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/left-tab.gif);
}
#tabsmenu a span {
background-color: #fff;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/right-tab.gif);
}

#tabsmenu #current a {
background-image: url(images/left-tab-hover.gif);
}
#tabsmenu #current a span {
background-image: url(images/left-tab-hover.gif);
}

#tabsmenu a:hover {
background-image: url(images/left-tab-hover.gif);
}
#tabsmenu a:hover span {
background-image: url(images/right-tab-hover.gif);
}

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

hum...

Thanks. Not sure about the clean up code I tried using it but it bad on my end. Also, I tried switching the order as you suggested but when I now play with the height of the hover tab (by increasing as to cause a raised effect) it only pushes everything below it down? So the whole raised hover and current tag issue is still my initial problem...

Any other suggestions? I want the hover and active tabs to be slightly raised. Once I figure out how to do that I'll re-create the hover images to fit the space. Make sense?

Thanks for your help. Wink

sperks
Offline
Enthusiast
New York
Last seen: 15 years 22 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

simple change for height is

simple change for height is to use:

a {background: url() no-repeat left 2px;}
and
a:hover {background: url() no-repeat left top;}

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

THANKS!

It worked! Thanks a bunch! I would have been forever trying to resolve that!

sumit
Offline
newbie
Delhi
Last seen: 15 years 14 weeks ago
Delhi
Joined: 2007-03-28
Posts: 1
Points: 0

Raised Tabbed Menu

Hi,

Could you please show me the final output. I still cant do it.

Thanks in advance