Geek Answers Handbook

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

I have horizontal navigation with variable width buttons. I would like navigation to cover the entire width of the containing div. I was able to accomplish this if I placed the navigation in a table. You can check this example . The cells in the table will resize depending on the amount and width of the text inside them.

Can this be done without using a table?

Edit: To clarify, I need the width of the buttons to be flexible. The client can update the number of buttons and the text of these buttons at any time via cms. I need a solution that does not require an update for css.

+4
source share
3 answers

Use list item

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

Apply "float: left;" and the percentage width for each of the elements "li". The width you choose will obviously depend on the number of records you have. To ensure that elements are cleaned correctly, apply "overflow: hidden" to the parent ("ul") element.

EDIT:

Perhaps equal distribution of horizontal space in all cases is undesirable?

  • If you have several elements, the visual effect will be very different from the full Navigation Bar.
  • There will be a point where you need to artificially limit the number of the item that can be added.

An extension to the approach described in detail above may be to align the last “li” element, which will provide you with a fixed value navigation bar.

+3
source

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

However, you can do this in CSS with a series of DIV float next to each other, each of which has a fixed age width % total width.

+1
source

Ken

I'm not sure about your skills in creating web elements and css, but there are also many open source solutions that don't use tables (and some of them).

Here are some examples: http://phoenity.com/newtedge/horizontal_nav/ This is a great example that will show you both the "built-in" version and the "block" version. The reason for the two is to make it more dynamic. The embedded version will use the specified width until the block version is executed to fill the entire parent element.

http://veerle.duoh.com/blog/comments/2_level_horizontal_navigation_in_css_with_images/ https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5153115.html

It is important to note that if you are doing this for any company or something that will make money, you need to make sure that they are compatible with IE (from 5.5-7), most of the best, but some simply refuse to insert this compatibility. If you need help with this, I’m sure the community will help you, I know that I will.

+1
source

More articles:


All Articles