PDA

Click to See Complete Forum and Search --> : CSS Menu Alignment

6StringGeek
01-26-2009, 02:23 PM
Please tell me how to center the links on the menu bar...right now they are aligning left. I have some floats that may be causing it, but i can't figure it out. Sorry for any extrenuous code...I have probably made this more difficult than it really is. Thanks for any help! :o


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NAV BAR</title>
<link href="favicon.ico" type="image/gif" rel="icon" />
<meta name="description" content="My Content" />
<meta name="keywords" content="My Keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="nav.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="navbar">
<ul id="nav">
<li><a href="#" title="#">LINK 1</a></li>
<li><a href="#" title="#">LINK 2</a></li>
<li><a href="#" title="#">LINK 3</a></li>
<li><a href="#" title="#">LINK 4</a></li>
<li><a href="#" title="#">LINK 5</a></li>
</ul>
</div>
</body>
</html>


body {
background: #ccc;
}

#navbar {
background: #000;
width: 960px;
margin: 0 auto;
text-align: center;
padding: 0px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
overflow: hidden;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

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

#nav li {
float: left;
margin: 0px auto;
padding: 0px;
}

#nav a {
background: #000;
color: #ccc;
display: block;
font-weight: 600;
margin: 0px auto;
padding: 5px 15px 5px 15px;
font-size: 14px;
font-family:'trebuchet ms', helvetica, arial, sans-serif;
text-decoration: none;
letter-spacing:1px;
}

#nav a:hover {
background: #444;
color: #fff;
margin: 0px;
padding: 5px 15px 5px 15px;
text-decoration: none;
}
anna55
01-26-2009, 02:58 PM
It could be centered this way

#nav {
width: 410px;
margin: 0 auto;
padding: 0px;
list-style: none;
}
6StringGeek
01-26-2009, 03:04 PM
It could be centered this way

#nav {
width: 410px;
margin: 0 auto;
padding: 0px;
list-style: none;
}

Thanks for the reply!

I see what you're saying, but that method breaks if i add another link or two, unless i recalculate the width manually.

Is there a way to auto center the links no matter how many links are added as long as it doesn't exceed the width of the parent div?
6StringGeek
01-26-2009, 03:23 PM
I also just looked and I am using display: block vice inline. For some reason when i apply inline it shrinks the navbar height and i lose the padding. i am missing something easy, and bad coding is the likely culprit...help! :)
6StringGeek
01-26-2009, 04:10 PM
resolved by display inline and adding a wrap. lots of bad coding...sorry!