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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Links horizontal navigation bar don't work

    Hi,
    I'm new to this forum and I registered because I have trouble with my html/css code. I'm making a portfolio website and I have a horizontal navigation bar at the top, with .png images as navigation buttons and a mouse-on/mouse-over effect (the letters are supposed to turn grey with the mouse on it).
    I had quite some trouble alligning the buttons horizontally but now they're placed where they're supposed to be, the only thing is suddenly they don't work as links anymore and the mouse-on/mouse-over effect is gone.
    This is my code:
    Code:
    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <html>
    <head>
    <title>Menu</title>
    <style type="text/css">
    
    body 
    
    {background-image:url('menubg.png');}
    
    {background-color:#FFFFFF;}
    
    #navlist{margin:0;position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
    #navlist li, #navlist a{height:64px;display:inline-block;}
    
    
    #about{left:0px;width:145px;}
    #about{background:url('about1.png')}
    #about a:hover{background: url('about2.png')}
    
    #amfi{left:0px;width:168px;}
    #amfi{background:url('amfi1.png')}
    #amfi a:hover{background: url('amfi2.png')}
    
    #personal{left:0px;width:202px;}
    #personal{background:url('personal1.png')}
    #personal a:hover{background: url('personal2.png')}
    
    #inspiration{left:0px;width:202px;}
    #inspiration{background:url('inspiration1.png')}
    #inspiration a:hover{background: url('inspiration2.png')}
    
    #cv{left:0px;width:65px;}
    #cv{background:url('cv1.png')}
    #cv a:hover{background: url('cv2.png')}
    
    #contact{left:0px;width:128px;}
    #contact{background:url('contact1.png')}
    #contact a:hover{background: url('contact2.png')}
    </style>
    </head>
    
    <body>
    <ul id="navlist">
      <li id="about"><a href="about.htm" target="main"></a></li>
      <li id="amfi"><a href="amfi.htm" target="main"></a></li>
      <li id="personal"><a href="personal.htm" target="main"></a></li>
      <li id="inspiration"><a href="inspiration.htm" target="main"></a></li>
      <li id="cv"><a href="cv.htm" target="main"></a></li>
      <li id="contact"><a href="contact.php" target="main"></a></li>
    </ul>
    </body>
    </html>
    and this is my website: http://www.esthervandergugten.com

    I would be really thankful if you can help me out!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Unfortunately, I think you would be better to dispense entirely with the frames. These are outdated and may well be contributing to the issue you describe.

    What you have there is a fairly straightforward three column design. Have a look here for a decent explanation of how it can be laid out.

    If you need to include common code on multiple pages (e.g. a menu) , then investigate the use of PHP includes.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Tnx for the advice! I learned HTML from watching my ex-boyfriend making websites 10 years ago, so it's quite possible I'm a little outdated . I'm not really a fan of the frames myself so I will definetely try it your way!


  •  

    Posting Permissions

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