Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Centering Navigation Bar

A

amtjb

macrumors member
Original poster
Jan 5, 2011
46
0
I am trying to center my navigation bar. Can't come up with the right code. Can some one please tell me what I am not doing in my css?

Code: 
* {
   padding: 0;
   margin: 0;
}


nav {
     background-color: black;
     height: 50px;
}

nav ul {
       width:100%;
       margin: 0 auto;
       border-bottom: 2px solid #f7b007;
      
}

nav ul li {
     list-style-type: none;
     width: 90px;
     float: left;
     border-right: 1px solid #ccc;
     text-align: center;
 }

li a {
     text-decoration: none;
     color: white;
     line-height: 50px;
     display: block;
     font-family: arial, helvetica, sans-serif;
     font-size: .2em;
     font-weight: bold;
     
}

li a:hover {
    background-color: #494446;
    color: white;
}

header { 
        width: 2000;
        margin:0px auto;
        height: 130px;
 }
 
Last edited by a moderator:
Jessica Lares

Jessica Lares

macrumors G3
Oct 31, 2009
9,612
1,057
Near Dallas, Texas, USA
If you're styling IDs, you need #'s before "nav", if it's a class, you need a period.

As in,

Code: 
#nav {
     background-color: black;
     height: 50px;
}

#nav ul {
       width:100%;
       margin: 0 auto;
       border-bottom: 2px solid #f7b007;
      
}

Your problem is that the CSS isn't being read properly because of it.

EDIT: I was just playing around with it and it's most likely that nav is an ID, so you'd write it as #nav. The text centers, but your list is filling up 100% of its parent DIV. So you need to figure out how to fix that.
 
Last edited:
A

amtjb

macrumors member
Original poster
Jan 5, 2011
46
0
Centering navigation bar

I'm sorry. I should have posted my html5 when I posted my css. If you can still help me, I would appreciate it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Information web site</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header>
<img src="images/header.jpeg" />
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
<li><a href="#">home 5</a></li>
<li><a href="#">home 6</a></li>
<li><a href="#">home 7</a></li>
<li><a href="#">home 8</a></li>
<li><a href="#">home 9</a></li>
<li><a href="#">home 10</a></li>
<li><a href="#">home 11</a></li>
<li><a href="#">home 12></li>
<li><a href="#">home 13</a></li>
</ul>

</nav>

**************************************************

* {
padding: 0;
margin: 0;
}


nav {
background-color: black;
height: 50px;
}

nav ul {
width:100%;
margin: 0 auto;
border-bottom: 2px solid #f7b007;

}

nav ul li {
list-style-type: none;
width: 90px;
float: left;
border-right: 1px solid #ccc;
text-align: center;
}

li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
font-family: arial, helvetica, sans-serif;
font-size: .2em;
font-weight: bold;

}

li a:hover {
background-color: #494446;
color: white;
}

header {
width: 2000;
margin:0px auto;
height: 130px;
}
 
Jessica Lares

Jessica Lares

macrumors G3
Oct 31, 2009
9,612
1,057
Near Dallas, Texas, USA
amtjb said:
I'm sorry. I should have posted my html5 when I posted my css. If you can still help me, I would appreciate it.
Click to expand...

There is no "nav" or "header" elements. You just use DIVs with ID and Class names. I guess the easiest way to explain it is to think of it as an outline. The ID is your topic, and the classes are your bullet points.

Here is how your body should look like:

Code: 
<div id="header">
<img src="images/header.jpeg" />
</div>

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
<li><a href="#">home 5</a></li>
<li><a href="#">home 6</a></li>
<li><a href="#">home 7</a></li>
<li><a href="#">home 8</a></li>
<li><a href="#">home 9</a></li>
<li><a href="#">home 10</a></li>
<li><a href="#">home 11</a></li>
<li><a href="#">home 12</a></li>
<li><a href="#">home 13</a></li>
</ul>

</div>

And here's your CSS:

Code: 
* {
padding: 0;
margin: 0;
}


#nav {
background-color: black;
height: 50px;
}

#nav ul {
width:100%;
margin: 0 auto;
border-bottom: 2px solid #f7b007;

}

#nav ul li {
list-style-type: none;
width: 90px;
float: left;
border-right: 1px solid #ccc;
text-align: center;
}

li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
font-family: arial, helvetica, sans-serif;
font-size: .2em;
font-weight: bold;

}

li a:hover {
background-color: #494446;
color: white;
}

#header { 
width: 2000;
margin:0px auto;
height: 130px;
}

BTW, you should have a closing </body> and </html> at the end.

Your list is at 100%:

Code: 
#nav ul {
width:100%;
margin: 0 auto;
border-bottom: 2px solid #f7b007;}

If you're going to do that, make the header 100% too, take out the margins, and then wrap a DIV with an ID called "container" and do the exact numbers and margins there. Otherwise you're going to have to hardcode it into everything.
 
Last edited:
A

amtjb

macrumors member
Original poster
Jan 5, 2011
46
0
I called myself doing as you instructed. Could you please check my coding again. Navigation bar did not center.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Information web site</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="header">
<img src="images/header.jpeg" />
</header>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">home 3</a></li>
<li><a href="#">home 4</a></li>
<li><a href="#">home 5</a></li>
<li><a href="#">home 6</a></li>
<li><a href="#">home 7</a></li>
<li><a href="#">home 8</a></li>
<li><a href="#">home 9</a></li>
<li><a href="#">home 10</a></li>
<li><a href="#">home 11</a></li>
<li><a href="#">home 12></li>
<li><a href="#">home 13</a></li>
</ul>

</nav>
</div>
</body>
</html>

*****************************************


* {
padding: 0;
margin: 0;
}


#nav {
background-color: black;
height: 50px;

}

#nav ul {
width:100%;
margin: 0 auto;
border-bottom: 2px solid #f7b007;

}

#nav ul li {
list-style-type: none;
width: 90px;
float: left;
border-right: 1px solid #ccc;
text-align: center;

}

li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
font-family: arial, helvetica, sans-serif;
font-size: .2em;
font-weight: bold;

}

li a:hover {
background-color: #494446;
color: white;
}

#header {
width: 100%;
margin:0px auto;
height: 130px;
}
 
NutsNGum

NutsNGum

macrumors 68030
Jul 30, 2010
2,856
367
Glasgow, Scotland
This is what you're needing:

Obviously, this is just all the code together on one page. If you want to abstract the CSS, go for it.

PHP: 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Information web site</title>
		<!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
		<style>
* {
padding: 0;
margin: 0;
}


#nav {
background-color: black;
height: 50px;

}

#nav ul {
width:100%;
margin: 0 auto;
border-bottom: 2px solid #f7b007;
text-align: center;
}

#nav ul li {
list-style-type: none;
width: 90px;
/*float: left;*/
display: inline-block;
border-right: 1px solid #ccc;
text-align: center;

}

li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
font-family: arial, helvetica, sans-serif;
font-size: .2em;
font-weight: bold;

}

li a:hover {
background-color: #494446;
color: white;
}

#header { 
width: 100%;
margin:0px auto;
height: 130px;
}
		</style>
	</head>
	<body>
		<div id="header">
			<img src="images/header.jpeg" />
		</header>
	</div>
	<div id="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home 2</a></li>
			<li><a href="#">home 3</a></li>
			<li><a href="#">home 4</a></li>
			<li><a href="#">home 5</a></li>
			<li><a href="#">home 6</a></li>
			<li><a href="#">home 7</a></li>
			<li><a href="#">home 8</a></li>
			<li><a href="#">home 9</a></li>
			<li><a href="#">home 10</a></li>
			<li><a href="#">home 11</a></li>
			<li><a href="#">home 12></li>
			<li><a href="#">home 13</a></li>
		</ul>
	</div>
</div>
</body>
</html>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom