Help with my menu bar and header tags CSS

Hi, and I apologize right from the start, I don't have a pic, but it shouldn't be too hard for coders to understand.

So I've gotten over my laziness and learned html and css... php is still a mystery. I should say i'm learning. But, I am at the point where I can sit with just notpad++ and write css for a full 3 hours [yes i'm anal retentive sue me] without having to refer to books any more.

As I said, I'm still learning. I have been redoing my DUI site, seen below in the link [don't insult me for using a wysiwig, I just wanted to get it up and running] by hand. It's on my computer and no you can't see it.

My problem is my menu. [which i'm quite pleased at] So it sits below my nice big 300px header pic, it had rounded corners in every cell and it drops down, and even the drop downs have rounded corners,

BUT

I can't get it perfectly centered. I am at a complete loss. The Home button doesn't start until like 100px from the left. I don't get it. Inside their little cell, they are perfectly centered, but I can't seem to get the whole bar to move over a smidge.

I took a break and tried to work on 2 other sites. Same thing. I don't get it. I've set

• padding to 0
• margin to 0
• border to 0

I've tried auto.

And the same is sort of true for my headers. The letters are flush too the background. If I do padding they move over, but the then background bar is huge.

Should i do absolute position? Make the menu bar a part of the header tag, set the header tag to relative and then make the menu absolute position?

so to make it a little visual:

Menu looks like this
|.......................... [HOME] | [BASEBALL] | [BASKETBALL] | [FOOTBALL] |

see home is way to the right

Header looks like this
|WELCOME................................|

see welcome is way to the left, right next to the edge of the header bar

 

You probably have made the menu using HTML lists right?

<ul id="menu">
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>

HTML:

If this is the case, then I guess you have to do some hit and trial... Wrap the hole menu inside a div say...

<div id="menu-wrapper">
<ul id="menu">
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</div>

HTML:

Now use the following CSS for the div#menu-wrapper

#menu-wrapper {
clear: both; /*clear any floating item*/
width: 300px; /*Here is the trick.. Do some hit and trial to set the width */
margin: 0 auto;
padding: 0;
overflow: hidden;
}

Code (markup):

You need to do some hit and trial or use web developers addon for firefox to find the width of the menu!

And as for the header, I really couldn get your problem! Adding overflow: hidden to your header div may solve the problem... Try it! [As i cant see your code, so I really can't tell u the exact solution! may be m not that expert ]

#headerid {
overflow: hidden;
padding: 10px 0 10px 10px;
}

Code (markup):

Do let me know if these have solved your issues!

 

Ok here's the exact code, well snippet of it.

<div id="navigation">
	<ul>
	<li><a href="index.php">HOME</a></li>
	<li><a href="attorneys.php">ATTORNEYS</a></li>
	<li><a href="laws.php">LAWS</a>
		<ul>
			<li><a href="detection.php">DETECTION</a></li>
			<li><a href="tests.php">TESTS</a></li>
			<li class="nav_last"><a href="penalties.php">PENALTIES</a></li>
		</ul>
	</li>

HTML:

And the CSS I came up with is

#navigation
{
		width: 800px;
		padding: 0px; margin: 0px;
		text-decoration: none;
		list-style-type: none;
		border-bottom: 1px solid #ffffff;
		font-family:"Bookman Old Style";
		font-weight:bold;
		float: left;	
		word-spacing: 5px;
		list-style: none;
		text-align: center;



}

#navigation li
{
	list-style-type: none;
	position: relative;
	float:left;
	text-decoration:none;
	width: 126px;
	height: 30px;
	line-height: 30px;
	background: #66321D;
	color: #ffffff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-box-shadow: 0 5px 5px #000;
	-moz-box-shadow: 0 5px 5px #000;
	text-align: center;
	
}



 
#navigation a 
 {
 	border-right: 1px solid #ffffff;
	color: #ffffff;
	float:left;
	font-size: 90%;
	text-align: center;
	text-decoration:none;
	display: block;
 	width: 100%;
}

#navigation a:hover
{
	background:#ffffff;
	color:#66321D;
	overflow: hidden;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

#navigation .nav_last a
{
	border-right-style: none;
	
}

#navigation ul li ul
{
	display: none;
}
#navigation li:hover ul
{
	display: inline;
	float: left;
	width: 10em;
	height: auto;
	margin: 0; padding: 0;
	text-align: left;
	font-size: 1em;
	
}

#navigation li:hover ul li
{
	width: 100%;
	height: 2em;
	border: none;
	border-bottom: 1px solid #ffffff;
	overflow: hidden;
}

#navigation li:hover ul li a
{
	display: block;
	margin: 0; padding: 0;
	height: 100%;
	line-height: 2em;
	
}

#navigation li:hover ul li a:hover
{
	background-color: #ffffff;
	
	
}

HTML:

I hope that leaves nothing to mystery

 

Okay! See, the thing is there are some default set of property set for almost every tags in browsers. So by default those margin and padding are shown for the ul tag. You just have to reset that! Add this CSS code and you are done fixing the menu! For centering it, do it the way I told you before:

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

Code (markup):

I have attached the HTML file with the codes for your ease!

 

Oh i see. Uh, but now it's hugging the left margin and there's space on the right. It's just noticeable because behind the menu is white. Maybe I need to set my #navigation tag itself to margin: 0 auto; ?