InMotion Hosting Support Center

How do I center my menu?

Category: Dreamweaver

sunni94
Asked:
2013-11-26 1:32 pm EST

Hits: 626
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;

}

You must login before you can ask a follow up question.

You must login before you can submit an answer.

OTHER ANSWERS

0

JacobIMH
9,968 Points
2013-11-26 1:41 pm EST
<div style="background-color: #FFF; padding-left: 10px;">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 <strong>HTML</strong> code that those <strong>CSS</strong> values style. But this would be my best guess if you're using that <strong>#navbar</strong> class as your menu:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#navbar {
width:660px;

}</pre>

Here you'd be setting your menu to be <strong style="color: red;">660px</strong> wide. Now what you'd want to do in order to center this menu is by defining a <strong style="color: red;">margin-left</strong> and <strong style="color: red;">margin-right</strong> of <strong style="color: red;">auto</strong>. 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:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#navbar {
width:660px; <strong style="color: red;">margin-left: auto; margin-right: auto;</strong>

}</pre>

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:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#navbar {
width:660px; <strong style="color: red;">margin-left: 200px;</strong>

}</pre>

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

- Jacob</div>

You must login before you can post a comment about this answer.

Like this Question?

Support Center Login

Social Media Login

   
Social Login Joomla

Related Articles

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!