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.
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.