How do I center my menu?

sunni94

11 years ago
Answered

I´m have trouble with centering my menu and header. I used a tutorial on YouTube to make the menu and I´m quite new at this, so I don´t really know what to do. This is the coding I´ve used:

@charset "utf-8";

#navbar {
width:660px;

}

#navbar #holder {
height:59px;
border-bottom:1px solid #000;
width:630px;
padding-left:25px;
}

#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}

#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
font-family:"Courier New", Courier, monospace;
color:#000;
border:1px solid #000;
border-bottom:none;
padding:20px;
width:75px;
text-align:center;
display:block;
background:#69F;

}

#navbar #holder ul li a:hover {
background:#F90;
color:#FFF;
text-shadow:1px 1px 1px #000;

}

#holder ul li a#onlink {
background:#FFF;
color:#000;
border-bottom:1px solid #FFF;

}

#holder ul li a#onlink:hover {
background:#FFF;
color:#69F;
text-shadow:1px 1px 1px #000;

}

Replies 1

Newest first
Newest first Oldest first

JacobIMH

11 years ago

Hello sunni94, and thanks for the question. It's a bit hard to tell you exactly what you need to do without also seeing the HTML code that those CSS values style. But this would be my best guess if you're using that #navbar class as your menu:

#navbar {
width:660px;

}

Here you'd be setting your menu to be 660px wide. Now what you'd want to do in order to center this menu is by defining a margin-left and margin-right of auto. That way it automatically determines how wide the margins should be in order for the content to stay centered. So you'd end up with:

#navbar {
width:660px; margin-left: auto; margin-right: auto;

}

If you didn't want the menu exactly centered, you could also give it a fixed position with a certain width defined from the left or right side as well:

#navbar {
width:660px; margin-left: 200px;

}

Hope that makes sense. If you had any other questions or problems at all let us know! - Jacob

Reply Link