# Code opinion about navigation

**URL:** <https://forum.kirupa.com/t/code-opinion-about-navigation/262023>\
**Category:** web dev\
**Created:** [June 2, 2008, 6:35pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023 "2008-06-02T18:35:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 2, 2008, 6:35pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/1 "2008-06-02T18:35:48Z")

</div>

So I was working on a website for a client and I got to the point to where I’m going to code the main navigation. It is going to be a horizontal bar underneath the header with 6 links.

Before I started to write the HTML for it, I stopped for a second and thought, should I use an unordered list and float them or should I just use anchor tags with padding?

So ultimately, my questions is, on a horizontal navigation, do you personally use an unordered list or not?

BTW, I went ahead and used an unordered list, incase you were wondering.

_cheers_ 🍺

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 2, 2008, 7:00pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/2 "2008-06-02T19:00:27Z")

</div>

unordered list, yo!

depending on the styling you can either define your list items as blocks and float each one, or you could just do display: inline on the list items … I prefer the block + float method as opposed to the inline method

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 2, 2008, 7:05pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/3 "2008-06-02T19:05:10Z")

</div>

True, but it seems like a useless amount of extra code… Although, come to think of it, it would be much better to have that list then to NOT have the list if you decided to provide multiple layout stylesheets :thumb2:, so I guess I pretty much answered my own question… :shifty::puzzle:

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 2, 2008, 7:08pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/4 "2008-06-02T19:08:24Z")

</div>

Well either way you’re going to have to code a lot of code, but its all about the maintainability – looking forward – and how easy it would be to add a link to the nav, or remove one, and \<ul\>\</ul\> does this very well.

best article on lists ever: [http://www.alistapart.com/stories/taminglists/](http://www.alistapart.com/stories/taminglists/)  
best article on sprites ever: [http://www.alistapart.com/articles/sprites](http://www.alistapart.com/articles/sprites)

and as for multiple stylesheets, it doesn’t how you set the structure up with the code, if you’ve done a good job you’d be able to do this no matter what technique you use… as to truly utilize CSS’s powers you strip all of the visual aspects of a page out from the structure.

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 2, 2008, 7:17pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/5 "2008-06-02T19:17:24Z")

</div>

Yeh, I understand all that. I mean you can easily add a link to the nav if it was just a div (container) with some anchor tags in it as well.

I guess it was a stupid question, nevermind. 😛

I was just wondering what people’s opinion was on it is all.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 2, 2008, 7:18pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/6 "2008-06-02T19:18:09Z")

</div>

Golden Rule of Internets: Do not use a div if you do not have to

divs are like, last resort. (well, for this purpose anyways, using divs for a bunch of little things like nav items is just as bad as using tables for layout)

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 2, 2008, 7:24pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/7 "2008-06-02T19:24:41Z")

</div>

Ouch! ☹ 😛 Gotcha… I’ll post-it that one up for the next time I make a layout and I say “ok, one div for header, one for nav with an unordered list, one for content, and one for footer with unordered list”… and ill just go with: \<h1\>\<ul\>\<div content\>\<ul\> instead :thumb2:

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 2, 2008, 7:55pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/8 "2008-06-02T19:55:39Z")

</div>

BOoyah!

although i still make a nav div, because sometimes (err… most of the time) you need to position your ul around within something

---

<div class="post-metadata">

**Author:** ![Raydred](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/raydred/32/65_2.png) [@Raydred](https://forum.kirupa.com/u/Raydred)\
**Post date:** [June 2, 2008, 11:39pm UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/9 "2008-06-02T23:39:17Z")

</div>

[QUOTE=redelite;2334970]So I was working on a website for a client and I got to the point to where I’m going to code the main navigation. It is going to be a horizontal bar underneath the header with 6 links.

Before I started to write the HTML for it, I stopped for a second and thought, should I use an unordered list and float them or should I just use anchor tags with padding?

So ultimately, my questions is, on a horizontal navigation, do you personally use an unordered list or not?

BTW, I went ahead and used an unordered list, incase you were wondering.

_cheers_ 🍺[/QUOTE]

I personally like unordered lists. The reason being, if you wanted to add another item, it’s really quick and easy to style. I guess you could argue, that setting up padding and putting a \< br \> is just as fast, but I like that the links are Contained within the unordered list, making it very easy to style later.

Hope that helps! :goatee:

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 3, 2008, 1:23am UTC](https://forum.kirupa.com/t/code-opinion-about-navigation/262023/10 "2008-06-03T01:23:58Z")

</div>

plus you can trick yer ul’s out like how i do
