Thread: How do I center extend the nav bar to fit in the body of the page
View Single Post
•
•
Join Date: Sep 2007
Posts: 1
Reputation: razzor is an unknown quantity at this point 
Solved Threads: 0
razzor razzor is offline Offline
Newbie Poster

How do I center extend the nav bar to fit in the body of the page

 
0
  #1
Sep 15th, 2007
I'm trying to get my horizontal bar to fit right in middle of my page. It supposed to be 774px wide. I'm also trying to add round (curve) edges to both ends. Here's my css code that I got from a template. Right now, the nav bar is to the left, short and doesn't fit the whole page.
Here's the css

css Syntax (Toggle Plain Text) 
  1.  
  2. /* NAVIGATION MENU */
  3. #Nav {
  4. 	margin: 0px;
  5. 	height: 27px;
  6. 	background: url(/images/contbg2.gif);
  7. }
  8.  
  9. /*New CSS Rules*/
  10.  
  11. /* CSS Document */
  12. /*Nav Bar CSS rules*/
  13.  
  14.  
  15. #nav {
  16.  
  17. 	margin: 0;
  18. 	padding: 0;
  19. 	height: 27px;
  20. 	float: left;
  21. 	width:100%;
  22. 	/*
  23. 	border: 1px solid #42432d;
  24. 	border-width: 1px 0;*/
  25. }
  26.  
  27. #nav li {
  28. 	display: inline;
  29. 	list-style-type: none;
  30. 	padding: 0;
  31. 	margin: 0;
  32. 	text-align: center;
  33. }
  34.  
  35. #nav a, #nav a:link,
  36. #nav a:visited {
  37. 	font-size:16px;
  38. 	color:#000;
  39. 	background: url(../images/nav-bg.gif);
  40. 	padding: 3px 16px 6px 16px;
  41. 	float: left;
  42. 	width: auto;
  43. 	border-right:1px solid #ACACE3;
  44. 	text-decoration: none;
  45.  
  46. 	font: bold 1em/1em Arial, Helvetica, sans-serif;
  47. }
  48. #nav li:first-child a {
  49. 	border-left: 1px solid #ACACE3;
  50. }
  51. #nav a:hover, #nav a:active {
  52.  
  53. 	color:#fff;
  54. 	background: url(../images/nav-hover-1.gif);
  55. }
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63. /*End of New CSS Rules*/
  64. /*
  65.  
  66. #navLinks {	
  67. 	text-align: center;
  68. 	height: 27px;
  69. 	background: url(/images/nav.gif) no-repeat top center;
  70. }
  71.  
  72. #navLinks ul {
  73. 	list-style: none;
  74. 	padding: 0;
  75. 	margin: 0;
  76. }
  77.  
  78.  
  79. #navLinks li {
  80. 	float: left;
  81. 	margin: 0 2em;
  82. }
  83. #navLinks li a {
  84.  
  85. 	background: url(/images/nav.gif) no-repeat top center;
  86. 	height: 2em;
  87. 	line-height: 2em;
  88. 	float: left;
  89. 	width: 9em;
  90. 	display: block;
  91.  
  92. }
  93.  
  94.  
  95.  
  96. #nav a, #nav a:link, #nav a:visited {
  97. 	font-size: 16px;
  98. 	color: #000000;
  99. 	text-decoration: none;
  100. 	padding: 3px 16px 6px 16px;
  101. 	margin: 0px 12px;
  102. 	background: url('/images/nav.gif') no-repeat top center;
  103. }
  104. #nav a:hover, #nav a:active {
  105. 	background: url(/images/nav-hover.gif) repeat-x top center;
  106. 	color: #fff;
  107. }*/
  108. /*#navLeftEnd {
  109. 	height: 27px;
  110. 	background: url(/images/nav-left.gif) no-repeat top left;
  111. }
  112. #navRightEnd {
  113. 	margin-left: 17px;
  114. 	height: 27px;
  115. 	width: 774px;
  116. 	background: url(/images/nav-right.gif) no-repeat top right;
  117. }*/

Here's the html file

HTML and CSS Syntax (Toggle Plain Text) 
  1. <body>
  2.  
  3. <div id="container">
  4.  
  5.  
  6.   <div id="header"> <img src="/images/header.gif" /> </div>
  7.  
  8.  
  9. <!--  <div id="Nav">
  10.  -->
  11.  
  12.  
  13.       <ul id="nav">		  
  14. 		  	<li id="nav-index"><a href="/index.htm">Home</a></li>
  15. 			<li id="nav-products"><a href="/products.htm">Products</a></li>
  16. 		  	<li id="nav-howitworks"><a href="/howitworks.htm">How It Works</a></li>
  17. 		  	<li id="nav-faq"><a href="/faq.htm">FAQ</a></li>
  18. 		  	<li id="nav-partners" ><a href="/partners.htm">Partners</a></li>
  19. 		  	<li id="nav-about"><a href="/about.htm">About Us</a></li>
  20. 		  </ul>	
  21.  
  22. <!--	</div>
  23.  -->
  24. </div>
  25.  
  26. </body>
Reply With Quote