?
Solved

Overlapping tabbed menu and current page

Posted on 2011-02-12
13
Medium Priority
?
1,074 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
  • 7
  • 3
11 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

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.
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 13 hours left to enroll

864 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