Solved

Overlapping tabbed menu and current page

Posted on 2011-02-12
13
1,044 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
Comment Utility
Can you please be more specific? What, exactly, is the problem?
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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.
Comment Utility
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
 
LVL 2

Author Comment

by:Panos
Comment Utility
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.
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you
regards
panos
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 dynamically set the form action using jQuery.

744 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

15 Experts available now in Live!

Get 1:1 Help Now