Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 01-13-2009, 05:26 PM
Contributing Member
Latest Blog:
None

 
Join Date: 12-14-08
Posts: 140
iTrader: 0 / 0%
Exclamation Best practice/way to make Navigation !!! float:left , display: inline , or using <ul>

Whats the best practice/way to make Navigation? float:left , display: inline , using <ul>, or ...
And why?
 
Reply With Quote

Advertisement

Advertisement

  #2 (permalink)  
Old 01-13-2009, 08:47 PM
Izzmo's Avatar
v7n Mentor
Latest Blog:
None

 
Join Date: 11-01-03
Location: Kansas
Posts: 1,356
iTrader: 1 / 100%
There are many types of navigation (position anyway)..

What side is it going to be on, or is it going to be on the top? Is it going to be tab like or just rowed? If so, will there be images, or just CSS?
__________________
Izzmo
Coding Guru Extraordinaire
ZeroWeb Hosting & Design - Customizable hosting for every type of user!
 
Reply With Quote
  #3 (permalink)  
Old 01-13-2009, 11:34 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 21,225
iTrader: 5 / 100%
Using an unordered list is a nice clean way to create your navigation. Through CSS you can make it align what ever way you want.

If you want a dynamic menu, you could check out CSS Play and see if there is one there you like. Note: He does require a donation to use on a commercial site.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #4 (permalink)  
Old 01-14-2009, 07:05 PM
Contributing Member
Latest Blog:
None

 
Join Date: 12-14-08
Posts: 140
iTrader: 0 / 0%
So there is no "best" practice or way to make a menu bar. Then could you break it down and explain both advantages and disadvantages of using:
1. <ul>
2. <div> with display: inline
3. <div> with float: left;
 
Reply With Quote
  #5 (permalink)  
Old 01-15-2009, 12:39 PM
Member
Latest Blog:
None

 
Join Date: 01-02-09
Posts: 46
iTrader: 0 / 0%
I think that most places use a combination of div and ul. So you would want to create your layout. Then whatever box you want your navigation create a ul in that for navigation. Then you can customize your ul for just that navigation box. #nav ul li { } like so. Hopefully that makes sense.
 
Reply With Quote
  #6 (permalink)  
Old 01-15-2009, 01:46 PM
Contributing Member
Latest Blog:
None

 
Join Date: 12-14-08
Posts: 140
iTrader: 0 / 0%
It makes sense, and it has been the way i used to make navigation. However, as i recently started experiencing other ways to make navigation, i feel the simplest is using pure divs like such:

<div id="header_navigation">

<div class="navigation_names">
</div>
<div class="navigation_names">
</div>
<div class="navigation_names">
</div>

</div>

and set .navigation_names: display inline;

Is there any disadvantages at all with this way?
 
Reply With Quote
  #7 (permalink)  
Old 01-15-2009, 03:01 PM
Member
Latest Blog:
None

 
Join Date: 01-02-09
Posts: 46
iTrader: 0 / 0%
Looks like more typing.

<div id="header_navigation">

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

</div>

Much less code. I guess that might make your css bigger but you will probably have to apply the same things to the list as you would to the divs. Really its whatever you are most comfortable with. Ive gotten use to using lists because most menu tutorials and examples out there use lists.
 
Reply With Quote
  #8 (permalink)  
Old 01-15-2009, 05:34 PM
Contributing Member
Latest Blog:
None

 
Join Date: 06-11-07
Posts: 238
iTrader: 0 / 0%
I use <dl> for my list because I have headers above each set of links. So I have:

<dl>
<dt>Header 1</dt>
<dd>Link 1</dd>
<dd>Link 2</dd>
<dd>Link 3</dd>
</dl>

Add some CSS and it comes out very nice. It works great for sidebar navigation.
 
Reply With Quote
  #9 (permalink)  
Old 01-19-2009, 10:25 AM
Member
Latest Blog:
None

 
Join Date: 01-02-09
Posts: 46
iTrader: 0 / 0%
Thats interesting. I never really thought about using dl. You could also achieve a similar thing if you do li:first-child and then add style to that for a heading. I dont think that first-child is fully supported in IE but I forget with all its crazy things that dont work correctly.
 
Reply With Quote
  #10 (permalink)  
Old 01-23-2009, 01:48 AM
Junior Member
 
Join Date: 01-22-09
Posts: 12
iTrader: 0 / 0%
Quote:
Originally Posted by 2939195631902 View Post
So there is no "best" practice or way to make a menu bar. Then could you break it down and explain both advantages and disadvantages of using:
1. <ul>
2. <div> with display: inline
3. <div> with float: left;
For menus i'm using lists because, imho, it's more semantic than divs. A menu practically is nothing than list. I think, using divs for a list, semantically, isn't correct.
All list items has already the inline-block attribute, so you can manage paddings, etc.. without adding inline-block in css.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

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 Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS div/navigation alignment problem!! Just doesn't make sense... 2939195631902 Coding Forum 1 01-12-2009 07:44 AM
Left Navigation bar/buttons: Is it still in vogue? anandsoft Web Design Lobby 14 04-06-2007 10:44 AM
Wht if you cant have the navigation bar on the left?I would. crazyhorse Google Forum 6 06-29-2004 01:13 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 09:02 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.