...

View Full Version : Centering a Nav Bar, what would you recommend



Nick5
11-07-2009, 05:45 AM
I have been designing a web site and I am learning CSS. I can get the Nav Bar to stayed centered with sarfari but when i used Internet Explorer it doesn't stay centered I'm not able to get it right. I know you guys are experts from looking at the previous posts, so i would like to get your input on the way i should do it. I have put the page up here for you to preview, http://mytestsite999.tripod.com/

Thanks for your help, Nick


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Stereo Shop Web 24</title>
<style type="text/css">

body {
margin: 0px auto;
padding: 0px;
text-align: left;
width: 1150px;
}

#wrapper {
width:1150px;
text-align: left;
margin: 0px auto;
padding: 0px;
height: auto;
}
#header {
height:400px;
margin: 0px auto;
padding: 0px;
display: block;
background: url(assets/blackBackFade-5.png);
}
#navContainer {
position:relative;
margin: 0px auto;
padding: 0px;
float: none;
width: 55em;
top: 58px;
}


a.nav, a.nav:link, a.nav:visited, .chosen {
display:block;
width: auto;
height:25px;
background:#21557B;
text-align:left;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:16px;
color: #FFF;
line-height:25px;
overflow:hidden;
float:left;
margin: 0px;
padding: 3px 20px;
border-top: 4px solid #000;
border-right: 1px solid #000;
border-bottom: 4px solid #000;
border-left: 1px solid #000;
}
.logo {
display: block;
padding-top: 32px;
margin: 0px auto;
}
a.nav:hover {color:#fff; background: #06F;}
a.nav:active, .chosen {color:#fff; background:#c00;}

#contact {
height:200px;
background:#3c3c3c;
position: relative;
}
#contactus {
height:105px;
width:275px;
position: relative;
right: 200px;
top: 40px;
float: right;
text-align: center;
}
.mailBox {
display: block;
position:relative;
float: right;
clear: none;
}
.email {
font-size: 1.9em;
color: #FFF;
}


#hours {
width: 300px;
height: 145px;
font-size: 1.4em;
color: #FFF;
text-align: center;
position: relative;
top: 25px;
left: 250px;
}
.StoreHoursHeading {
font-size: 1.5em;
color: #FFF;
text-decoration: underline;
}
#mainContent {
height:800px;
background: #3C3C3C;
}
.new_at_stereo_shop {
font-size: 2.7em;
color: #FFF;
text-align: center;
display: block;
margin: 0px;
}


.menuTable {
display: block;
margin-right: auto;
margin-left: auto;
}
.h1clear {
}

#test {
height:20px;
text-align: left;
position: relative;
color: #FFF;
display: block;
padding-left: 880px;
}
.clear {
clear: both;
text-align: center;
}

#test2 {
height:500px;
background: #3c3c3c;
display: block;
margin-right: auto;
margin-left: auto;
}

#logo1 {
height: 200px;
width: 350px;
border: 1px solid #FFF;
position: relative;
display: block;
float: right;
margin-right: 30px;
top: 15px;
clear: both;
}

#logo2 {
height: 200px;
width: 350px;
border: 1px solid #FFF;
position: relative;
float: right;
margin-right: 15px;
margin-left: 15px;
top: 15px;
clear: left;
}

#logo3 {
height: 200px;
width: 350px;
border: 1px solid #FFF;
position: relative;
float: right;
margin-left: 30px;
top: 15px;
clear: left;
}

.logoPostion {
text-align: left;
padding-left: 15px;
color: #FFF;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header">
<div id="test">
<!-- #BeginDate format:fcAm1a -->Friday, November 6, 2009 0:53 AM<!-- #EndDate -->
</div>
<img src="assets/stereoShopLogo7.png" width="827" height="231" class="logo" />
<div id="navContainer">

<span class="chosen">HOME</span>
<a class="nav" href="page2.html" title="page 2">Page 2</a>
<a class="nav" href="page3.html" title="page 3">Page 3</a>
<a class="nav" href="page4.html" title="page 4">Page 4</a>
<a class="nav" href="page5.html" title="page 5">Page 5</a>
<a class="nav" href="page6.html" title="page 6">Page 6</a>
<a class="nav" href="page7.html" title="page 7">Page 7</a>
<a class="nav" href="page8.html" title="page 8">Page 8</a>
<a class="nav" href="page9.html" title="page 9">Page 9</a>

</div>
</div>
<div id="contact">
<div id="contactus"><img src="clipArt/mailBox.gif" alt="" width="92" height="94" class="mailBox" /><span class="email"></span><a href="mailto:nick@thestereoshop.com" class="email"><br />
email-us</a><br />
</div>

<div id="hours"><span class="StoreHoursHeading">Business Hours
</span><br />
Tues, Wed, Fri, 10-6<br />
Thurday, 10-7:30<br />
Saturday, 10-5<br />
Closed Sunday &amp; Monday<br />
</div>

</div>


<div id="mainContent">


<br />
<hr width="90%" size="1" />
<br />
<br />
<img src="menuTablets/menuTable1.png" width="800" height="600" class="menuTable" /></p>
</p>
</div>



<div id="test2">
<div id="logo1"><br />
<span class="logoPostion">Stereo Test</span><br />
<img src="logos/deftechLogo.gif" width="250" height="59" class="logoPostion" /><br />
<br />
<br />
<img src="logos/conradJohn.jpg" width="250" height="67" class="logoPostion" /><br />
</div>
<div id="logo2"><br />
<span class="logoPostion">Stereo Test<br />
</span> <img src="logos/bwLogo.png" width="151" height="74" /><br />
<br />
<img src="logos/rotelLogo.jpg" width="200" height="66" class="logoPostion" /><br />
</div>
<div id="logo3"><br />
<span class="logoPostion">Stereo Test<br />
</span><img src="logos/McIntoshLogoGold.gif" width="200" height="55" class="logoPostion" /><br />
<br />
<br />
<br />
<img src="logos/yamaha.png" width="250" height="57" class="logoPostion" /><br />
</div>

</div>

<p>&nbsp;</p>
<p>&nbsp;</p>

</body>
</html>

abduraooft
11-07-2009, 08:44 AM
If you are using a fixed width on your navbar, removing the fixed width, width:1150px; , applied on the body element would center it.

Excavator
11-07-2009, 08:51 AM
Hello Nick5,
Try these changes -

body {

text-align: left;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#header {
height:400px;
margin: 0px auto;
display: block;
background: url(assets/blackBackFade-5.png);
}
#navContainer {
width: 55em;
margin: 58px auto 0;
overflow: auto;
}



You can wrap code that you post here in
tags to get the scroll box like I have. Really helps the readability of your post.

Nick5
11-07-2009, 05:41 PM
Excavator Thanks for the idea but it didn't work did i do it wrong. I update the test site. http://mytestsite999.tripod.com/ Thanks for taking a look

Excavator
11-07-2009, 06:22 PM
To center something you need 3 things.

DocType
width of the element your centering
margin:0 auto; on same element


Have another look at the css for #navContainer in my previous post

Nick5
11-07-2009, 07:05 PM
Abduracoft i try this but no go. any other ideas. thanks for giving it a shot. I may have don't what you suggested wrong. I up loaded the test site with the changes only commented out. so i could see what effect it would have.

met
11-07-2009, 07:17 PM
add a width..you can't center it without a width.



#navContainer {
width: 900px;
margin: auto;
overflow: auto;
}


about 900px works fine..

and add: <div style="clear:left"></div> after the last link.

SB65
11-07-2009, 07:52 PM
..and add: <div style="clear:left"></div> after the last link.

No need for this, overflow:auto will clear the floats as Excavator has indicated.

met
11-07-2009, 07:54 PM
No need for this, overflow:auto will clear the floats as Excavator has indicated.

force of habit, only recently found out about overflow:auto :rolleyes:

Nick5
11-08-2009, 12:21 AM
Ok now the Nav Bar in centered but when i make the page smaller it folds under is self? I would like it to just get shrink as the page get is reduced in size. I think I'm missing something. I have updated to test site and here is the new code. I really appreciate all you help. http://mytestsite999.tripod.com/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Stereo Shop Web 24</title>
<style type="text/css">


body {

text-align: left;
}
*
{
margin: 0;
padding: 0;
border: 0;
}
#wrapper {
width:1000px;
text-align: left;
margin: 0px auto;
padding: 0px;
height: auto;
}
#header {
height:400px;
margin: 0px auto;
display: block;
background: url(assets/blackBackFade-5.png);
}
#navContainer {
width: 880px;
margin: 30px auto 0;
overflow: auto;
height: 50px;
}

/*Above this line the code is as per excavator*/

/*
body {
margin: 0px auto;
padding: 0px;
text-align: left;
width: 1150px;
}

#header {
height:400px;
margin: 0px auto;
padding: 0px;
display: block;
background: url(assets/blackBackFade-5.png);
}

#navContainer {
position:relative;
margin: 0px auto;
padding: 0px;
width: 55em;
top: 58px;
}
above this line is my old code
*/

a.nav, a.nav:link, a.nav:visited, .chosen {
display:block;
width: auto;
height:25px;
background:#21557B;
text-align:left;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:16px;
color: #FFF;
line-height:25px;
overflow:hidden;
float:left;
margin: 0px;
padding: 3px 20px;
border-top: 4px solid #000;
border-right: 1px solid #000;
border-bottom: 4px solid #000;
border-left: 1px solid #000;
}
.logo {
display: block;
padding-top: 32px;
margin: 0px auto;
}
a.nav:hover {color:#fff; background: #06F;}
a.nav:active, .chosen {color:#fff; background:#c00;}

#contact {
height:200px;
background:#3c3c3c;
position: relative;
}
#contactus {
height:105px;
width:275px;
position: relative;
right: 200px;
top: 40px;
float: right;
text-align: center;
}
.mailBox {
display: block;
position:relative;
float: right;
clear: none;
}
.email {
font-size: 1.9em;
color: #FFF;
}


#hours {
width: 300px;
height: 145px;
font-size: 1.4em;
color: #FFF;
text-align: center;
position: relative;
top: 25px;
left: 250px;
}
.StoreHoursHeading {
font-size: 1.5em;
color: #FFF;
text-decoration: underline;
}
#mainContent {
height:800px;
background: #3C3C3C;
}
.new_at_stereo_shop {
font-size: 2.7em;
color: #FFF;
text-align: center;
display: block;
margin: 0px;
}


.menuTable {
display: block;
margin-right: auto;
margin-left: auto;
}
.h1clear {
}

#test {
height:20px;
text-align: left;
position: relative;
color: #FFF;
display: block;
padding-left: 880px;
}
.clear {
clear: both;
text-align: center;
}

#test2 {
height:500px;
background: #3c3c3c;
display: block;
margin-right: auto;
margin-left: auto;
}

#logo1 {
height: 200px;
width: 350px;
border: 1px solid #FFF;
position: relative;
display: block;
float: right;
margin-right: 30px;
top: 15px;
clear: both;
}

#logo2 {
height: 200px;
width: 350px;
border: 1px solid #FFF;
position: relative;
float: right;
margin-right: 15px;
margin-left: 15px;
top: 15px;
clear: left;
}

#logo3 {
height: 200px;
width: 350px;
border: 1px solid #FFF;
position: relative;
float: none;
margin-left: 30px;
top: 15px;
clear: none;
}

.logoPostion {
text-align: left;
padding-left: 15px;
color: #FFF;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header">
<div id="test">
<!-- #BeginDate format:fcAm1a -->Saturday, November 7, 2009 6:14 PM<!-- #EndDate -->
</div>
<img src="assets/stereoShopLogo7.png" width="827" height="231" class="logo" />
<div id="navContainer">

<span class="chosen">HOME</span>
<a class="nav" href="page2.html" title="page 2">Page 2</a>
<a class="nav" href="page3.html" title="page 3">Page 3</a>
<a class="nav" href="page4.html" title="page 4">Page 4</a>
<a class="nav" href="page5.html" title="page 5">Page 5</a>
<a class="nav" href="page6.html" title="page 6">Page 6</a>
<a class="nav" href="page7.html" title="page 7">Page 7</a>
<a class="nav" href="page8.html" title="page 8">Page 8</a>
<a class="nav" href="page9.html" title="page 9">Page 9</a>

</div>
</div>
<div id="contact">
<div id="contactus"><img src="clipArt/mailBox.gif" alt="" width="92" height="94" class="mailBox" /><span class="email"></span><a href="mailto:nick@thestereoshop.com" class="email"><br />
email-us</a><br />
</div>

<div id="hours"><span class="StoreHoursHeading">Business Hours
</span><br />
Tues, Wed, Fri, 10-6<br />
Thurday, 10-7:30<br />
Saturday, 10-5<br />
Closed Sunday &amp; Monday<br />
</div>

</div>


<div id="mainContent">


<br />
<hr width="90%" size="1" />
<br />
<br />
<img src="menuTablets/menuTable1.png" width="800" height="600" class="menuTable" /></p>
</p>
</div>



<div id="test2">
<div id="logo1"><br />
<span class="logoPostion">Stereo Test</span><br />
<img src="logos/deftechLogo.gif" width="250" height="59" class="logoPostion" /><br />
<br />
<br />
<img src="logos/conradJohn.jpg" width="250" height="67" class="logoPostion" /><br />
</div>
<div id="logo2"><br />
<span class="logoPostion">Stereo Test<br />
</span> <img src="logos/bwLogo.png" width="151" height="74" /><br />
<br />
<img src="logos/rotelLogo.jpg" width="200" height="66" class="logoPostion" /><br />
</div>
<div id="logo3"><br />
<span class="logoPostion">Stereo Test<br />
</span><img src="logos/McIntoshLogoGold.gif" width="200" height="55" class="logoPostion" /><br />
<br />
<br />
<br />
<img src="logos/yamaha.png" width="250" height="57" class="logoPostion" /><br />
</div>

</div>

<p>&nbsp;</p>
<p>&nbsp;</p>

</body>
</html>

met
11-08-2009, 01:18 PM
if you want the nav bar to shrink with the page you need to use a % based layout, not fixed width (i.e pixels)

Nick5
11-09-2009, 11:41 PM
I would like to thank everyone for there ideas and with all your help i was able to get the info i needed to get my nav bar centered. I hope some day to be as good as you guys are and be able to give my input to help someone else out. Thanks again. Nick



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum