[Résolu] Menu background justifié

Bonjours à tous !!!
Un truc qui me rends dingue...

Dans un menu vertical, est-il possible d'attribuer à une image background une largeur égale pour tout les items...

Exemple pour le menu :
Accueil
Paye
Facturation

Je voudrait que toutes les images background soient "justifiées" et alignées à droite sur la largeur du plus long item (ici sur facturation)

Exemple de ce que je voudrais obtenir sur un site que j'ai fait pas en CSS :
mrplafare.org
Ici, le menu est justifié...

Donc... Est-ce possible, et avec quel instruction ?

Merci ++ à tous les contributeurs de ce forum !!!
Modifié par Mokmok (29 Nov 2007 - 18:28)

Heu ... je n'ai pas très bien compris : tu souhaites simplement que ton image soit affichée à droite ? Dans ce cas il faut utiliser la propriété *background-position*.
Modifié par Gaylord.P (29 Nov 2007 - 17:26)

Salut Gaylord.P
En fait, je voudrais que mon background ne varie pas de largeur selon la taille de l'item.

Exemple :
- Lien court
- Lien longgggggggggggg

Je voudrais que l'image de fond sous "Lien court" soit de la même largeur que celle de "Lien longgggggggggggg"

Ba surement un no-repeat sur ton background je pense

Pour m'exprimer plus clairement voir l'exemple :
http://www.cybelius.net/service/meniou.gif

Merci... Désolé, le n'ai pas été très claire

Bonjour,

Pour le fichier html :

<ul id="menu">
		<li><a href="javascript:void(0)">Accueil</a></li>
		<li><a href="javascript:void(0)">Paye</a></li>
		<li><a href="javascript:void(0)">Facturation</a></li>
		<li><a href="javascript:void(0)">Contact</a></li>
	</ul>

Pour le fichier css :

#menu {
			float:left;
			width:100px;
			list-style-type:none
		}
		#menu li {
			float:left;
			width:100%;
			margin:0 0 3px 0
		}
		#menu li a {
			display:block;
			float:left;
			width:90px;
			color:#000;
			background:#ccc;
			text-decoration:none;
			padding:1px 5px
		}
		#menu li a:hover {
			color:#fff;
			background:#666
		}

A toi d'adapter couleurs, typos, tailles etc...

Heum...

Pourquoi est-ce que tu utilises autant de flottant ?
Cela me semble bien inutile !
Tes éléments de liste et tes liens se comportent tout aussi bien sans.

Mecho !!! trop fort !!!

C'est exactement ce que je voulais :o)
Il me reste plus qu'a aller voir ce que veut dire ce : javascript:void(0)

MERCI

Cygnus a écrit :

Heum...

Pourquoi est-ce que tu utilises autant de flottant ?
Cela me semble bien inutile !
Tes éléments de liste et tes liens se comportent tout aussi bien sans.

Je vais vérifier :o)

Autant pour moi ...
Nouveau fichier css

#menu {
			width:100px;
			list-style-type:none
		}
		#menu li {margin:0 0 3px 0}
		#menu li a {
			display:block;
			width:90px;
			color:#000;
			background:#ccc;
			text-decoration:none;
			padding:1px 5px
		}
		#menu li a:hover {
			color:#fff;
			background:#666
		}

Petite question : à part le fait d'alourdir la feuille de style, l'abus dans l'utilisation des flottants est-elle nuisible ?

Mecho...
Excuse-moi.... C'est un peu hors sujet, mais je ne trouve pas ce qu'est que ton "javascript:void(0)"...
Si tu as 5 mn...
Sinon c'est pas grave.

Merci ++ de toute façon :o)

Bonsoir Mokmok,

Mets l'adresse html comme tu le fais usuellement

<li><a href="http://forum.alsacreations.com/forum.php">Accueil</a></li>

Là, moi y'en a comprendre
Merci à tous

mecho a écrit :
Petite question : à part le fait d'alourdir la feuille de style, l'abus dans l'utilisation des flottants est-elle nuisible ?

Heum...
Disons que cela peut-être source d'erreur de rendu.

C'est un peu comme une recette de cuisine : tu peux toujours rajouter des trucs, (ça peut même être super bon ).
Mais tu as toujours le risque que le mélange soit <del>inbouffable</del> <ins>vraiment inmangeable</ins>.
Modifié par Cygnus (30 Nov 2007 - 11:33)

mecho a écrit :

Petite question : à part le fait d'alourdir la feuille de style, l'abus dans l'utilisation des flottants est-elle nuisible ?

S'il y a une chose à toujours garder en tête, c'est de ne sortir les éléments du flux que lorsqu'on y est vraiment contraint.
Deuxième chose à toujours garder à l'esprit: utiliser tant que faire se peut les outils à bon escient, s'en servir avant tout pour le rôle auquel ils ont été destinés. Les flottants en sont un très bel exemple: ils servent à créer des habillages (typiquement: un texte qui s'enroule autour d'un graphique). Autrement dit, créer une mise en page à l'aide de flottants, c'est détourner la propriété float de son rôle.
En pratique, cette forme de "hack" est totalement inoffensive et bien utile dans certains cas, mais il faut garder en tête que ce n'est pas le rôle de float de positionner les éléments… mais bien celui de position!
En résumé, on essayera de systématiquement:
• garder l'élément dans le flux
• utiliser les positions pour positionner nos éléments hors du flux
• recourir à l'utilisation de flottants si et seulement si l'utilisation de positions est impossible (typiquement: un contenu qui suit 2 colonnes côtes à côtes dont on ne peut prédire celle qui sera la plus haute)


edit: Plus j'en vois, plus je me dis qu'il y a vraiment quelque chose à faire au niveau de l'instruction sur le web à propos de css-p. Il faudrait que j'écrive quelque chose à ce propos à l'occasion…
Modifié par Benjamin D.C. (30 Nov 2007 - 12:57)