Need help applying single bkgrnd img navigation matrix technique to a vertical menu

LSJ

05-13-2009, 07:45 PM

Hi everyone,

This is my first post, and I'm afraid it's gonna be a long one. A while back I discovered the navigation matrix technique in a book called The Art & Science of CSS. The same sort of thing is described here: http://superfluousbanter.org/archives/2004/05/navigation-matrix/, although it's not the exact same example they used in the book.

I have used it successfully for horizontal menus several times. Now I am trying to create a vertical menu using the same technique, and it's not working. I'm hoping that someone here might be able to point out what I'm missing, or, if it's impossible to do maybe someone can explain why. If I can make this work it will come in handy a lot, especially when working with graphic designers who love fancy fonts...

First I'll paste in the code & image from the horizontal version, which is working fine:

XHTML

<ul id="navlist">
<li id="hm"><a href="#" id="urhere">HOME</a></li>
<li id="abt"><a href="about.html">ABOUT</a></li>
<li id="wrk"><a href="work.html">WORK</a></li>
<li id="cntct"><a href="contact.html">CONTACT</a></li>
</ul>

CSS
/*For Main Navigation*/
#navlist {
width: 298px;
height: 31px;
position: relative;
background: url(../images/main_nav.jpg);
margin: 10px 0px 0px 0px;
padding:0;
list-style-type:none;
}
#navlist li {
float: left;
}
#navlist li a {
position: absolute;
top:0;
margin:0;
padding:0;
display: block;
height: 30px;
background: url(../images/main_nav.jpg) no-repeat;
text-indent: -9999px;
overflow: hidden;
font-size: 1%;
}
li#hm a {
left: 0px;
width: 70px;
background-position: 0px 0px;
}
li#abt a {
left: 70px;
width: 70px;
background-position: -70px 0px;
}
li#wrk a {
left: 140px;
width: 70px;
background-position: -140px 0px;
}
li#cntct a {
left: 210px;
width: 88px;
background-position: -210px 0px;
}
li#hm a:hover {
background-position: 0px -31px;
}
li#abt a:hover {
background-position: -70px -31px;
}
li#wrk a:hover {
background-position: -140px -31px;
}
li#cntct a:hover {
background-position: -210px -31px;
}
#hm #urhere {
background-position: 0px -62px;
}
#abt #urhere {
background-position: -70px -62px;
}
#wrk #urhere {
background-position: -140px -62px;
}
#cntct #urhere {
background-position: -210px -62px;
}

IMAGE (298px wide by 93px high)

http://www.lauriesterlingjensen.com/test/phylliswongdesign2/images/main_nav.jpg

And here is the code and image for the vertical version, which is not working:

XHTML
<ul id="subnavlist">
<li id="prnt"><a href="#" id="current">Print</a></li>
<li id="brnd"><a href="michigan.html">Brand</a></li>
<li id="msc"><a href="solar.html">Miscellany</a></li>
</ul>

CSS
/*For Secondary Navigation*/
#subnavlist {
position:relative;
width:91px;
height:90px;
margin:0;
padding:0;
background: url(../images/sub_nav.jpg);
list-style-type:none;
}
#subnavlist li {
float:left
}
#subnavlist li a {
position:absolute;
top:0;
margin:0;
padding:0;
display:block;
height: 30px;
width: 91px;
background: url(../images/sub_nav.jpg) no-repeat;
text-indent: -9999px;
overflow: hidden;
font-size: 1%;
background-attachment:fixed;
}
li#prnt a {
left:0;
width:91px;
background-position:0px;
}
li#brnd a {
left:0;
width:91px;
background-position:0px;
}
li#msc a {
left:0;
width:91px;
background-position:0px;
}
li#prnt a:hover {
background-position:-91px 0;
}
li#brnd a:hover {
background-position:-91px 0;
}
li#msc a:hover {
background-position:-91px 0;
}
#prnt #current {
background-position: -182px 0;
}
#brnd #current {
background-position: -182px 0;
}
#msc #current {
background-position: -182px 0;
}

IMAGE (273px wide by 90px high)

http://www.lauriesterlingjensen.com/test/phylliswongdesign2/images/sub_nav.jpg

Thanks for reading!

P.S. Here is my doctype, in case it makes a difference:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Apostropartheid

05-13-2009, 10:43 PM

Got this to work fine on my end.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>miaow</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#subnavlist {
list-style: none;
}
#subnavlist a {
background: url(sub_nav.jpg);
width: 91px;
height: 30px;
text-indent: -999em;
display: block;
}
#brnd a {
background-position: 0 -30px;
}
#msc a {
background-position: 0 -60px;
}
#prnt a:hover {
background-position: -91px 0;
}
#brnd a:hover {
background-position: -91px -30px;
}
#msc a:hover {
background-position: -91px -60px;
}
#prnt #current {
background-position: -182px 0;
}
#brnd #current {
background-position: -182px -30px;
}
#msc #current {
background-position: -182px -60px;
}
</style>
</head>
<body>
<ul id="subnavlist">
<li id="prnt"><a href="#" id="current">Print</a></li>
<li id="brnd"><a href="michigan.html">Brand</a></li>
<li id="msc"><a href="solar.html">Miscellany</a></li>
</ul>
</body>
</html>

LSJ

05-14-2009, 12:17 AM

Rowsdower!

05-14-2009, 01:38 PM

CyanLight - that fixed it, thank you so much!

I just needed to add the overflow: hidden property back in, and then it worked perfectly.

I would like to make sure I understand what I was doing wrong.

I see that the main difference between your code and mine is the addition of the -30- and -60 for the top value of the background position for hover and current.

I had been thinking that the image should only be shifting to the left, and the top position should always stay the same...I'm grateful but still confused. Can you explain?

Hello and welcome to the forums!

If you didn't change the vertical position (the second number in the background-position rule) then all menu items would be using the "print" option because that is what is at "0" on the vertical alignment of the image.

To draw a comparison, when you used the horizontal menu the non-hovered links each used different horizontal numbers for the base state and then, when hovered, used new vertical numbers to make the change. The reverse is true and needed for a vertical menu using your vertical image. Really, only the alignment of the actual image -- not the menu alignment -- makes this slight change in technique necessary. If you laid your image out the same as your horizontal image you could use the exact same code. It's not always obvious at first look, but think about how the image changes work and you will see that you could position your menu any which way you want on the page and the only thing that affects how to align the bg image is the way in which the image is laid out.

Anyway, you had the state change part correct in theory (you moved the image left to show new states and kept the vertical consistent -- though wrong -- with the non-hover rule), but even the base state appearance was wrecked because you failed to move the image up for subsequent menu items.

I'm not sure if I'm explaining that well enough so let me know if you still have doubts.

LSJ

05-18-2009, 04:37 PM

Rowsdower! - that helps. Thank you :)

One more small question - how do I mark this thread resolved?

abduraooft

05-18-2009, 04:41 PM

See http://www.codingforums.com/postguide.htm
6) Thread prefixes usage. In some forums, you can select from a list a prefix to add to your thread's title, for example, a prefix of "resolved" once you've received a satisfactory answer to your question. To add a prefix after your thread has been initially posted, click on the "Edit" button under the first post of the thread, then the "Go Advanced" button. You have 14 days to update your thread's title.

fanjava

07-06-2011, 11:33 PM

Hay,

Can anyone attach, how the preview a "sub_nav.jpg" image?

Thanks,