[Résolu] Menu : Remplir l'espace libre

Bonjour,

Je souhaite réaliser une barre de menu à l'aide de <div> en float:left.

Pour donner quelque chose comme ça :

| [Debut][Menu1][Menu2][Menu3][Remplir l'espace vide][Fin] |

Je dois mettre une <div> [Début] qui contient un motif de début de barre.
Je dois mettre une <div> [Fin] qui contient un motif de fin de barre.
J'ai de 1 à N [Menu x].
Et enfin, j'ai une div [Remplir ... ] qui va me permettre d'occuper toute la largeur de ma page (ou plutôt de ma <div> englobant tout le menu )

Malheureusement, je n'arrive à faire cela.
Mes <div> [Début] et [Fin] ont une taille fixe.
Mes <div> [Menu X] ont juste un min-width et un max-width...

Quand à ma <div> [Remplir ...] j'ai essayé width:100%, mais évidement, ça ne marche pas...

Comment faire ?

PS : Je n'ai pas de problème pour l'affichage mes <div> s'alignent bien, c'est juste un problème de largeur de l'ensemble pour occuper tout l'espace.
Modifié par alexadvance (20 May 2010 - 15:38)

Salut,

Et si tu mets une image de fond répétée en X dans un conteneur englobant tout ça, ca ne fonctionne pas ?

La problème c'est que je dois placer mon image [FIN] tout au bout de la barre... Si ma barre n'a pas la bonne taille... le [FIN] se retrouve quelque part au milieu..

En gros, c'est comme si je faisais un <table> avec des colonnes de taille fixe, et une colonne de taille variable... Si je dis à ma table de prendre 100% de la largeur, c'est ma colonne variable qui va bouger...

Sauf que là, j'utilise des <div>

Pourquoi ne pas tout simplement faire une image de fond comportant aussi la partie FIN, positionnée en background à droite de ton conteneur global, du coup sans répétition ?
Ainsi quelle que soit la largeur, ton FIN serait toujours aligné à droite.

Ton image doit être bien sur suffisamment large pour la résolution maximale.
Modifié par Mikachu (20 May 2010 - 11:02)

En gros un background à droite qui coulisse sous mon menu ?
Mais si il fini par coulisser sous mon [DEBUT] (qui contient de la transparence), je vais le voir....

En gros je pense que je vais devoir faire

[DEBUT float left][Remplir repeat X][FIN float right]

et par dessus mes [Menu X].

C'est pas très pratique...

PS : Sinon, je fais un <table>

Ca serait peut être plus simple de causer de choses concrêtes, car je sais pas à quoi doit ressembler ton menu, tu n'aurais pas une image pour nous montrer ? Ca aiderait à trouver la solution adéquate plus facilement.

Au fait bonjour (j'ai oublié, alors j'édite ),

C'est une solution mikachu mais dans ce cas il faut que ton image face toute la largeur de ton block.

Sinon comme suggéré au dessus tu fais :

<div id="menu">
  <div id="debut"> </div>
  <a>Lien 1</a>
  <a>Lien 2</a>
  ...
  <div id="fin"> </div>
</div>

Et pour ton css :

#menu {
position : relative;
padding-left : ??px; // la taille de ton imd_debut 
background : url(img_fong.png) repeat-x left top;
}
#debut {
position : absolute;
left : 0;
background : url(img_debut.png) no-repeat left top; // pas de transparence pour quelle recouvre img_fong.png
}
#fin {
position : absolute;
right : 0;
background : url(img_fin.png) no-repeat left top; // idem
}

Voili voilou, j'espère que cela t'aidera car c'est mon premier post chez alsa donc autant qu'il soit utile
Modifié par wooebmaster (20 May 2010 - 11:42)

Le problème, c'est que mes images début et fin sont là pour arrondir mes angles, donc, j'ai plutôt besoin de la transparence (sachant que ce qu'il y a dessous n'est pas uni) ....
Modifié par Mikachu (20 May 2010 - 11:52)

Ma solution n'ajoute pas du code html supplémentaire à des seules fins de présentation. Et qui plus est n'ajoute aucune balise vide dans le code html !

De plus, en testant la solution de wooebmaster , mes div [DEBUT] et [FIN] crée un saut de ligne...puisqu'elle ne sont pas float....

Bref, je galère.. je pensais simplement qu'il existait un tag CSS qui disait :
width : le maximum disponible sur la même ligne...


Peut être avec des display :table-cell, mais j'y comprends rien...

Bon avec table-cell, j'arrive presque à quelque chose.. mais... il y a toujours un mais... ca ne ressemble à rien sous IE. Et malheureusement, j'ai pour contrainte de devoir faire marcher mon site sur tous les navigateurs...


Bon, ben, rebonjour les <table>

ah oui excuse ce sont des block.

donc la solution est de les rendre "inline" comme ceci :

display : inline-block;

Avant de te décider pour un tableau (à mon sens inutile), pourrais tu nous fournir une image de ce que tu veux faire, car j'ai peut être une idée mais je dois voir si c'est réalisable dans ton cas.

Alors, voici la théorie :

Une barre au rebord arrondi dans le lequel se trouve un nombre indéterminé de lien.


Ceci est faite avec Chrome, avec une simple simple, un fond et un border-radius, ensuite avec Photoshop, j'ai rajouté Menu 1 , Menu 2 , ...

Sous IE, border-radius ne fonctionnant pas, j'ai essayé de gérer les arrondis avec jQuery

Toujours avec Photoshop, j'ai rajouté Menu 1 , Menu 2 , ...

Mais les border-radius en JQuery ne sont pas géniaux... et d'autre contraintes vont m'obliger à les abandonner...
Du coup, j'ai simplement penser à un truc du style :


Et c'est pour ca que je solicite votre aide.

Au final, mon infographiste voudrait que ca ressemble à ca :

Modifié par alexadvance (20 May 2010 - 12:15)

Je reviens donc sur ma solution :

a écrit :
Pourquoi ne pas tout simplement faire une image de fond comportant aussi la partie FIN, positionnée en background à droite de ton conteneur global, du coup sans répétition ?
Ainsi quelle que soit la largeur, ton FIN serait toujours aligné à droite.

Ton image doit être bien sur suffisamment large pour la résolution maximale.

Et ton image de fond, tu la fait de la longueur du conteneur écourtée à gauche de la largeur de l'arrondi de gauche.

Mikachu a écrit :
Je reviens donc sur ma solution :
Pourquoi ne pas tout simplement faire une image de fond comportant aussi la partie FIN, positionnée en background à droite de ton conteneur global, du coup sans répétition ?
Ainsi quelle que soit la largeur, ton FIN serait toujours aligné à droite.

Ton image doit être bien sur suffisamment large pour la résolution maximale.

Et ton image de fond, tu la fait de la longueur du conteneur écourtée à gauche de la largeur de l'arrondi de gauche.

Mon conteneur global n'a pas un largeur fixe.

Alors sinon tu fais deux conteneurs positionnés côte à cote, un avec le coin arrondi gauche, et l'autre avec tous les liens avec cette fameuse image alignée à droite !
Modifié par Mikachu (20 May 2010 - 12:20)

Mikachu a écrit :
Alors sinon tu fais deux conteneurs positionnés côte à cote, un avec le coin arrondi gauche, et l'autre avec tous les liens avec cette fameuse image alignée à droite !

Ouais, je vais essayer ca.. et avec un min-width et un max-width sur mon conteneur global, pour donner une impression suffisante de redimensionnement mais m'assurer que mon image ne sera jamais trop grande (passe dessous le début) ou trop petite (on voir du blanc)

Mikachu a écrit :
Alors sinon tu fais deux conteneurs positionnés côte à cote, un avec le coin arrondi gauche, et l'autre avec tous les liens avec cette fameuse image alignée à droite !

Oui comme ceci :

<div id='menu'>
  <a>lien 1</a>
  ...
</div>
<div id='blank'>
</div>

#menu {
float : left;
background : url(img_left.png) no-repeat left top;
}
#blank {
float : right;
background : url(img_right.png) no-repeat right top;
}

En Faisant les images assez grandes pour couvrir toutes les resolutions.
Modifié par wooebmaster (20 May 2010 - 12:29)