Having an issue with my nav bar, please help?

I'm having a problem with a nav bar on one of my sites. First off, the home link is like 1.5x larger then the rest, which I have no clue why and the nav bar will not center. If I put it as center, they become huge, like a giant list. Also, I'd like the spacing between the nav bar and content to be a little less.

I've been screwing with the css file for a few days now and just can't get it, so I was hoping someone here with more expertise could help.

Thanks!

Site: http://115media.net/ - Style Sheet: http://115media.net/style.css

 

Remove the class clearfix from the UL with id menu.. and see how it works. And also check why all menu buttons are set "current".

Also you can play with font size in your css file here :


#menu li a {
display: block;
font-size: 16px;
padding: 6px 11px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

 

I don't see a "clearfix" anywhere on the CSS sheet - All of the LI's are set to current however in the header.

Here's the menu code, I don't see a class or clearfix on it however :sad:

#menu {
	list-style: none;
}

#menu li {
	float: left;
	margin: 0 5px 0 0;
	padding-bottom: 5px;
	position: relative;
}

#menu li a {
	display: block;
	font-size: 16px;
	padding: 6px 11px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

	/* Level 2 */
	
	#menu ul {
		background: #000000;
		background: rgba(202,202,202,0.95);
		display: none;
		padding: 10px;
		list-style: none;
		position: absolute;
		left: 0; top: 100%;
		z-index: 100;
		text-shadow: 1px 1px 0 #eae7e7;
		
		-webkit-box-shadow: 2px 3px 3px #4d4b4b;
		-moz-box-shadow: 2px 3px 3px #4d4b4b;
		box-shadow: 2px 3px 3px #4d4b4b;
		
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		border-bottom-right-radius: 5px;
	}
	
	#menu li:hover > ul { display: block;  }
	
	#menu ul li {
		float: none;
		min-width: 150px;
	}

HTML:

And the header coding:

	<nav>
    	<ul id="menu" class="clearfix"> 
        	<li class="current"><a href="index.php">HOME</a></li>
        	<li class="current"><a href="about.php">ABOUT</a></li>
        	<li class="current"><a href="portfolio.php">PORTFOLIO</a></li>
                <li class="current"><a href="hosting.php">HOSTING</a>
                <li class="current"><a href="services.php">SERVICES</a></li>
                <li class="current"><a href="freequote.php">FREE QUOTE</a></li>
                <li class="current"><a href="http://115media.net/learningcenter/">LEARNING CENTER</a></li>
                <li class="current"><a href="contact.php">CONTACT US</a></li>
        </ul>
    </nav>

HTML:

Thank you so much, I appreciate your help!

 

<ul id="menu" class="clearfix"> this clearfix i was talking about..

If you are comparing the nav button with that "learn more..." button.. then.. check out the paddings :

.btn, a.more-link, input[type=submit] {
background: #4f93b1;
color: #fff;
text-shadow: #999999 1px 1px 1px;
padding: 5px 16px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}


#menu li a {
display: block;
font-size: 16px;
padding: 6px 11px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


Also you have a <br/> right there :

<section id="main" class="grid_8 alpha">
<br />

<article class="post">
<h2>Design for the Future</h2>

 

I feel exceedingly foolish at the moment, LOL! I did not see that at all (the clearfix) and I tried searching the document for it too with no luck - I don't know! But I removed the clearfix bit and it didn't make any difference, also when I take that line break out, the header clashes with the nav bar, which I guess is why I stuck it in there to begin with.

Any ideas?

Thank you so much for all your help!

 

Okay, so the "Clearfix" bit keeps my picture, paragraphs & sidebar aligned - so I've got to keep that in there.

I got the home button fixed, it was longer then the rest because the header was a link and was interfering somehow.

Does anyone have any idea how to center this nav bar now? Traditional methods aren't working out well for me.

 

http://validator.w3.org/check?uri=http://115media.net/

If you do HTML5 ... you should know HTML5!

align="center"... does not exist in HTML5

Anyway, I would not recommend to use position absolute for the UL, using 2 clearfixes (one is in 960.css) and using @import AFTER the 960.css is loaded.

CSS reset should be done before everything else (if I am wrong then tell me).

Why not center nav with margin:0 auto; ?

 

Sorry! This is my first site using HTML5, so I'm kind of new on the block. But you completely lost me on the position absolute bit and I don't know what a CSS reset is. I'll give your coding a try tho! Thanks.

 

I would recommend learning (X)HTML/CSS first before HTML5/CSS3...

It's not about fancy features, it's about understanding the box model, positioning, document flow and floating!