Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering a Nav Bar, what would you recommend

    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

    Code:
    <!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>
    Last edited by Nick5; 11-07-2009 at 04:14 PM. Reason: Added tags for better scrolling

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If you are using a fixed width on your navbar, removing the fixed width, width:1150px; , applied on the body element would center it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Nick5,
    Try these changes -
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Nick5 (11-09-2009)

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    To center something you need 3 things.
    1. DocType
    2. width of the element your centering
    3. margin:0 auto; on same element


    Have another look at the css for #navContainer in my previous post
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #7
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    add a width..you can't center it without a width.

    Code:
    #navContainer {
    	width: 900px;
    	margin: auto;
    	overflow: auto;
    }
    about 900px works fine..

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

  • Users who have thanked met for this post:

    Nick5 (11-09-2009)

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by met View Post
    ..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.

  • #9
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Quote Originally Posted by SB65 View Post
    No need for this, overflow:auto will clear the floats as Excavator has indicated.
    force of habit, only recently found out about overflow:auto

  • #10
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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/

    Code:
    <!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>

  • #11
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    if you want the nav bar to shrink with the page you need to use a % based layout, not fixed width (i.e pixels)

  • #12
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •