www.webdeveloper.com
Results 1 to 4 of 4

Thread: Vertical CSS sprite menu

  1. #1
    Join Date
    Apr 2013
    Posts
    4

    Exclamation Vertical CSS sprite menu

    Hello, I am trying to make a CSS sprite vertical navigation bar. I have used simillar principles to the horizontal, but changed the x and y values around. For some reason it is just not working. Below is the description of the image, CSS code and then the html. Help!

    • Each button is 150px by 150px
    • The normal states are on one side
    • The hover states are next to the normal
    • next to hover state I have put a down state, but I don't know how to work that



    Code:
    #navbar
    {
    	margin:0;
    	padding:0;
    	width:150px;
    	height:750px;
    	background-image:url(../Images/navbar.jpg);
    }
    
    #navbar li
    {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:150px;
    	height:150px;
    	text-align:center;
    	float:left;
    	line-height:40px;
    }
    
    #navbar a
    {
    	display:block;
    	height:150px;
    }
    
    #navbar a:hover
    {
    	background-image:url(../Images/navbar.jpg)
    }
    
    #btn1 {width:150px; height:150px;}
    #btn1 a:hover {background-position:-150px,0;}
    
    #btn2 {width:150px height:150px;;}
    #btn2 a:hover {background-position:-150px,150px;}
    
    #btn2 {width:150px height:150px;;}
    #btn2 a:hover {background-position:-150px,300px;}
    
    #btn2 {width:150px height:150px;;}
    #btn2 a:hover {background-position:-150px,450px;}
    
    #btn2 {width:150px height:150px;;}
    #btn2 a:hover {background-position:-150px,600px;}
    Code:
    <div id="menu">
    
    <ul id="navbar">
    <li id="btn1"><a href="index.html">Home</a></li>
    <li id="btn2"><a href="characters.html">Characters</a></li>
    <li id="btn3"><a href="blog.html">Bob Blog</a></li>
    <li id="btn4"><a href="contact.html">Contact Us</a></li>
    <li id="btn5"><a href="colour.html">Colour Bob</a></li>
    </ul>
    
    </div>

    Hope I make sense, thank you

    Gemzilla.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there gemzilla,

    may we have the navbar.jpg also.?

    coothead

  3. #3
    Join Date
    Apr 2013
    Posts
    4

    Thumbs up

    I couldn't find an upload point anywhere for an image but it is here at this address:
    http://www.bobproject.ismywebsite.co.uk/navbar.html

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there gemzilla,


    does this help the cause...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>sprite coding</title>
    
    <style type="text/css">
    
    #navbar {
        width:154px;
        margin:0;
        padding:2px;
        list-style-type:none;
        background-color:#000;
     }
    #navbar li {
        padding:2px;
     }
    #navbar a,#navbar span {
        position:relative;
        display:block;
        width:150px;
        height:150px;
        text-align:center;
     }
    #navbar span {
        position:absolute;
        top:0;
        left:0;
        background-image:url(http://www.bobproject.ismywebsite.co.uk/Images/navbar.jpg);
     }
    #home:hover  { background-position:-300px 0;      }
    #home:active { background-position:-150px 0;      }
    #char        { background-position:0 -150px;      }
    #char:hover  { background-position:-300px -150px; }
    #char:active { background-position:-150px -150px; }
    #blog        { background-position:0 -300px;      }
    #blog:hover  { background-position:-300px -300px; }
    #blog:active { background-position:-150px -300px; }
    #cont        { background-position:0 -450px;      }
    #cont:hover  { background-position:-300px -450px; }
    #cont:active { background-position:-150px -450px; }
    #colo        { background-position:0 -600px;      }
    #colo:hover  { background-position:-300px -600px; }
    #colo:active { background-position:-150px -600px; }
    
    </style>
    
    </head>
    <body>
    
    <ul id="navbar">
     <li><a href="index.html">Home<span id="home"></span></a></li>
     <li><a href="characters.html">Characters<span id="char"></span></a></li>
     <li><a href="blog.html">Bob Blog<span id="blog"></span></a></li>
     <li><a href="contact.html">Contact Us<span id="cont"></span></a></li>
     <li><a href="colour.html">Colour Bob<span id="colo"></span></a></li>
    </ul>
    
    </body>
    </html>
    coothead
    Last edited by coothead; 04-12-2013 at 07:56 PM. Reason: typing error!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles