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

Thread: Menu problems

  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Menu problems

    hi all,

    I have made this menu using css code, but only one of the images that is meant to be displayed is showing. Anyone got any idea's what up with it??

    css:
    Code:
    .menu{margin:0; padding:0; width:200px; list-style:none;background:rgb(255,255,255);}
    .menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
    .menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('menu1.png') 0px 0px no-repeat; text-decoration:none;}
    .menu li a:hover{background:url('menu2.png') 0px -40px no-repeat; color:rgb(0,0,0);}
    .menu li a.active, .menu li a.active:hover{background:url('menu3.png') 0px -80px no-repeat; color:rgb(255,255,255);}
    .menu li a span{line-height:40px;}
    html:
    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>
    <link href="menu.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <ul class="menu">
      <li><a href="#" class="active"><span>link1</span></a></li>
      <li><a href="#"><span>link2</span></a></li>
      <li><a href="#"><span>link3</span></a></li>
      <li><a href="#"><span>link4</span></a></li>
    </ul>
    </body>
    </html>
    thanks,
    Mike
    Last edited by Pirate Mike; 10-31-2008 at 04:36 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need ALL the code including the Doctype to help you properly.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, thought i had copied it all..

    Updated the original post...
    Thanks,
    Mike

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have a look at this. I have assembled it and provided the pngs, and it appears to work

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Not sure, but have a look at http://www.w3schools.com/CSS/css_pseudo_classes.asp

    There is an order to apply the pseudo elements, Link, Visited, Hover, Active. You may combine them like
    Code:
    a:link,a:visited{
    }
    
    a:hover,a.active{
    }
    Can we have a link to your page(as we don't have the exact images at your end)?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Or to remember the order easier

    LoVe HAte
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Its missing the top image.

    This is the result i get when i try...

    http://www.phoenixarcheresu.co.uk/new/index.asp"]Site[/URL]

    Thanks,
    Mike

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    background:url('menu2.png') 0px -40px no-repeat;
    Remove that -40px part.

    PS: I think you'd need to combine your menu1.png and menu2.png vertically and then apply the same image on both cases, but a different y-position for one of them. This will solve the flickering issue in some browsers.
    Last edited by abduraooft; 10-31-2008 at 04:41 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Pirate Mike (10-31-2008)

  • #9
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks!
    I saw what i did now, they all needed to be one image not separate.

    Thanks everyone for your help!

    Mike

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Page now brought up to date.

    Here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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