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

    positioning the navigation-bar.

    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.
    Code:
    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.
    Code:
    <!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.
    Last edited by ipng; 07-30-2010 at 12:44 AM.

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    96
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Position it how? I'm not sure what you mean... Do you have a link to the page?

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    "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.

  • Users who have thanked djh101 for this post:

    ipng (07-30-2010)

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    #2
    Like, moving it away from the top

    #3
    I'll try it right away!
    EDIT: That did the trick! Thanks
    Last edited by ipng; 07-30-2010 at 07:19 PM.


  •  

    Posting Permissions

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