CSS Menu centering

[mat4020]

Hello, Just joined the forum and would like to ask for some help. I am fairly new at CSS and am having a few problems with a site I'm creating.

I am working on this site: http://education.matthewbroughton.com/
and, as you probably notice, my CSS menu is all messed up. It aligns to the left side, and I can't figure out how to have it stay in the center.

Here are links to my two CSS documents:
http://education.matthewbroughton.com/default.css
http://education.matthewbroughton.com/dropmenu.css

I'm sure I have other problems in the code, and any corrections or recommendations are more than welcome.

Thanks in advance for helping a beginner out!

Matt

[ev8321]

check carefully where your end </div> tags start and finish.

Move the </div> tag underneath <div id="content"> down to the bottom.

Should center after this. Let me know how you go.

[ev8321]

your code overall i think looks okay, just need a bit of tweeking.
make sure you use a title tag at the top of the page.

Be sure to run the page through The W3C Markup Validation Service once you have completed and check your pages for functionality in the main browsers.

Not sure that your drop down menu will work across the board.

Goodluck!!

[Boogle]

I haven't looked at your code but whatever <div> is wrapping the menu, simply giv it this property- it's worked across the board for me for ages now and validates.

#wrapperDiv
{
margin: 0 auto;
}

That will center that wrapping Div.

HTH's

Boog's

[mat4020]

Thanks for the tips guys, but so far no luck yet. It could be that I'm doing something totally wrong - so tell me if I am.

Below is my div that is wrapping the menu

#content {
	float: left;
	width: 750px;
	margin: 0 auto;
	padding: 0 0;
}

This is the xml for the menu

<div id="content">
	<div id="nav">
	<ul id="pmenu">
	<li class="tc"><a href="#nogo">Home</a></li>
	<li class="tc drop"><a href="#">Programs<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
		<li><a href="#nogo" class="enclose">Teaching</a></li>
		<li class="fly"><a href="#nogo">Sports Management<!--[if IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
				<li><a href="#nogo" class="enclose">Compact</a></li>
				<li><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
				<li><a href="#nogo">SLR</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		<li class="fly"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
				<li><a href="#nogo" class="enclose">Compact</a></li>
				<li><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
				<li><a href="#nogo">SLR</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		<li><a href="#nogo">Flash</a></li>
		<li><a href="#nogo">Video</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	<li class="tc"><a href="#nogo">Faculty</a></li>
	<li class="tc"><a href="#nogo">Students</a></li>
	<li class="tc"><a href="#nogo">News</a></li>
	</ul>
	</div>
</div>

Again, any help is appreciated.

[Boogle]

Erase the line

float:left;

[mat4020]

Originally Posted by Boogle

Erase the line

float:left;

Wow, I feel stupid now!
Thanks Boogle!

I'm sure Ill have more questions soon, and I now know where to come.

Thanks again,

Matt

[mat4020]

Ok, another problem.

I'm trying to use an image as a footer, but it is not filling the space it should be horizontally. (I know that makes little sense - please just visit the site here and see for yourself)

The footer div:

#footer {
	width: 750px;
	height: 75px;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 auto 0 0;
	background-image:url(images/img03.gif);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position:bottom center; 
}

and the xml:

<div id="footer">
	<p>Copyright</p>
</div>

please note that my body is using a background image that is repeated vertically. The css for that:

body {
	width: 750px;
	height: 100%;
	background: #669933 url(images/img01.png);
	background-attachment:fixed;
	background-repeat: repeat-y;
	background-position:center; 
	margin: 0 auto;
	font-family: Verdana;
	color: #ffffff;
}

Any help would be appreciated.

Matt

[mat4020]

A screen shot of the problem. (see bottom right of the page)


Also, absolute position isn't quite what I want, but I don't know what to use instead.