SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Horizontal nav bar problem
-
Sep 15, 2007, 20:43 #1
- Join Date
- Feb 2007
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Horizontal nav bar problem
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 code:
Code:/* 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; }*/
Code:<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>
-
Sep 15, 2007, 20:53 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Got a link so I can copy the images (which will allow me to rebuild the menu on my end)?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 16, 2007, 06:21 #3
- Join Date
- Feb 2007
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Re:
Thank you for your quick repsonse. I dont have the link, but I attach the gif files. Please let me know if you need anything else.
-
Sep 18, 2007, 00:22 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Razzor, I'm going to tackle this in the morning when I wake up.
Hope you don't mind.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 18, 2007, 05:06 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
If you want the nav centred then you will need to give it a width and remove the float.
At present it is 584px wide so you would center it like this.
Code:#nav { margin: 0 auto; padding: 0; height: 27px; width:584px; }
Alos note that IE6 doesn't understand first-child so you would need to add a class to the first list item for IE.
e.g.
Code:#nav li:first-child a { border-left: 1px solid #ACACE3; } #nav li.fc a { border-left: 1px solid #ACACE3; }
Code:<li id="nav-index" class="fc"><a href="/index.htm">Home</a></li>
-
Sep 19, 2007, 05:17 #6
- Join Date
- Feb 2007
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you Dan. I look forward to seeing your work. And Paul, I'm going to try to implement your suggestions and get to you on that very soon.
Thank you all.
-
Sep 19, 2007, 07:26 #7
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Following on from what Paul said, to allow for text resizing you need to set your sizes in ems. Setting the padding and line height of the <a> elements allows you to set the size of the <ul> in ems as well and not have it break when text is resized.
Code:#nav { margin: 0 auto; padding: 0; height: 1.6em; width: 37em; } #nav a, #nav a:link, #nav a:visited { font-size:16px; color:#000; background: url(images/nav-bg.gif); padding: 0 1em; float: left; border-right:1px solid #ACACE3; text-decoration: none; font: bold 1em/1em Arial, Helvetica, sans-serif; height: 1.6em; line-height: 1.6em; }
Bookmarks