Menu ul li horizontal display block avec élément à largeur variable

Bonjour à tous!

Je construit actuellement un site dont le menu de navigation fait la largeur de la page.
Mon intention est d'avoir un certain nombre de liens sur la gauche, suivis d'un espace variable avec un design identique à ces liens, mais sans texte de libellé, et un ou plusieurs liens sur la droite, toujours avec le même design.
L'idée est de pouvoir avoir les liens de gauche collés à gauche et ceux de droite collés à droite afin de pouvoir avoir un design fluide, qui s'adapte à la largeur de la fenêtre.
Ca permettrait également de rajouter ou ôter un élément du menu sans toucher à la css (CMS oblige, pour simplifier).
Peut être que seul javascript ou PHP peuvent rendre ce menu possible?


Voici une image représentative de ce que je veux:
problème:


design desiré:


J'ai regardé un peu partout sur alsa, mais je n'ai pas trouvé ce que je cherchait pour le faire…

Pour info, le code que j'utilise est le suivant:

Partie HTML:

<div id="navigation">
	<ul>
		<li>Café</li>
		<li>Restaurant</li>
		<li>Bar</li>
		<li class="spacer">&nbsp;</li>
		<li>Plus</li>
		<li>Sauna</li>
	</ul>
</div>

Partie CSS:

#navigation ul {
    padding: 0px;
    list-style-type: none;
}
#navigation > ul > li {
    margin-right: 3px;
    float: left;
    font-size: 1.25em;
    font-weight: bold;
    border-top-color: #333333;
    border-top-width: 15px;
    border-top-style: solid;
    padding-top: 2px;
    height: 18px;
    padding-left: 1px;
    background-color: #ffcc00;
    width: 9%;
    display: block;
}
#navigation > ul > li.spacer {
    width: 760px;
    background-color: white;
}

Je remercie sincérement quiconque essaierait de résoudre ce dilemme avec moi!

Merci!
Modifié par oxmox (04 Jul 2009 - 21:32)

Bonjour,

Tu pourrais essayer sans le "spacer", avec les menus de gauche en float left et ceux de droite en float right.

loicbcn a écrit :
Tu pourrais essayer sans le "spacer", avec les menus de gauche en float left et ceux de droite en float right.

Merci pour la réponse rapide!

C'est effectivement un bon début:

Cela me donne:


Mais comment demander à l'élément blanc de remplir le reste de l'espace libre?

Partie HTML:

<div id="navigation">
	<ul>
		<li>Café</li>
		<li>Restaurant</li>
		<li>Bar</li>
		<li class="spacer">&nbsp;</li><!-- la il n'y a rien de spécifique -->
		<li class="right">Plus</li>
		<li class="right">Sauna</li>
	</ul>
</div>

Partie CSS:

#navigation ul {
	margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#navigation > ul > li {
    margin-right: 4px;
    float: left;
    font-size: 1.25em;
    font-weight: bold;
    border-top-color: #333333;
    border-top-width: 15px;
    border-top-style: solid;
    padding-top: 2px;
    height: 18px;
    padding-left: 1px;
    background-color: #ffcc00;
    width: 125px;
    display: block;
}
#navigation > ul > li.spacer {
    display: inline;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 2px;
    margin: 0px;
    background-color: white;
}
#navigation >ul >li.right {
    padding-left: 1px;
    margin-left: 4px;
    float: right;
    margin-right: 0px;
}

Modifié par oxmox (02 Jul 2009 - 14:17)

Mets un background blanc (couleur ou image en repeat-x) à ton ul, avec aussi un overflow pour qu'il englobe les <li> flottants.

Allez Mouscron.

loicbcn a écrit :
Mets un background blanc (couleur ou image en repeat-x) à ton ul, avec aussi un overflow pour qu'il englobe les <li> flottants.

Allez Mouscron.

OK j'ai fait ça; j'ai aussi rendu ma css un peu plus cohérente avec les classes, maintenant, je pense qu'il faut quand même une classe pour le "spacer", non?

Resultat :

http://clients.r3mix.ch/national/tests/
Modifié par oxmox (02 Jul 2009 - 16:41)

Non, le spacer n'est pas nécessaire.

Donne un image de fond à l' <ul>
une image de 1px de largeur, blanche en bas et gris foncé en haut avec un repeat-x pour qu'elle donne l'impression de prolonger tes <li>.

Ah, je vois!

Et ensuite je devrais mettre des bords blancs ou de couleur du fond aux éléments en float pour simuler le margin, c'est ça?

C'est la même technique que pour les colonnes qui doivent être de la même longueur! Chouette… bon j'avait pensé à ça et ce qui m'embêtait, c'était que l'image de fond (celle qui apparaît entre les éléments, visible grâce aux marges) n'est plus visible.

Je suis en train de faire ta suggestion et je reviens!
Modifié par oxmox (02 Jul 2009 - 17:27)

Pardon, j'avais pas vu le jaune entre tes menus.
Pour solutionner ça, tu porrais donner à tes <li> le même background qu'à l'<ul> mais avec un jaune foncé en bas, quitter le border-top gris et donner à tes <li> de gauche un border-right jaune et à ceux de droite un border-left.

J'ai effectué les modifs comme sur sur ton avant dernière suggestion.

Il y a des bizarreries dans les menus que je n'ai pas encore analysées, mais je n'avais jamais vu cette dent de scie!

Pour le fond, je vais voir ce qui est possible. Normalement le fond final sera une image photographique, mais ça sera un fond de papier, donc peut être que la texture du papier des menus s'intégrera naturellement à la texture papier du fond de la page…

Merci en tout cas pour l'aide!

Je vais faire les modifs avec le fond papier pour avoir un résultat proche de la finalité.
Modifié par oxmox (02 Jul 2009 - 17:58)

Si jamais, le design plus ou moins final du layout de base sera comme ça:
(là, c'est avec un titre sur la home page)

Pour la denière solution, concernant les fonds des marges censés être identique que le fond de la page, peut être faudrait-il simplement faire une image de background de la largeur exacte d'un élément du menu qui soit le fond du menu, du genre:
[[image de fond du menu][marge image de fond de la page]]

L'image serait comme ça pour les éléments à gauche:


Est-ce assez clean comme façon de faire?

J'ai parfois l'impression qu'avec css, on refait ce qu'on faisait dans les années 90. Des choses pas très jolies…
Modifié par oxmox (02 Jul 2009 - 18:41)

C'est ça l'avintage

J'ai mis à jour le dernier test de layout, qui semble être assez fonctionnel!

Merci pour l'aide sur ce problème de menu!

http://clients.r3mix.ch/national/tests/

Modifié par oxmox (06 Jul 2009 - 12:38)

Considères-tu donc le problème comme étant [résolu] ?