[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Overlapping tabbed menu and current page

Posted on 2011-02-12
13
Medium Priority
?
1,073 Views
Last Modified: 2012-05-11
Hello experts.
I 'm using this tutorial:http://www.henryhoffman.com/CSS-overlapping-tabbed-navigation.html?searched=tabbed&advsearch=oneword&highlight=ajaxSearch_highlight+ajaxSearch_highlight1
I have problem to style the menu for the current page.It should look like the hover style.
Any help?
<style type="text/css">
#nav3 *{font:1em Arial, sans-serif;text-decoration:none;color:#669900;list-style:none;margin:0;padding:0;line-height:1em} /*Reset browsers and apply basic formatting*/
#nav3 li{display:inline}
#nav3 li *{height:26px;float:left;cursor:pointer;cursor:hand}
#nav3 a{background:url(images/Detailmenu/left.jpg) left no-repeat;padding-left:47px;} /*Applys the left segment of the image and adds the grey bottom border*/
#nav3 .right{padding-right:47px}
#nav3 .center{background:url(images/Detailmenu/center.jpg) repeat-x;margin-right:-47px;min-width:47px;height:26px;padding:11px 0 8px 0;voice-family: "\"}\"";voice-family:inherit;height:20px;} /*Applys the seamless background*/
#nav3 .start{background:url(images/Detailmenu/farleft.jpg) left no-repeat} /*Applys the far left corner*/
#nav3 .end{background:url(images/Detailmenu/farright.jpg) right no-repeat;padding-right:94px} /*Applys the far right corner*/
/*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
#nav3 a:hover{background:url(images/Detailmenu/right.jpg)}
#nav3 a.start:hover{background:url(images/Detailmenu/farlefthover.jpg)}
#nav3 a:hover .end{background:url(images/Detailmenu/farrighthover.jpg) right}
#nav3 a:hover .center{background:url(images/Detailmenu/centerhover.jpg);color:#000;height:26px;padding:8px 0 0px 0;voice-family: "\"}\"";voice-family:inherit;height:18px;}
#nav3 a:hover .right{background:url(images/Detailmenu/lefthover.jpg) right;padding-right:94px;margin-right:-47px;position:relative}
</style>
<body id="TEST1">
<ul id="nav3">
 <li class="TEST1">
  <a href="#" class="start">
   <span class="right">
    <span class="center">Test
    </span>
   </span>
  </a>
 </li>
 <li class="TEST2">
  <a href="#">
   <span class="right">
    <span class="center">Test
    </span>
   </span>
  </a>
 </li>
 <li class="TEST3">
  <a href="#">
   <span class="right">
    <span class="center">Test
    </span>
   </span>
  </a>
 </li>
 <li class="TEST4">
  <a href="#">
   <span class="right">
    <span class="center">Test
    </span>
   </span>
  </a>
 </li>
 <li class="TEST5">
  <a href="#">
   <span class="end">
    <span class="center">Test
    </span>
   </span>
  </a>
 </li>
</ul>
</body>

Open in new window

0
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
13 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 34877906
Can you please be more specific? What, exactly, is the problem?
0
 
LVL 2

Author Comment

by:Panos
ID: 34877934
Hi.
I need to style the current page like the hover style.
f.e if i'm on the TEST1 page i want the TEST1 li show like the hover style.
I know that i have to set an id in the body like in my example but it is a little complicated because i have to check for the left-right and center class too.
i hope you will understand
0
 
LVL 43

Expert Comment

by:David S.
ID: 34897572
Are you really testing in IE5? If not, you should stop using the voice-family hacks. (I've removed them from the code posted below.)

Also it's best to avoid using the universal selector ("*").

Try this:
#nav3 ul{font:1em Arial, sans-serif;text-decoration:none;color:#690;list-style:none;margin:0;padding:0;line-height:1em} /*Reset browsers and apply basic formatting*/
#nav3 li{display:inline}
#nav3 li a,#nav3 li span{height:26px;float:left;cursor:pointer}
#nav3 a{background:url(images/Detailmenu/left.jpg) left no-repeat;padding-left:47px;} /*Applys the left segment of the image and adds the grey bottom border*/
#nav3 .right{padding-right:47px}
#nav3 .center{background:url(images/Detailmenu/center.jpg) repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 8px 0;height:20px;} /*Applys the seamless background*/
#nav3 .start{background:url(images/Detailmenu/farleft.jpg) left no-repeat} /*Applys the far left corner*/
#nav3 .end{background:url(images/Detailmenu/farright.jpg) right no-repeat;padding-right:94px} /*Applys the far right corner*/
/*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
#nav3 a:hover[b],#TEST2 #nav3 .TEST2 a[/b]{background:url(images/Detailmenu/right.jpg)}
#nav3 a.start:hover[b],#TEST1 #nav3 .TEST1 a.start[/b]{background:url(images/Detailmenu/farlefthover.jpg)}
#nav3 a:hover .end[b],#TEST1 #nav3 .TEST1 .end,#TEST2 #nav3 .TEST2 .end[/b]{background:url(images/Detailmenu/farrighthover.jpg) right}
#nav3 a:hover .center[b],#TEST1 #nav3 .TEST1 .center,#TEST2 #nav3 .TEST2 .center[/b]{background:url(images/Detailmenu/centerhover.jpg);color:#000;padding:8px 0 0 0;height:18px;}
#nav3 a:hover .right[b],#TEST1 #nav3 .TEST1 .right,#TEST2 #nav3 .TEST2 .right[/b]{background:url(images/Detailmenu/lefthover.jpg) right;padding-right:94px;margin-right:-47px;position:relative}

Open in new window

0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 2

Author Comment

by:Panos
ID: 34898165
Hi.
I'm not testing on ie5.I did just copy the css style from the link.
Your code is not working .
The hover does not work,the current too and the text-decoration is not none.
0
 
LVL 43

Expert Comment

by:David S.
ID: 34898932
Apparently the BBcode tags can't be used inside a code block.

#nav3 ul,#nav3 li,#nav3 a{font:1em Arial, sans-serif;text-decoration:none;color:#690;list-style:none;margin:0;padding:0;line-height:1} /*Reset browsers and apply basic formatting*/
#nav3 li{display:inline}
#nav3 li a,#nav3 li span{height:26px;float:left;cursor:pointer}
#nav3 a{background:url(images/Detailmenu/left.jpg) left no-repeat;padding-left:47px;} /*Applys the left segment of the image and adds the grey bottom border*/
#nav3 .right{padding-right:47px}
#nav3 .center{background:url(images/Detailmenu/center.jpg) repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 8px 0;height:20px;} /*Applys the seamless background*/
#nav3 .start{background:url(images/Detailmenu/farleft.jpg) left no-repeat} /*Applys the far left corner*/
#nav3 .end{background:url(images/Detailmenu/farright.jpg) right no-repeat;padding-right:94px} /*Applys the far right corner*/
/*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
#nav3 a:hover,#TEST2 #nav3 .TEST2 a{background:url(images/Detailmenu/right.jpg)}
#nav3 a.start:hover,#TEST1 #nav3 .TEST1 a.start{background:url(images/Detailmenu/farlefthover.jpg)}
#nav3 a:hover .end,#TEST1 #nav3 .TEST1 .end,#TEST2 #nav3 .TEST2 .end{background:url(images/Detailmenu/farrighthover.jpg) right}
#nav3 a:hover .center,#TEST1 #nav3 .TEST1 .center,#TEST2 #nav3 .TEST2 .center{background:url(images/Detailmenu/centerhover.jpg);color:#000;padding:8px 0 0 0;height:18px;}
#nav3 a:hover .right,#TEST1 #nav3 .TEST1 .right,#TEST2 #nav3 .TEST2 .right{background:url(images/Detailmenu/lefthover.jpg) right;padding-right:94px;margin-right:-47px;position:relative}

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 34902392
Hi kravimir.
Sorry i had to leave.
You are near the solution.Now the current style is working but the hover is not working well.
Take a look to the screenshots.The arrows are the hover.
screen.gif
0
 
LVL 2

Author Comment

by:Panos
ID: 34902400
Interesting will be the current and hover for the last menu item too.
0
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 34902527
Hmm. I expect one or two of the background images will need to be modified to allow that. There's a problem of should the hovered tab overlap the current tab or vice versa. Overlapping tabs like this just aren't designed to act like you want them to. I recommend you consider switching to non-overlapping tabs.
0
 
LVL 2

Author Comment

by:Panos
ID: 34902596
I see.
I think i need two extra images .I will make some tests and come back.
The other way would be to style only f.e the color of the current menu item.
Can you make the changes for this last case?
0
 
LVL 2

Author Comment

by:Panos
ID: 34904316
Hi again.
It is more complicated than i thought using the images.
Using a different font colour is doing for me the job too.The code below is working fine.
Thank you for your help.

#nav3 ul,#nav3 li,#nav3 a{font:1em Arial, sans-serif;text-decoration:none;color:#690;list-style:none;margin:0;padding:0;line-height:1}
#nav3 li{display:inline}
#nav3 li a,#nav3 li span{height:26px;float:left;cursor:pointer}
#nav3 a{background:url(images/Detailmenu/left.jpg) left no-repeat;padding-left:47px;}
#nav3 .right{padding-right:47px}
#nav3 .center{background:url(images/Detailmenu/center.jpg) repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 8px 0;height:20px;}
#nav3 .start{background:url(images/Detailmenu/farleft.jpg) left no-repeat}
#nav3 .end{background:url(images/Detailmenu/farright.jpg) right no-repeat;padding-right:94px}
#nav3 a:hover{background:url(images/Detailmenu/right.jpg);}
#nav3 a.start:hover{background:url(images/Detailmenu/farlefthover.jpg);}
#nav3 a:hover .end{background:url(images/Detailmenu/farrighthover.jpg) right;}
#nav3 a:hover .center{background:url(images/Detailmenu/centerhover.jpg);color:#690;padding:8px 0 0 0;height:18px;}
#nav3 a:hover .right{background:url(images/Detailmenu/lefthover.jpg) right;padding-right:94px;margin-right:-47px;position:relative;}
#TEST1 #nav3 .TEST1  a,
#TEST2 #nav3 .TEST2  a,
#TEST3 #nav3 .TEST3  a,
#TEST4 #nav3 .TEST4  a,
#TEST5 #nav3 .TEST5  a{ color:#F30;}
#TEST1 #nav3 .TEST1 a:hover .center,
#TEST2 #nav3 .TEST2 a:hover .center,
#TEST3 #nav3 .TEST3 a:hover .center,
#TEST4 #nav3 .TEST4 a:hover .center,
#TEST5 #nav3 .TEST5 a:hover .center{ color:#F30;}

Open in new window

0
 
LVL 2

Author Closing Comment

by:Panos
ID: 34904318
Thank you
regards
panos
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question