i am trying to create navigation that has a fixed width and will automatically resize the contained elements based total content. in other words if the navigation is 100px wide and there are 4 items in it, then the width of each item should be 25px. if there are 5 items, 20px. etc, etc.

the only method i have found is a table since table cells will always fill the table equally. but this limits my styling options. and just rubs me the wrong way.

does anyone know if this can be done using something other than a table?

  • Sorry. Forgot one important detail: the number of items is dynamic! Jason D Birchler about 7 years ago

4 answers

0
points
This was chosen as the best answer

You could do it with javascript. Just use a List to create the navigation, then count the list-items and assign a correct width value to the items.

Assuming u are using php to create the list, it would be easier to get the count of elements your navigation has, and add the width as an inline style to the elements.

<li style="width:300px;"></li>

As far as I know, you can't do this with plain CSS.

Answered about 7 years ago by Sven Finke
  • not using php, but dynamically calculating the width on the server side was the right solution. thanks! Jason D Birchler about 7 years ago
1
point

Rather than calculating the actual width of list items on the server side, I would simply pass along the number of nav items as a CSS class. This offers the added flexibility of resizing--or completely restyling--in a stylesheet, without messing with the markup.

I've use something like this in the past:

<ul id="nav" class="n3">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

And some CSS to go with it:

#nav.n1 li { width: 100%;   }
#nav.n2 li { width: 50%;    }
#nav.n3 li { width: 33.3%;  }
#nav.n4 li { width: 25%;    }
#nav.n5 li { width: 20%;    }
#nav.n6 li { width: 16.6%;  }
#nav.n7 li { width: 14.28%; }
#nav.n8 li { width: 12.5%;  }

In pseudo-template-code, your solution might look something like this:

<ul id="nav" class="n{count($nav)}">
    {foreach $nav as $link}
        <li>{$link}</li>
    {/foreach}
</ul>
Answered about 7 years ago by Justin Hileman
  • this would be a great solution for any other element other than the main navigation. it doesn't quite sit well with me that those with JS turned off (small as that number may be) will have a totally broken nav. Jason D Birchler about 7 years ago
  • @Jason The jQuery/JS section was really an aside. You shouldn't add the "nX" class on the client side, nor should you need to. I'll move it into a comment so the original answer will make a bit more sense :) Justin Hileman about 7 years ago
  • If adding the count class ("nX") isn't possible on the server side, throw in a little jQuery to make it all magick: $("#nav").addClass("n" + $("#nav li").length); If you go this route, be sure to make it fall back to something usable, if not ideal. For example, add this to the css: #nav li { width: 12.5%; } (This was originally posted as part of my answer, removed for clarity) Justin Hileman about 7 years ago
1
point

Use can use jQuery to set the CSS style of your elements when they are written in dynamically.

Start here for a basic jQuery overview on attributes.

Answered about 7 years ago by Discorax
0
points

CSS offers display: table; (and table-cell etc), which could theoretically be applied to any element. However, IE6 and 7 don't support it so you'd need to find another way for them. The ever-dependable Quirksmode has more information.

Answered about 7 years ago by Olly Hodgson