PDA

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



Nick5
11-07-2009, 04: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, 07: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, 07: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, 04: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, 05: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, 06: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, 06: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, 06: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, 06: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-07-2009, 11:21 PM
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, 12: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, 10: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