...

View Full Version : positioning the navigation-bar.



ipng
07-30-2010, 12:39 AM
Hello.

I've just made my very first website and was wondering if I could customize the position of the navigation-bar alittle more? Like the length from the top, to the bar. I hope someone out there knows what's wrong! :)

The CSS.

body{background-color:#000000;}
body{background-image:url('images/stripes.jpg');background-repeat:repeat-x;}

* {margin:0px;padding:0px;}

#nav {list-style-type:none;overflow:hidden;}
#nav {width:500px;margin:0 auto;postition:absolute;}
#nav span{display:none;}
#nav li{list-style-type:none;float:left;}
#nav a{height:42px;display:block;}

#home{left:0px;width:152px;}
#home{background:url('navigation/spritenavi.png') 0 0;}
#home a:hover{background: url('navigation/spritenavi.png') 0 -42px;}

#film{left:0px;width:152px;}
#film{background:url('navigation/spritenavi.png') -152px 0;}
#film a:hover{background: url('navigation/spritenavi.png') -152px -42px;}

#leet{left:0px;width:152px;}
#leet{background:url('navigation/spritenavi.png') -304px 0;}
#leet a:hover{background: url('navigation/spritenavi.png') -304px -42px;}

a{text-decoration:none;}
h2{letter-spacing:-3px;color:white;}
img.logo{list-style-type:none;overflow:hidden;position:absolute;top:15px;left:15px;z-index:-1;}

.right{position:absolute;right:0px;top:15px;}

Aaand the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>iPnG</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<ul id="nav">
<li id="home"><a href="index.html"><span>home</span></a></li>
<li id="film"><a href="film.html"><span>film</span></a></li>
<li id="leet"><a href="1337.html"><span>1337</span></a></li>
</ul>
</body>
</html>


Thanks for helping me out! :)

Peace out.

Bar2aYunie
07-30-2010, 01:06 AM
Position it how? I'm not sure what you mean... Do you have a link to the page?

djh101
07-30-2010, 09:27 AM
"top: 99px;" would be a valid CSS code that determines the margin on top of your item. Margin-top could also be used to determine the top margin of your item.

ipng
07-30-2010, 06:26 PM
#2
Like, moving it away from the top :)

#3
I'll try it right away!
EDIT: That did the trick! Thanks :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum