943,579 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > How do I center extend the nav bar to fit in the body of the page
Ad:
Permalink
Sep 15th, 2007
0

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

Expand Post »
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>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
razzor is offline Offline
1 posts
since Sep 2007
Permalink
Sep 16th, 2007
0

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

Okay - you have told us what the width should be... any reason you haven't told your css ?

Tell you Nav Container the width you want!
Additionally, you may want to wrappers/contaiers for the nav... once with the full width, one that "shrinks" around the content... then center the shrunk one.
As it's parent has a defined width, it should beable to calcualte a position from there!


please think twice before applying a set height for the nav - as text-resizing will cause the text to break out!
Further, what happens if the text gets bigger in such a short widht.... it could result in the links dropping to two lines not one... in which case it will break your design due to fixed height!

Basically... set widths, not heights!!!
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Sep 20th, 2007
0

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

Thanks a lot man its working fine.
--------------------c
[snipped fake signature]
Last edited by Narue; Mar 24th, 2008 at 2:13 pm. Reason: Snipped fake signature
Reputation Points: 10
Solved Threads: 0
Newbie Poster
tobbilla78 is offline Offline
2 posts
since Sep 2007
Permalink
Sep 20th, 2007
0

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

Groovey
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: java chat
Next Thread in HTML and CSS Forum Timeline: Canvas





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC