Solved

Overlapping tabbed menu and current page

Posted on 2011-02-12
13
1,051 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
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 42

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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 42

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 42

Accepted Solution

by:
David S. earned 500 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to Left-Align Navigation bar? 4 26
Target h5 of a div 3 16
Please help me find a theme close to these two themes....... 9 50
what are list of ebay api errors 1 16
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

816 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now