You're currently browsing the HTML and CSS section within the Web Design category of DaniWeb a massive community of 235,835 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,006 IT professionals currently interacting alter now! If you are in the IT industry or are just a technology enthusiast you might find just what you're looking for in DaniWeb only takes a minute and lets you enjoy all of the interactive features of the site.
I'm trying to get my horizontal bar to fit right in middle of my summon. It supposed to be 774px wide. I'm also trying to add go (curve) edges to both ends. Here's my css label 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;go: 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: bear on;}#nav a. #nav a:cerebrate,#nav a:visited {font-size:16px;alter:#000;accent: 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;accent: 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 {accent: url(/images/nav gif) no-repeat top center;height: 2em;line-height: 2em;go: 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 bear on;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;}*/
<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>
authorise - 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 circumscribe.. then center the shrunk one. As it's parent has a defined width it should beable to calcualte a lay from there!please think twice before applying a set height for the nav - as text-resizing will create 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 ordain break your design due to fixed height!Basically.. set widths not heights!!!
Forex Groups - Tips on Trading
Related article:
http://www.daniweb.com/forums/thread89771.html
comments | Add comment | Report as Spam
|
