...

View Full Version : Help with CSS Navigation



vendian
07-31-2007, 03:36 AM
Hey everyone, this is my first post over here at the forum, so pretty cool I guess :thumbsup: . 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


<!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:

http://homepage.mac.com/vendian/younggunz/Links.gif

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


<!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:

http://homepage.mac.com/vendian/younggunz/linksub1.gif

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

jo22
07-31-2007, 11:36 PM
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/29/14-free-vertical-css-menus/

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

vendian
08-01-2007, 01:56 AM
I finally figured it out... thanks for the links though, I'll check those out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum