Solved

Overlapping tabbed menu and current page

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Analytics - viewing a page 10 83
auto play video on web page 4 58
Internet Explorer View > Style menu 3 33
Drag & Drop Error 5 30
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to count occurrences of each item in an array.

734 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