Positioning Navbar...

[drewpark88]

Hey Guys,

I am trying to position my navbar (5 images) to center with the browser. Instead it is positioned to the left and when you make the browser smaller the buttons move.

Here is the CSS:

<style type="text/css">

#navcontainer
{
margin: 200px auto 0px auto;
position: absolute;

}

#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}

#button1
{
text-decoration: none;
background: url(button1.jpg) no-repeat top left;
float: left;
margin: 0px;
padding-top: 13px;
width: 198px;
height: 86px;
}

#button1:hover
{
background: url(overbutton1.jpg) no-repeat left top;
}

#button2
{
text-decoration: none;
background: url(button2.jpg) no-repeat top left;
float: left;
margin: 0px;
padding-top: 13px;
width: 144px;
height: 86px;
}

#button2:hover
{
background: url(overbutton2.jpg) no-repeat left top;
}

#button3
{
text-decoration: none;
background: url(button3.jpg) no-repeat top left;
float: left;
margin: 0px;
padding-top: 13px;
width: 110px;
height: 86px;
}

#button3:hover
{
background: url(overbutton3.jpg) no-repeat left top;
}

#button4
{
text-decoration: none;
background: url(button4.jpg) no-repeat top left;
float: left;
margin: 0px;
padding-top: 13px;
width: 146px;
height: 86px;
}

#button4:hover
{
background: url(overbutton4.jpg) no-repeat left top;
}

#button5
{
text-decoration: none;
background: url(button5.jpg) no-repeat top left;
float: left;
margin: 0px;
padding-top: 13px;
width: 224px;
height: 86px;
}

#button5:hover
{
background: url(overbutton5.jpg) no-repeat left top;
}

</style>

And here is the HTML code:

<center>
<div id="navcontainer">
<ul id="navlist">
<li id="button1"><a href="#" id="current"></a></li>
<li id="button2"><a href="#"></a></li>
<li id="button3"><a href="#"></a></li>
<li id="button4"><a href="#"></a></li>
<li id="button5"><a href="#"></a></li>
</ul>
</div>
</center>

I've tried several different things...it's late and I know I'm not thinking straight so if someone figures out what I did wrong before me please comment : )

[opsryushi]

Hey drewpark88,

I think I've got your solution:

#navcontainer
{
margin: auto;
position: relative;
width: 850px;
}

First, we set all margins to automatic. Then, define position as relative. (Remember, defining absolute position will take your div out of the context of the layout and start it at coordinates (0px,0px) to position it - Not really what you're going for.) The last important part is defining a width for your div wrapper. (Use whatever width you'd like - ideally it'll be the exact width of all five buttons put together. I just used 850px as an example.) This forces the browser out of assuming this div is 100% width. Since our margin is set to auto, the browser automatically distributes the remaining space around the div, and viola: instant page centering.

If you're looking to move the menu vertically on the page, it's as simple as adding a top: declaration:

#navcontainer
{
margin: auto;
position: relative;
top: 200px;
width: 850px;
}

Also, while you're here, a quick CSS reminder - whenever you define an image in CSS, it should be in single quotes:

background: url('button1.jpg') no-repeat top left;

Oh, and in your HTML - no need for the <center> tags - these are deprecated anyway, and we've fixed the problem using just CSS.

Hope this helps! :)

[ArtphotoasiA]

Good answer .. congrat1

in case is possible also to use....

margin left: auto
margin right: auto

with those you can center whatever DIV you need!

[drewpark88]

Thank you soo much! This helped, I appreciate it and will remember the single qoutes for now on : )

Hey drewpark88,

I think I've got your solution:

#navcontainer
{
margin: auto;
position: relative;
width: 850px;
}

First, we set all margins to automatic. Then, define position as relative. (Remember, defining absolute position will take your div out of the context of the layout and start it at coordinates (0px,0px) to position it - Not really what you're going for.) The last important part is defining a width for your div wrapper. (Use whatever width you'd like - ideally it'll be the exact width of all five buttons put together. I just used 850px as an example.) This forces the browser out of assuming this div is 100% width. Since our margin is set to auto, the browser automatically distributes the remaining space around the div, and viola: instant page centering.

If you're looking to move the menu vertically on the page, it's as simple as adding a top: declaration:

#navcontainer
{
margin: auto;
position: relative;
top: 200px;
width: 850px;
}

Also, while you're here, a quick CSS reminder - whenever you define an image in CSS, it should be in single quotes:

background: url('button1.jpg') no-repeat top left;

Oh, and in your HTML - no need for the <center> tags - these are deprecated anyway, and we've fixed the problem using just CSS.

Hope this helps! :)