CODEWITHSUNDEEP
htmlcss
Alex Gordon
Alex Gordon

Reputation: 60691

css buttons: forcing them to size themselves automatically

i have these buttons on the top of the page:

HOME, BUYING PROPERTY, SELLING PROPERTY, COMMUNITY INFO ETC..

  1. i would like it so that when i add more buttons, they automatically size themselves and i dont have to resize each individual one.

  2. also i would like them to take up the entire top bar

here is the code

#cssmenu_moo_menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-attachment:scroll;
background-color:#006198;
background-image:url(../images/moomenu.png);
background-position:50% top;
background-repeat:repeat-x;
float:left;
height:35px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}

i am wondering if the following might be answering my question?

CSS Horizontal Navigation, Dynamic Width Buttons, 100% Width, Img Backgrounds

Upvotes: 3

Views: 1837

Answers (3)

BalusC
BalusC

Reputation: 1108537

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.

Upvotes: 3

Harmen
Harmen

Reputation: 22438

<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>';
}

Upvotes: 0

Nick Larsen
Nick Larsen

Reputation: 18877

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">

<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.

Upvotes: 4

Related Questions