ansaurus

Question

Is there a way to create a full width horizontal navigation without using a table?

Answer 1

+2 A:

Personally, I see nothing wrong with using tables for this. I feel that all the people who look down on us table users are soft in the head.

However, you could do it in CSS with a bunch of DIVs floating next to one another, each of which has a width of a fixed %age of the overall width.

Carl Smotricz 2009-11-14 17:04:48

Tables are meant for tabular data. There's no reason to use a table for this, other than ignorance..

codeinthehole 2009-11-14 17:10:52

Until CSS is fixed to provide reasonable solutions to problems that are solved very simply and conveniently with tables, I'll keep using tables. Get back to me when you figure out a way to position an element flush at the bottom of the unscrolled physical screen without using tables.

Carl Smotricz 2009-11-14 17:19:59

Actually, the reason I need this flexibility is that the client can update the number of navigation buttons and the text of those buttons through the cms. In that case, the navigation will be broken until the css is 'fixed'. I need a solution that will automatically resize the widths of each button.

Ken Earley 2009-11-14 17:23:53

I'm sure codeinthehole will offer up an elegant solution.

Carl Smotricz 2009-11-14 17:28:19

I have to back Carl up on this. The quest for the "holy grail" of zero-table web sites is a misbegotten one. Tables were improperly used when they were used as THE mechanism of layout. Somehow, that morphed into the whole "tables are evil period" matra that we have today. There are still cases where a table is the perfect solution to a problem, and tabular data is not the only case. Save yourself, and your employer, some time, effort, and money and just use a table. It does exactly what you need without convolution.

jrista 2009-11-14 17:37:49

If you use a table - you're stuck with a single layout possibility .. you loose flexibility. E.g. in this case, if you need to redisplay the navigation in a different form to a horizontal layout, you probably won't be able to. I understand resistance to CSS and people's desire to resist 'css nazi-ism' (for want of a better term) - but the 'holy gail' comparison isn't useful.. while proponents of the 'tables aren't that bad movement' are trying to display pragmatism - they're actually expressing a very resistant and dogmatic point of view imo.

codeinthehole 2009-11-14 17:52:05

But... but... what's the use of this "flexibility" you tout, if it doesn't provide an acceptable solution to the posed problem? The CSS layout crowd's response is: If you can't do that layout with CSS then you have to change your layout! Doesn't this seem a little silly even to you?

Carl Smotricz 2009-11-14 17:53:06

Ken Earley 2009-11-14 18:05:16

Sometimes it's worth asking whether criteria is based on a whim, or whether it's an essential part of the required solution. I can't help thinking that you're trying to prove a point ;) The markup in your listed example resembles tag soup. Show your example to any frontend UI developer and you'll probably get a similar response, but good luck to you in any case.

codeinthehole 2009-11-14 18:13:54

Please explain why you think my example resembles tag soup. **I am a frontend UI developer!**

Ken Earley 2009-11-14 18:32:58

The criteria I offered was based on actual requirements for an actual website. I am not trying to prove any point. I was merely discussing design practices with the community here to see if anyone had a better solution to a very restrictive set of requirements.

Ken Earley 2009-11-14 18:36:14

@ken; hi again, sorry - I wasn't trying to be rude. The reason it seems like tag-soup is because (imo) so much of the mark-up involved in the display of the navigation is unnecessary and prevents future flexibility. I understand that the client might want to add to the top level navigation - but realistically, in most cases this is unlikely to be a regular occurrence. I think the problem is more to do with client education. There are benefits associated with using a pure CSS approach, and explaining to the client why the criteria might need altering might be the best option.

codeinthehole 2009-11-14 18:45:57

For example, by using one nested 'ul' for navigation - multiple platforms (eg. mobile) can be implemented with just a stylesheet change)

codeinthehole 2009-11-14 18:46:48

Again, I agree with you on both your comment about client education and your comment about the flexibility of a pure css approach. The fact of the matter is that I lost the battle on changing the design. That is why I used a table. But just in case, I posted my issue here to see if there was a pure css solution that *would comply with the requirements that were given*. I enjoy having a discussion about web standards and educating clients, but that isn't the question that I asked.

Ken Earley 2009-11-14 19:33:50

Fair enough, I do have a tendency to go on a bit once I get started ;)

codeinthehole 2009-11-14 19:48:21

Answer 2

+3 A:

Use a list element

<ul>
  <li><a href="...">entry 1</a></li>
  <li><a href="...">entry 2</a></li>

   ... etc

</ul>

Apply a 'float:left;' and a percentage-based width to the each of the 'li' elements. The width you choose will obviously depend on the number of entries you have. To ensure the elements clear properly apply an 'overflow: hidden' to the parent ('ul') element.

EDIT:

Maybe equal distribution of horizontal space actually isn't desirable in all cases?

If you have few elements, the visual effect is going to be very different to a full navigation bar.
There will be a point where you have to artificially limit the number of of element which can be added.

An extension to approach detailed above might be to right align the last 'li' element - which would provide you with a navigation bar of fixed with.

codeinthehole 2009-11-14 17:12:46

The problem with that solution is that if you change the text in the navigation, or add another button, you need to update your css. Since the table cells automatically resize, there is no need to edit the css.

Ken Earley 2009-11-14 17:20:52

It's all about compromise imho - you gain a lot of positives by using a list for navigation. There are many ways you can display a list (and nested lists); the technique provides you with a lot of flexibility. If I were you, I'd ask myself just how important it is to achieve the 'holy grail' of 'all navigation elements lining up equally' and compare this with the benefits of properly dividing presentation and content.

codeinthehole 2009-11-14 17:51:05

Agreed. I have discussed the limitations with decision makers of this design and they were willing to live with them. The table was what we went with to meet the requirements. I just thought I'd pose the question here to get more input for the next time I run into this sort of problem. Thanks for all the feedback. Great discussion!

Ken Earley 2009-11-14 18:11:11

Answer 3

+1 A:

Ken,

I'm not sure on your skill with creating web elements and css, but there are also lots of open source solutions which don't use tables (and some that do).

Here's a few examples: http://phoenity.com/newtedge/horizontal%5Fnav/ That is a great example that will show you both an "inline" version and a "block" version. The reason for the two is to make it more dynamic. An "inline" version would use a specified width while the "block" version is made to fill up the whole parent element.

http://veerle.duoh.com/blog/comments/2%5Flevel%5Fhorizontal%5Fnavigation%5Fin%5Fcss%5Fwith%5Fimages/ http://articles.techrepublic.com.com/5100-10878%5F11-5153115.html

An important part to note, if you are doing this for some form of company or something that will make money, is that you need to make sure that these are IE compatible (with 5.5-7) most of the good ones are, but some just refuse to put that compatibility in it. If you need help with that, I'm sure the community will help you out, I know I will.

David 2009-11-14 17:40:22

Ken Earley 2009-11-14 17:49:40

ansaurus

tags:

views:

answers:

Is there a way to create a full width horizontal navigation without using a table?

related questions