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..
i would like it so that when i add more buttons, they automatically size themselves and i dont have to resize each individual one.
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);
backgrou开发者_StackOverflow社区nd-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
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.
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.
<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>';
}
加载中,请稍侯......
精彩评论