CODEWITHSUNDEEP
htmlcss
Raegon
Raegon

Reputation: 40

How can I position my navigation bar further up on the page?

So I'm playing around with my sprite based navigation menu for my school website project, but I can't seem to figure how I can move my navigation bar so it moves up without dragging the content along or anything in that direction.

My CSS:

nav {
    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(../images/withtext.gif) repeat-x;
    height:79px;
    }       

#nav ul {
    margin:4px 0px 0px 0px;
    padding:0px;
    list-style:none;
    }

#nav ul li {    
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    /*line-height:38px;*/
    padding:3px 50px 3px 50px;
    border-right:1px #00222a solid;
    margin:7px 0px 0px 0px;
    }   

#nav ul li a {  
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    text-decoration:none;
    }

#nav ul li a:hover {    
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    text-decoration:underline;
    }

How can I move it up?

Upvotes: 0

Views: 308

Answers (1)

Kaloyan
Kaloyan

Reputation: 7352

Using position: relative and negative top value is one way to do it:

nav {
    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(../images/withtext.gif) repeat-x;
    height:79px;
    position: relative;
    top: -10px;
}

Upvotes: 1

Related Questions