[SOLVED] Horizontal Navigation Bar

This is a discussion on "[SOLVED] Horizontal Navigation Bar" within the Web Page Design section. This forum, and the thread "[SOLVED] Horizontal Navigation Bar are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Closed Thread
 
LinkBack Thread Tools
  #1  
Old Oct 1st, 2007, 03:39
New Member
Join Date: Sep 2007
Location: Iowa
Posts: 8
Thanks: 1
Thanked 0 Times in 0 Posts
[SOLVED] Horizontal Navigation Bar

I have spent quite some time trying to figure this out. I have a feeling that i have looked at it too much and am missing something simple. I am trying to do a horizontal navigation bar. I have searched the internet and tried so many examples. I cannot replicate any of the examples I found. So I broke it way down to basic code...I can't even get the bullets to disappear...Boy, I feel stupid!

By the way, I am using Firefox but have tried viewing on Safari and IE also. No luck in any of the browsers.

Here is my CSS code:
Code: Select all
div#navbar
    {
    }

div#navbar ul
    {
    list-style: none;
    list-image: none;
    margin: 0;
    padding: 0;
    }
Here is my XHTML code:
HTML: Select all
<div id="navbar">
<ul>
<li><a href="#">January</a></li>
<li><a href="#">February</a></li>
<li><a href="#">March</a></li>
<li><a href="#">April</a></li>
<li><a href="#">May</a></li>
<li><a href="#">June</a></li>
<li><a href="#">July</a></li>
<li><a href="#">August</a></li>
<li><a href="#">September</a></li>
<li><a href="#">October</a></li>
<li><a href="#">November</a></li>
<li><a href="#">December</a></li>
</ul>
</div>
Any suggestions? Thanks

Last edited by karinne; Oct 1st, 2007 at 13:18. Reason: Use vBcode to display code in your posts ;)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!

  #2  
Old Oct 1st, 2007, 04:50
Junior Member
Join Date: Sep 2007
Location: Huntington Beach
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Navigation Bar

div#navbar li
{
display:inline;
}

Just toss that in there :P
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
  #3  
Old Oct 1st, 2007, 04:56
Junior Member
Join Date: Sep 2007
Location: Huntington Beach
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Navigation Bar

I forgot that you mentioned the bullets weren't disappearing, so I was curious and actually threw this in dreamweaver, I don't see them though. I know most elite webmasters would frown upon this, but I use a global reset to get rid of junk like that list-style, I tend to use

* { margin: 0; padding: 0; border: none; list-style: none; }

Its more out of habit, but it works, then you won't even have to deal with dropping the bullets, but if you need them somewhere else on the page you actually have to call them up in the CSS file. I just never use the defaults.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
  #4  
Old Oct 1st, 2007, 07:22
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,609
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Horizontal Navigation Bar

Yeah, It was easy...
I face the same problem few years ago.

Here are some of the COMPLETE guide of how to make a "CSS Horizontal Menu"
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
  #5  
Old Oct 1st, 2007, 13:19
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Navigation Bar

Alistapart has a great article on this - CSS Design: Taming Lists
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
  #6  
Old Oct 3rd, 2007, 15:31
New Member
Join Date: Sep 2007
Location: Iowa
Posts: 8
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Horizontal Navigation Bar

I think I got my menus working. Thanks for all the advice!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Closed Thread

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
horizontal list navigation breaks when load times are slow sch3dana Web Page Design 14 Mar 19th, 2008 12:56
horizontal navigation bar using realitve position <li> ehudros Web Page Design 1 Nov 18th, 2007 14:34
[SOLVED] Vertical and Horizontal Dashed lines thewebkid Starting Out 4 Oct 30th, 2007 10:13
Horizontal CSS Navigation Lchad Web Page Design 7 Dec 5th, 2006 19:04
Tip : Vertical and Horizontal Centering - Solved! gwx03 Web Page Design 0 Dec 15th, 2003 06:11


All times are GMT. The time now is 22:14.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42