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 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with CSS Navigation

    Hey everyone, this is my first post over here at the forum, so pretty cool I guess . I am a complete and total n00b when it comes to websites, but I have to make one for school so I'm working on making a site for my Ice Hockey team in the making. So I did this navigation tutorial that uses CSS and it turned out great, here's an example and the code I used:

    Example: http://homepage.mac.com/vendian/younggunz/demo2.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>demo2</title>
    <style type="text/css">
    body {background-color: rgb(51,51,51); }
    
    #menu { position:absolute; left:-30px; top:105px }
    
    #nav { background:url(Links.gif); }
    li { float:left; list-style-type:none }
    li a { height:41px; display:block; top:0; text-indent:-9999px; outline:none }
    li#about a, li#roster a, li#schedule a, li#stats a, li#forum a, li#contact a { background-image: url(Links.gif); }
    
    #about a { display: block; height: 41px; width: 165px; background-position: -0px 0px; }
    #about a:hover { display: block; height: 41px; width: 165px; background-position: -0px -41px; }
    
    #roster a { display: block; height: 41px; width: 164px; background-position: -165px 0px; }
    #roster a:hover { display: block; height: 41px; width: 164px; background-position: -165px -41px; }
    
    #schedule a { display: block; height: 41px; width: 197px; background-position: -329px 0px; }
    #schedule a:hover { display: block; height: 41px; width: 197px; background-position: -329px -41px; }
    
    #stats a { display: block; height: 41px; width: 141px; background-position: -526px 0px; }
    #stats a:hover { display: block; height: 41px; width: 141px; background-position: -526px -41px; }
    
    #forum a { display: block; height: 41px; width: 151px; background-position: -667px 0px; }
    #forum a:hover { display: block; height: 41px; width: 151px; background-position: -667px -41px; }
    
    #contact a { display: block; height: 41px; width: 206px; background-position: -818px 0px; }
    #contact a:hover { display: block; height: 41px; width: 206px; background-position: -818px -41px; }
    }
    </style>
    </head>
    
    <body>
    <img src="Backgroundbig2.gif" alt="background" style="position: absolute; bottom: 0px; left: 0px" />
    <img src="spraypaint.gif" alt="spraypaint" style="position: absolute; top: 125px; left: 5px" />
    <img src="banner.gif" alt="banner" style="position: absolute; top: 10px;" />
    <div id="menu">
    <ul id="nav">
    <li id="about"><a href="#">about</a></li>
    <li id="roster"><a href="#">roster</a></li>
    <li id="schedule"><a href="#">schedule</a></li>
    <li id="stats"><a href="#">stats</a></li>
    <li id="forum"><a href="#">forum</a></li>
    <li id="contact"><a href="#">schedule</a></li>
    </ul>
    </body>
    </html>
    I used that CSS code because I guess it's a really clean good way to make a menu. The image used in the example is:



    So, if you look at the example, you'll see a spraypaint blob on the left side of the screen. That's where all the sub-links are going to go, and that's where I run into my problem! I tried replicating the code from the original to work with a vertical menu instead, but it's not working! The image just completely warps out and doesn't work at all.

    Example: http://homepage.mac.com/vendian/younggunz/linkst.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>linkst</title>
    <style type="text/css">
    body {background-color: rgb(51,51,51); }
    
    #nav { background:url(linksub1.gif); }
    li { float: none; list-style-type:none; background-repeat: no-repeat; }
    li a { height:85px; width:255px; display:block; top:0; text-indent:-0px; outline:none }
    li#player a, li#team a, li#vs a, { background-image: url(linksub1.gif); }
    
    #player a { display: block; height: 85px; width: 255px; background-position: 0px 0px; }
    #player a:hover { display: block; height: 85px; width: 255px; background-position: -85px -0px; }
    
    #team a { display: block; height: 85px; width: 255px; background-position: -0px -35px; }
    #team a:hover { display: block; height: 41px; width: 164px; background-position: -85px -35px; }
    
    #vs a {  height: 85px; width: 255px; background-position: -0px -61px; }
    #vs a:hover {  height: 85px; width: 255px; background-position: -85px -61px; }
    }
    </style>
    </head>
    
    <body>
    <ul id="nav">
    <li id="player"><a href="#">player</a></li>
    <li id="team"><a href="#">team</a></li>
    <li id="vs"><a href="#">vs</a></li>
    </ul>
    </body>
    </html>
    And the image used this time is:



    Would anyone that has more than a very very basic understanding of CSS be able to tell me why this doesn't work as a vertical menu? Or be able to figure out if I messed up the code somewhere?

    One more thing: Can anyone tell me why the navigation bar is in the right spot in Firefox but wrong in IE even though it's positioned absolutely using CSS?

    I am at your mercy!

    PS- if it helps any the tutorial is from the July 2007 issue of Computer Arts

    Vendian
    Last edited by vendian; 07-31-2007 at 04:53 AM.

  • #2
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi there,
    Not sure if this would be helpful but have you checked out http://www.dynamicdrive.com as there are quite a few examples you could learn from.

    Here is another good place to learn about vertical ones:
    http://www.exploding-boy.com/2005/12...cal-css-menus/

    Goodluck. Perhaps someone else may be able to assist you more.

  • Users who have thanked jo22 for this post:

    vendian (09-10-2007)

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I finally figured it out... thanks for the links though, I'll check those out.


  •  

    Posting Permissions

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