28172 sujets

CSS et mise en forme, CSS3

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

Pages :
(reprise du message précédent)

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. Smiley cligne
Modifié par wooebmaster (20 May 2010 - 12:29)
e-rwan a écrit :
salut

est-ce que c'est ce que tu cherche à faire?
ici
avec deux images en float.


Ouais, c'est nickel. C'est ca.

J'ai repris ton code pour mon exemple, ca fonctionne très bien...

Sauf...sous Chrome, j'ai un espacement à droite (sur ton exemple aussi)

Je vais fouiller coté margin ou autre...
en effet, c'est étrange cet espacement, on le retrouve avec operas des deux cotes.
cette méthode etait inspiré de ce tuto

en changeant overflow:hidden; en overflow:visible; ça fonctionne, voir mon exemple.

en revanche je crois qu'il faut rajouter une condition pour IE(je n'ai pas IE donc pas testé)
Modifié par e-rwan (20 May 2010 - 15:14)
Merci c'est nickel même sous IE.

PS : je ne sais pas comment un tague le ticket en [Resolu]
Modifié par alexadvance (20 May 2010 - 15:16)
tu as un bouton éditer en haut à droite de ton post d'origine, tu peus changer le titre.
bonne chance pour la suite

PS: le bug je crois que c'est avec IE6 et inferieur ^^'
Modifié par e-rwan (20 May 2010 - 15:19)
Une règle: éviter a tout prix les bidouilles, seulement en dernier recours.

Dans ce cas le plus simple serait d'utiliser la propriété radius pour arrondir ton menu, avec un image de fond.

Sinon il vaut mieux imbriqué des divs que rajouter des div flottantes juste pour la déco:
<div class="main-menu">
   <div class="main-menu-left">
      <ul class="main-menu-right">
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
      </ul>
   </div>
</div>

Modifié par matmat (20 May 2010 - 22:35)
matmat a écrit :
Une règle: éviter a tout prix les bidouilles, seulement en dernier recours.

Dans ce cas le plus simple serait d'utiliser la propriété radius pour arrondir ton menu, avec un image de fond.

Sinon il vaut mieux imbriqué des divs que rajouter des div flottantes juste pour la déco:
<div class="main-menu">
   <div class="main-menu-left">
      <ul class="main-menu-right">
         <li><a href="#">item</a></li>
         <li><a href="#">item</a></li>
      </ul>
   </div>
</div>


Pas de border-radius, car mon arrondi doit aussi apparaitre sous IE.
Toutes les solutions par <div> imbriquées posaient des problèmes pour s'assurer de remplir correctement l'espace disponible (soit on écraser les div contenant les arrondis, soit on remplissait pas, soit ca passait à la ligne...)

La solution de e-rwan d'utiliser des <img> incompréhensibles fut la meilleure.

Maintenant, je ne doute pas qu'il existe d'autres solutions. N'hésite pas à nous poster un exemple concret.
re
en effet en lisant les articles de raphael on s'aperçoit que les float sont détournés de leur usage originel au même titre que l'était les tableaux avant.
cependant, j'ai refait le code de l'éxemple donné précédemment avec un positionnement absolu pour les images et des margin, et je me demande lequel de cet exemple ou de celui avec les float fait le plus bricolage.

en fait alexadvance si je ne me trompe, une div rempli toute la largeur lorsque celle-ci n'est pas spécifié ou que la div n'est pas positionné. donc apres tu dois pouvoir positionner tes images comme tu veus je pense, avec ou sans les float.
Modifié par e-rwan (21 May 2010 - 14:27)
e-rwan a écrit :

en fait alexadvance si je ne me trompe, une div rempli toute la largeur lorsque celle-ci n'est pas spécifié ou que la div n'est pas positionné. donc apres tu dois pouvoir positionner tes images comme tu veus je pense, avec ou sans les float.


Oui, mais le soucis c'était de rempli tout l'espace, sans écraser les coins ou passer à la ligne.

En fait, ta solution, d'avoir <img><div du milieu><img>, puis d'ajouter les entrées du menu dans la <div du milieu> était la bonne. Car, moi j'essayais de tout mettre au même niveau, comme je l'aurai fait avec un tableau....
Pages :
Sujet clos
Aller à