User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,608 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,277 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1353 | Replies: 3
Reply
•
•
Join Date: Sep 2007
Posts: 1
Reputation: razzor is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
razzor razzor is offline Offline
Newbie Poster

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

  #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

Help with Code Tags
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

Help with Code Tags 
<body>

<div id="container">

	
  <div id="header"> <img src="/images/header.gif" /> </div>
	  
	 	
<!--  <div id="Nav"> -->
    	
    
      <ul id="nav">		  
		  	<li id="nav-index"><a href="/index.htm">Home</a></li>
			<li id="nav-products"><a href="/products.htm">Products</a></li>
		  	<li id="nav-howitworks"><a href="/howitworks.htm">How It Works</a></li>
		  	<li id="nav-faq"><a href="/faq.htm">FAQ</a></li>
		  	<li id="nav-partners" ><a href="/partners.htm">Partners</a></li>
		  	<li id="nav-about"><a href="/about.htm">About Us</a></li>
		  </ul>	
		
<!--	</div> -->
</div>

</body>
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

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

  #2  
Sep 16th, 2007
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!!!
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
Reply With Quote  
•
•
Join Date: Sep 2007
Posts: 2
Reputation: tobbilla78 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
tobbilla78 tobbilla78 is offline Offline
Newbie Poster

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

  #3  
Sep 20th, 2007
Thanks a lot man its working fine.
--------------------c
[snipped fake signature]
Last edited by Narue : Mar 24th, 2008 at 1:13 pm. Reason: Snipped fake signature
Reply With Quote  
•
•
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

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

  #4  
Sep 20th, 2007
Groovey
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
code css development div dreamweaver firefox google checkout google checkout vat html html api javascript news symantec tables w3c web wysiwyg xml
Similar Threads
Other Threads in the HTML and CSS Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 8:38 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC