links not centering in nav bar div [Archive]

View Full Version : links not centering in nav bar div

jovialnazgul

Dec 14th, 2009, 02:29 AM

id really like my links centered in my nav bar. they won't budge!

here's what it looks like:

http://img696.imageshack.us/img696/2641/problemt.jpg

html:

<body>

<div id="wrapper">
<div id="header">
</div>
<div id="navbg">
<div id="navtext">
<a href="http://www.freewebsitetemplates.com">Home</a>
<a href="http://www.freewebsitetemplates.com">About us</a>
<a href="http://www.freewebsitetemplates.com">Services</a>
<a class="lastchild" href="http://www.freewebsitetemplates.com">Contact us</a>
</div>
</div>

css:

}
#wrapper {
width: 778px;
margin: auto;
text-align: left;
}
#navbg {
width:760px;
background-image:url(images/nav.gif);
background-repeat:no-repeat;
margin-left:20px;
display:inline;
float:left;

}
#navtext {
margin-left:200px;
display:inline;
text-align:center;
}
#navtext a {
font-size:18px;
font-style:italic;
color:#260403;
font-family:Georgia, "Times New Roman", Times, serif;
margin: 12px 0px 10px 0px;
padding: 0px 20px 0px 20px;
display:inline;
float:left;
border-right-width: 2px;
border-right-style: inset;
border-right-color: #76644f;
}
#nav a:hover {
color:#862e06;
text-decoration:none;
}
.lastchild {
border-right: none 0px !important;
}

thanks in advance for your help- i swear ive tried everything!

Excavator

Dec 14th, 2009, 02:34 AM

Hello jovialnazgul,
Several centered menu examples here - http://nopeople.com/design/CSS%20tips/index.html

You have #navbg floated but it's a full width div. Really only need to float things when you want to put something else beside them.

Excavator

Dec 14th, 2009, 02:54 AM

I hesitate to start removing divs because I don't know what you're planning for them later on in development. If #navtext and #navbg aren't going to have a specific purpose then it's just divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/) and they should be deleted.
So, without messing with your markup too much, give this a try... just for starters

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#wrapper {
width: 778px;
margin: 20px auto 50px;
text-align: left;
background: #f00;
}
#navbg {
width: 760px;
margin: 0 auto;
background: #ccc url(images/nav.gif) no-repeat;
overflow: auto;
}
#navtext {
margin-left:200px;
display:inline;
text-align:center;
}
#navtext a {
font-size:18px;
font-style:italic;
color:#260403;
font-family:Georgia, "Times New Roman", Times, serif;
margin: 12px 0px 10px 0px;
padding: 0px 20px 0px 20px;
display:inline-block; /*instead of float:left;*/
border-right-width: 2px;
border-right-style: inset;
border-right-color: #76644f;
}
#nav a:hover {
color:#862e06;
text-decoration:none;
}
.lastchild {
border-right: none 0px !important;
}

</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="navbg">
<div id="navtext">
<a href="http://www.freewebsitetemplates.com">Home</a>
<a href="http://www.freewebsitetemplates.com">About us</a>
<a href="http://www.freewebsitetemplates.com">Services</a>
<a class="lastchild" href="http://www.freewebsitetemplates.com">Contact us</a>
</div>
</div>
</div>
</div>
</body>
</html>