[Résolu] Menu horizontal et pleine largeur.

Bonjour !

J'ai un code HTML comme celui-ci.

         <ul>
            <li><a href="#">Dvd</a></li>
            <li><a href="#">Clip</a></li>
            <li><a href="#">Acteurs</a></li>
            <li><a href="#">Citations</a></li>
            <li><a href="#">Tous savoir</a></li>
            <li><a href="#">Vous abonner</a></li>
        </ul>

Peu importe le moyen de rendre le menu horizontal ( float:left, display:inline ) le problème est le suivant. J'aimerais que mes 6 <li> prenne 100% de son conteneur ( soit le <ul> ). La solution paraît simple de mettre le CSS suivant :

ul li { width:16%; }

Par contre, j'ai des items plus long ( en texte ) que d'autres qui ne peuvent pas recevoir tous la même largeur.

Alors oui, on pourrait ajouter un id sur chacun des items du menu et mettre une largeur fixe sur chaque mais je préfèrerais éviter cette méthode si d'autres alternatives s'offrent à moi. J'aimerais mieux que ce soit fluide et que les <li> se répartissent proportionnellement dans toute la largeur possible.

Merci de votre aide
Modifié par Sorano (26 Feb 2010 - 15:29)

salut!
Peut-être en utilisant un min-width plutôt que juste width?

bonjour,

le comportement que tu veut est celui d'un tableau :

donc un vrai tableau , comme ça ça pâsse partout .

Ou par exemple: ul en display:table; et li en display:table-cell; mais la ça ne passe pas partout (ex: IE6/7 ).



En bref seul le tableau te permet de styler de façon stable et en peu de temps ton menu .

GC

Bonjour,

Pour éviter de détourner des éléments de leur utilisation, il y a aussi moyen de donner des marges auto aux éléments (sauf marge gauche pour le premier et marge droite pour le dernier).

Aurais-tu un exemple fonctionnel Laurie-Anne puisque les quelques essais que j'ai fait les marges n'avaient aucun effet sur les <li>.

Il faut passer les <li> en display:block; (pour que les <li> soient en ligne, on utilisera donc le positionnement flottant) puis leur donner margin:0 auto;

Normalement ça passe.

Salut,

Laurie-Anne a écrit :
Il faut passer les <li> en display:block; (pour que les <li> soient en ligne, on utilisera donc le positionnement flottant) puis leur donner margin:0 auto;

Euh... pardon ?

Le margin:auto ne fonctionne que lorsqu'on fixe une largeur (et ici on ne peut pas) et de toute façon ça ne peut pas marcher avec des flottants.

gc-nomade a écrit :
Ou par exemple: ul en display:table; et li en display:table-cell;

+1

Heyoan a écrit :
Le margin:auto ne fonctionne que lorsqu'on fixe une largeur (et ici on ne peut pas) et de toute façon ça ne peut pas marcher avec des flottants.

Je vais retourner me coucher moi ^^;

C'est bon, ça fonctionne avec le display:table.

Merci