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 10 of 10
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts

    css menu help please

    Hi All,

    Ihave been following a tutorial to create a menu but with one difference,in the tutorial they have an image for each button and each image consists of 3 individual images for the different states of the button(default, hover, active) and i have just the one image with all the individual images in this image.

    the idea is to display certain parts of the image to show the correct individual images but for some reason i cant seem to get the default images to appear, hover works.

    here is my page code
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    #main_nav { list-style: none; margin: 0; padding: 0; }
    #main_nav li { float: left; }
    #main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; } 
    
    #home { background:url(menuIMG.png); width: 103px; }
    #home:hover { background: url(menuIMG.png) 0 0  !important; }
    #home.active { background: url(menuIMG.png) -103px 0; }
    #main_nav:hover li a#home { background-position: -232px; }
    
    #about { background:url(menuIMG.png); width: 103px; }
    #about:hover { background: url(menuIMG.png) -464px 0  !important; }
    #about.active { background: url(menuIMG.png) -464px 0; }
    #main_nav:hover li a#about { background-position: -580px; }
    
    #webdesign { background:url(menuIMG.png); width: 103px; }
    #webdesign:hover { background: url(menuIMG.png) -825px 0  !important; }
    #webdesign.active { background: url(menuIMG.png) -103px 0; }
    #main_nav:hover li a#webdesign { background-position: -941px; }
    
    #graphicdesign { background:url(menuIMG.png); width: 103px; }
    #graphicdesign:hover { background: url(menuIMG.png) -812px 0  !important; }
    #graphicdesign.active { background: url(menuIMG.png) -103px 0; }
    #main_nav:hover li a#graphicdesign { background-position: -928px; }
    
    #seo { background:url(menuIMG.png); width: 145px; }
    #seo:hover { background: url(menuIMG.png) -1046px 0  !important; }
    #seo.active { background: url(menuIMG.png) -103px 0; }
    #main_nav:hover li a#seo { background-position: -1339px; }
    
    #contact { background:url(menuIMG.png); width: 103px; }
    #contact:hover { background: url(menuIMG.png) -1443px 0  !important; }
    #contact.active { background: url(menuIMG.png) -103px 0; }
    #main_nav:hover li a#contact { background-position: -1443px; }
    
    #books { background:url(menuIMG.png); width: 103px; }
    #books:hover { background: url(menuIMG.png) 0 0  !important; }
    #books.active { background: url(menuIMG.png) -103px 0; }
    #main_nav:hover li a#books { background-position: -232px; }
    
    
    
    </style>
    </head>
    
    <body>
    <ul id="main_nav">
    			<li><a href="index.html" accesskey="3" id="home" title="Home Page">Home Page</a></li>
    			<li><a href="about-us.html" accesskey="4" id="about" title="About 3.7 Designs">About Us</a></li>
    			<li><a href="graphic-design.html" accesskey="6" title="Graphic Design and Marketing" id="graphicdesign">Graphic Designs</a></li>
    			<li><a href="keyword-optimization/michigan-seo.html" accesskey="7" title="Search Engine Optimization and Marketing" id="seo">Search Engine Optimization SEO</a></li>
    			<li><a href="ann-arbor-marketing.html" accesskey="8" id="contact" title="Contact Us">Contact Us</a></li>
    		</ul> 
    </body>
    </html>
    and here is a link to my image
    http://www.kernow-connect.com/images/menuIMG.png

    here is my test page
    http://www.kernow-connect.com/menu_test2.php

    anyone able to help to get this working correctly?

    many thanks
    Luke

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't quite reconcile the ids on the menu to your graphic, but putting that aside you want something like:

    Code:
    #about {
    background:url("images/menuIMG.png") repeat scroll -348px 0 transparent;
    width:103px;
    }
    
    #graphicdesign {
    background:url("images/menuIMG.png") repeat scroll -696px 0 transparent;
    width:103px;
    }
    
    #seo {
    background:url("images/menuIMG.png") repeat scroll -1046px 0 transparent;
    width:145px;
    }

  • Users who have thanked SB65 for this post:

    LJackson (08-15-2010)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    WOW!!!

    thanks very much, really appreciate the help mate

    Luke

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there LJackson,

    I am assuming that your sprite is just for testing purposes as it far from perfect.

    Bearing that in mind, the navigation could be coded like this...
    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=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #main_nav {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #main_nav li {
        float:left;
     }
    #main_nav a {
        display:block;
        height:72px;
        background-image:url(http://www.kernow-connect.com/images/menuIMG.png);
        background-repeat:no-repeat;
        text-indent:-9999px;
        outline:none;
     }
    #home {
        width:102px;   
     }
    #home:hover {
        background-position:-232px 0;
     }
    #dvds {
        width:102px;   
        background-position:-348px 0;
     }
    #dvds:hover {
        background-position:-580px 0;
     }
    #cds {
        width:100px;   
        background-position:-698px 0;
     }
    #cds:hover {
        background-position:-930px 0;
     }
    #vids{
        width:129px;   
        background-position:-1044px 0;
     }
    #vids:hover {
        background-position:-1340px 0;
     }
    #rays{
        width:102px;   
        background-position:-1487px 0;
     }
    #rays:hover {
        background-position:-1719px 0;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="main_nav">
     <li><a id="home" href="#">Home Page</a></li>
     <li><a id="dvds" href="#">DVDs</a></li>
     <li><a id="cds" href="#">CDs</a></li>
     <li><a id="vids" href="#">Video Games</a></li>
     <li><a id="rays" href="#">Blue-Rays</a></li>
    </ul> 
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    LJackson (08-15-2010)

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi coothead,

    thanks for your reply! yeah the sprite is just for testing lol will be perfect when finished

    i will check out your code as its always nice to see alternative ways of doing things.

    cheers mate
    luke

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    No problem, you're very welcome.

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi coothead,

    quick update, i've just tried your code and its great the only problem with it is that i want all other images 'blurred' except the one currently hovered over, at the moment the one hovered is being 'blurred' and the others are not?

    any ideas?
    thanks mate
    luke

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there LJackson,

    you just need to swap the background positions for each link....
    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=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #main_nav {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #main_nav li {
        float:left;
     }
    #main_nav a {
        display:block;
        height:72px;
        background-image:url(http://www.kernow-connect.com/images/menuIMG.png);
        background-repeat:no-repeat;
        text-indent:-9999px;
        outline:none;
     }
    #home {
        width:102px;  
        background-position:-232px 0; 
     }
    #home:hover {
        background-position:0 0;
     }
    #dvds {
        width:102px;   
        background-position:-580px 0;
     }
    #dvds:hover {
        background-position:-348px 0;
     }
    #cds {
        width:100px;   
        background-position:-930px 0;
     }
    #cds:hover {
        background-position:-698px 0;
     }
    #vids{
        width:129px;   
        background-position:-1340px 0;
     }
    #vids:hover {
        background-position:-1044px 0;
     }
    #rays{
        width:102px;   
        background-position:-1719px 0;
     }
    #rays:hover {
        background-position:-1487px 0;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="main_nav">
     <li><a id="home" href="#">Home Page</a></li>
     <li><a id="dvds" href="#">DVDs</a></li>
     <li><a id="cds" href="#">CDs</a></li>
     <li><a id="vids" href="#">Video Games</a></li>
     <li><a id="rays" href="#">Blue-Rays</a></li>
    </ul> 
    
    </body>
    </html>
    
    coothead

  • #9
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,099
    Thanks
    297
    Thanked 12 Times in 12 Posts
    Hi mate,

    ah but ow they start off blurred?

    what im after is to strt off normal then when hovered over all other 'links' are then blurred leaving the one which is hovered still normal

    if that makes sence
    look at this link to see what i mean
    http://www.3point7designs.com/web-design2.html

    cheers

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there LJackson,

    right, I see what you mean.

    Note though that this will not work in IE6, as that browser only renders hover on the a element.

    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=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #main_nav {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #main_nav li {
        float:left;
     }
    #main_nav a {
        display:block;
        height:72px;
        background-image:url(http://www.kernow-connect.com/images/menuIMG.png);
        background-repeat:no-repeat;
        text-indent:-9999px;
        outline:none;
     }
    
    #main_nav:hover  #home {
        background-position:-232px 0;
     }
    #main_nav:hover #dvds {
        background-position:-580px 0;
     }
    #main_nav:hover #cds {
        background-position:-930px 0;
     }
    #main_nav:hover #vids {
        background-position:-1340px 0;
     }
    #main_nav:hover #rays {
        background-position:-1719px 0;
     }
    
    #home {
        width:102px;  
        background-position:0 0; 
     }
    #home:hover {
        background-position:0 0!important; 
     }
    #dvds {
        width:102px;   
        background-position:-348px 0;
     }
    #dvds:hover {
        background-position:-348px 0!important;
     }
    #cds {
        width:100px;   
        background-position:-698px 0;
     }
    #cds:hover {
        background-position:-698px 0!important;
     }
    #vids{
        width:129px;   
        background-position:-1044px 0;
     }
    #vids:hover {
        background-position:-1044px 0!important;
     }
    #rays{
        width:102px;   
        background-position:-1487px 0;
     }
    #rays:hover {
        background-position:-1487px 0!important;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="main_nav">
     <li><a id="home" href="#">Home Page</a></li>
     <li><a id="dvds" href="#">DVDs</a></li>
     <li><a id="cds" href="#">CDs</a></li>
     <li><a id="vids" href="#">Video Games</a></li>
     <li><a id="rays" href="#">Blue-Rays</a></li>
    </ul> 
    
    </body>
    </html>
    
    coothead


  •  

    Posting Permissions

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