Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    LSJ
    LSJ is offline
    New to the CF scene
    Join Date
    Oct 2008
    Location
    San Diego
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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/archive...gation-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
    Code:
    <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
    Code:
    /*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)



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

    XHTML

    Code:
    <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
    Code:
    /*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)



    Thanks for reading!

    P.S. Here is my doctype, in case it makes a difference:
    Code:
    <!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">
    Last edited by LSJ; 05-13-2009 at 10:27 PM. Reason: to add dtd

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Got this to work fine on my end.
    Code:
    <!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>
    

  • Users who have thanked Apostropartheid for this post:

    LSJ (05-14-2009)

  • #3
    LSJ
    LSJ is offline
    New to the CF scene
    Join Date
    Oct 2008
    Location
    San Diego
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you!

    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?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by LSJ View Post
    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.
    Last edited by Rowsdower!; 05-14-2009 at 02:42 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    LSJ
    LSJ is offline
    New to the CF scene
    Join Date
    Oct 2008
    Location
    San Diego
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks

    Rowsdower! - that helps. Thank you

    One more small question - how do I mark this thread resolved?
    Last edited by LSJ; 05-18-2009 at 05:40 PM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need the source Image

    Hay,

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

    Thanks,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •