ansaurus

Question

css buttons: forcing them to size themselves automatically

Answer 1

A:

<ul id="menu" class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Buying Property</a></li>
    <li><a href="#">Selling Property</a></li>
    <li><a href="#">Community Info</a></li>
</ul>

CSS:

ul#menu {
    list-style-type: none;
}

ul#menu li {
    float: left;
    margin-right: 1em;
    display: block;
}

ul#menu li a {
    padding: .2em;
    background: #CCC;
    /* etc */
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

EDIT:

Since there is no pure-CSS solution, it would be better to iterate through the menu-items with PHP:

$pages = array('Page 1' => 'page1.php', 'Page 2' => 'page2.php');
$numPages = count($pages);
$width = ceil(99/$numPages); // 99% is the maximum width, 100% could cause some problems with the last menu item
foreach($pages as $title => $link){
    echo '<li style="width: ' . $width . '"><a href="' . $link . '">' . $title . '</a></li>';
}

Harmen 2010-01-29 20:20:08

Did you actually *understand* his question? :)

BalusC 2010-01-29 20:21:46

I think I did...

Harmen 2010-01-29 20:22:30

See point 2. of his question. The "buttons" must together accumulate up to a width of 100% of the parent element. In your example, give `ul` a fixed width or a `100%` width and try to get all `li` elements to fill up the space, regardless of the amount of `li` elements, *without* changing the CSS.

BalusC 2010-01-29 20:23:52

Answer 2

+3 A:

This is not possible with pure CSS (on a semantic and crossbrowser-compatible manner, thus leaving respectively <table> and display: table; outside). You'll have to bring some shot of JavaScript (jQuery?) in, which has however the caveat that this might lead to "wtf?" experiences as the enduser may see the items (or buttons as you call it) being resized on the fly while the page loads.

I would rather stick to altering the CSS on every add/remove of the item. Live with it.

BalusC 2010-01-29 20:22:49

With a javascript solution, your end user will also have a varying experience based on whether they have javascript enabled or not also.

NickLarsen 2010-01-29 20:45:30

Answer 3

+3 A:

Some people might complain, but a table will size them automatically for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

<html>
  <head>
    <title>Hi</title>
  </head>
  <body>
    <table style="width:100%;">
      <tr>
        <td><input type="button" value="Pick Me 1" style="width:100%;" /></td>
        <td><input type="button" value="Pick Me 2" style="width:100%;" /></td>
        <td><input type="button" value="Pick Me 3" style="width:100%;" /></td>
      </tr>
    </table>
  </body>
</html>

Just add a new table data element for each new button.

NickLarsen 2010-01-29 20:36:04

ansaurus

tags:

views:

answers:

css buttons: forcing them to size themselves automatically

related questions