Member Avatar for razzor

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

/* NAVIGATION MENU */
#Nav {
	margin: 0px;
	height: 27px;
	background: url(/images/contbg2.gif);
}

/*New CSS Rules*/

/* CSS Document */
/*Nav Bar CSS rules*/


#nav {

	margin: 0;
	padding: 0;
	height: 27px;
	float: left;
	width:100%;
	/*
	border: 1px solid #42432d;
	border-width: 1px 0;*/
}

#nav li {
	display: inline;
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

#nav a, #nav a:link,
#nav a:visited {
	font-size:16px;
	color:#000;
	background: url(../images/nav-bg.gif);
	padding: 3px 16px 6px 16px;
	float: left;
	width: auto;
	border-right:1px solid #ACACE3;
	text-decoration: none;
	
	font: bold 1em/1em Arial, Helvetica, sans-serif;
}
#nav li:first-child a {
	border-left: 1px solid #ACACE3;
}
#nav a:hover, #nav a:active {

	color:#fff;
	background: url(../images/nav-hover-1.gif);
}







/*End of New CSS Rules*/
/*

#navLinks {	
	text-align: center;
	height: 27px;
	background: url(/images/nav.gif) no-repeat top center;
}

#navLinks ul {
	list-style: none;
	padding: 0;
	margin: 0;
}


#navLinks li {
	float: left;
	margin: 0 2em;
}
#navLinks li a {

	background: url(/images/nav.gif) no-repeat top center;
	height: 2em;
	line-height: 2em;
	float: left;
	width: 9em;
	display: block;
	
}
	


#nav a, #nav a:link, #nav a:visited {
	font-size: 16px;
	color: #000000;
	text-decoration: none;
	padding: 3px 16px 6px 16px;
	margin: 0px 12px;
	background: url('/images/nav.gif') no-repeat top center;
}
#nav a:hover, #nav a:active {
	background: url(/images/nav-hover.gif) repeat-x top center;
	color: #fff;
}*/
/*#navLeftEnd {
	height: 27px;
	background: url(/images/nav-left.gif) no-repeat top left;
}
#navRightEnd {
	margin-left: 17px;
	height: 27px;
	width: 774px;
	background: url(/images/nav-right.gif) no-repeat top right;
}*/

Here's the html file

<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>
  • 3 Contributors
  • 3 Replies
  • 214 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

The root cause is a combination of the nav being floated/expanded and the wrapper being commented out in the HTML (the page shows <!-- <div id="Nav"> --> ... <!-- </div> -->). That leaves the UL free to behave as a full-width/left-aligned element. was correct to warn about fixed heights — text resizing will break a strict height. The simplest reliable fix: give the navigation a fixed container width (774px), center that container with margin: 0 auto, and stop floating the anchors. Use the container to handle rounded ends (CSS3 border-radius) or, for older browsers, add small end-cap graphics.

Example: a centered wrapper that clips children (no floats on anchors)

#nav-wrap {
  width: 774px;
  margin: 0 auto;
  overflow: hidden;      /* clears floated children if used */
  border-radius: 6px;    /* rounded ends for modern browsers */
  background: #f4f4f4;   /* or a background-image */
}

#nav { margin: 0; padding: 0; list-style: none; }
#nav li { float: left; }          /* or use inline-block */
#nav a { display: block; padding: 8px 16px; text-decoration: none; }

A modern, easier alternative is flexbox: make the UL a fixed-width flex container and remove floats entirely. Flex keeps items centered and evenly laid out without fiddly borders on each link.

#nav {
  width: 774px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 6px;
  overflow: hidden;
}
#nav li { list-style: none; }
#nav a { display: block; padding: 8px 14px; }

Troubleshooting notes: ensure the nav wrapper is not commented out; remove width:100% or float:left from the UL; avoid fixed height (use padding/line-height instead); remove border seams by hiding overflow on the rounded container or by removing the last-item border with :last-child. s confirmation that the earlier change worked aligns with centering the container rather than stretching the UL. Test in dev tools to inspect computed width/margins and add a temporary outline to visualize layout while tweaking.

Recommended Answers

All 3 Replies

Member Avatar for autocrat

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

Member Avatar for tobbilla78

Thanks a lot man its working fine.
--------------------c
[snipped fake signature]

Member Avatar for autocrat

Groovey :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.