boutons css: les forçant à la taille se automatiquement

j'ai ces boutons sur le haut de la page:boutons css: les forçant à la taille se automatiquement

HOME, Achat d'une propriété, HABITATION VENDRE, COMMUNAUTÉ INFO ETC ..

je voudrais de sorte que lorsque j'ajoute plus de boutons, ils se taille automatiquement et je ne dois pas redimensionner chaque individu.
aussi je les aime prendre la barre supérieure entière

ici est le 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; 
}

Je me demande si les éléments suivants pourraient être répondre à ma question?

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

Source

2010-01-29 l--' ' ' ' ' ' ---------' ' ' ' ' ' ' ' ' ' ' '

Pourriez-vous donner un exemple du code que vous avez déjà écrit? – Cerin

Faites juste une classe pour les boutons dans la barre et ajoutez cette classe aux nouveaux boutons quand vous les faites. – ryanulit

Certaines personnes peuvent se plaindre, mais une table les dimensionnera automatiquement pour vous.

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

Ajoutez simplement un nouvel élément de données de table pour chaque nouveau bouton.

Source

2010-01-29 20:36:04

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

Comme il n'y a pas de solution pure CSS, il serait préférable de parcourir les éléments de menu avec 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>'; 
}

Source

2010-01-29 20:20:08 Harmen

Avez-vous réellement * compris * sa question? :) – BalusC

Je pense que je l'ai fait ... – Harmen

Voir le point 2. de sa question. Les "boutons" doivent ensemble s'accumuler jusqu'à une largeur de 100% de l'élément parent. Dans votre exemple, donnez 'ul' une largeur fixe ou' 100% 'et essayez d'obtenir tous les éléments' li' pour remplir l'espace, indépendamment de la quantité d'éléments 'li', * sans * changer le CSS. – BalusC

Ceci n'est pas possible avec du CSS pur (de manière sémantique et compatible avec les navigateurs, laissant ainsi respectivement <table> et display: table; à l'extérieur). Vous devrez apporter un peu de JavaScript (jQuery?), Qui a cependant l'avertissement que cela pourrait conduire à "wtf?" Les expériences en tant qu'utilisateur final peuvent voir les éléments (ou les boutons comme vous les appelez) étant redimensionnés à la volée pendant le chargement de la page.

Je préfère rester à modifier le CSS sur chaque ajout/suppression de l'élément. Vivre avec.

Source

2010-01-29 20:22:49 BalusC

Avec une solution javascript, votre utilisateur final aura également une expérience variable en fonction du javascript ou non. –

boutons css: les forçant à la taille se automatiquement

Répondre

Questions connexes