Menu avec cadre arrondi et transparent

Bonjour,
je voudrais faire un menu horizontal en css: des boutons avec un cadre arrondi et transparent.
J'arrive a faire soit l'un soit l'autre mais les 2 ensemble, ca ne fonctionne pas. Ja'i utilise le tuto d'alsacreations pour l'arrondi mais ca ne fonctionne pas. En fait ce menu se trouve sur un fond contenant une image et l'on peut voir les bords transparents des gifs qui forment les coins.
Pour la transparence, le texte a l'interieur est aussi transparent et pas du tout centre... Bref c'est la galere !!

Si l'on pouvait m'aider... A votre bon coeur!
Merci

Bonjour ricarao et bienvenue parmi nous !

Une page en ligne pour voir ton problème serait un plus.

J'etais enervee hier soir de pas reussir et j'ai tout efface pour refaire.
En fait je dois faire la version html de ce site
http://www.duffylondon.com/

Ca donne une idee de ce que je veux faire

Merci !

salut,

j'ai regardé ton lien et tu n'as apparamment pas réussi, je me trompe?

dommage, le problème que tu soulèves m'interressait...

je farfouille un peu partout et ne trouve pas de solution
la seule que j'ai trouvé consiste à utiliser rico, mais je trouve ca dommage, car en plus d'alourdir la taille de la page, j'aurais vraiment aimé que meme ceux n'ayant pas activé le javascript puissent voir ma page correctement...

si toutefois qq'un en savait plus aujourd'hui...

merci et à bientôt

to

ricarao a écrit :
En fait je dois faire la version html de ce site
http://www.duffylondon.com/

Salut ricarao,

heu, en fait, j'ai été voir, mais cette page est déjà en html
C'est même du HTML 4.01 Transitional mis en forme avec des tableaux
Enfin bon, donc, voilà, cette page n'est pas en flash, ni rien d'autre à part ce que je viens de dire plus haut.

à+
Touvert

Faire de la transparence sur le web, c'est pas facile. Le probléme c'est que IE rend le png opaque! il faut donc utilisé un filtre, bien sur ceci n'est valable que dans le cas ou tes cadres doivent être flexibles, c'est à dire si tu ne sais pas la hauteur qu'ils vont avoir, sinon il vaut mieux faire comme tu as fait actuellement c'est à dire mettre une image comme si c'était transparent. Si tu decides de le faire réellement transparent voici le filtre pour IE:

/* A mettre dans une feuille de style avec un commantaire conditionnel pour IE6 et moins */
.text_back { 
background-image:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

ça parait étrange mais ça marche trés bien.

Sinon j'aime bien ton design, par contre tu devrais te mettre au css, tu as tout a y gagner.
Modifié par matmat (12 Dec 2006 - 18:24)

et sinon, au niveau des cadres arrondis avec transparence, hmm?

Imaginons par exemple que le fond de la page soit un dégradé, comment faire pour superposer un cadre arrondi qui le laisse apparaitre au niveau des arrondis justement(cf ici)

Tous les tutos que j'ai pu trouver font l'impasse sur ce cas critique qui doit pourtant être assez courant...


Modifié par wouf (12 Dec 2006 - 21:29)

Dans ce cas il te faudras passer par la solution que te donnes Matmat juste au dessus...

D'autres solutions aussi dans ce post

Bon courage

en fait là tu cumule deux chose complexe, la transparence et les coins arrondis, généralement les coins arrondis tu les fais en creant des petites images dans chaque coins, par "soustraction" là c'est different, par contre pour ne pas compliquer les choses il vaut mieux faire des boites a largeurs fixes avec une image en haut un fond transparent au milieu et une image en bas. Sinon c'est possible avec la technique des portes coulissances avec la subitilité que dans ce cas il ne faut pas que ça se superpose...

non mais voilà, mon problème ce n'est pas ie et l'affichage des PNGs(le bug a d'ailleurs été corrigé dans la version 7), mais a proprement parlé: les cadres arrondis TRANSPARENTS.

J'utilise la techniques des 4<divs> imbriquées:

<div id="cadre_arrondi">
  <div class="br">
    <div class="bl">
      <div class="tr">
	<div class="tl">
	  je suis un cadre fluide arrondi<br />
	  sensé être à fond transparent
        </div>
      </div>
    </div>
  </div>
</div>

avec comme css correspondant:

.br {
  background:url(cadre-arrondi_br.png) no-repeat bottom right;
}
.bl {
  background:url(cadre-arrondi_bl.png.png) no-repeat bottom left;
}
.tr {
  background:url(cadre-arrondi_tr.png.png) no-repeat top right;
}
.tl {
  background:url(cadre-arrondi_tl.png) no-repeat top left;
  padding:10px; /*pour padder le contenu*/
}

Vous voyez donc bien que le fond de mes bords arrondis est transparent, escomptant de la sorte produire un cadre arrondi indépendant du fond de la page, mais...cela ne marche pas en fait, et très logiquement(c'est le plus énervant ), la transparence des bords arrondis laisse apercevoir le fond des divs arrières...

-> C'est par rapport à ce dernier point que je sollicite votre aide car j'aime cette méthode de création de cadres arrondis, très puriste et elle serait pour moi parfaite si elle permettait de surcroit d'afficher des cadres arrondis dans n'importe quel contexte d'arrière plan...

merci et à bientôt

to
Modifié par wouf (13 Dec 2006 - 20:59)

Il faut que tu change de structure html pour faire ça, un exemple parmis d'autre:

<style>
.box{margin:20px;width:40%}
.tl {background: url(trans/tl.png) no-repeat top left;height:20px;padding-left:20px}
.tr {background: url(trans/tr.png) no-repeat top right;height:20px;}
.bl {background: url(trans/bl.png) no-repeat bottom left;height:20px;padding-left:20px}
.br{background: url(trans/br.png) no-repeat bottom right;height:20px;}
.content{background-image: url(trans/in.png);padding:5px 25px}
</style>

<div class="box">
<div class="tl"><div class="tr"></div></div>

<div class="content">
je suis un cadre fluide arrondi transparent
</div>

<div class="bl"><div class="br"></div></div>
</div>

ce qui donne:
http://www.smart-com.com.mx/spip.php?page=rounded8&id_article=45

Ce qui est par contre une catastrophe sous IE6 qu'utilise encore plus de 60% des personnes...
Modifié par matmat (12 Dec 2006 - 23:22)

hey matmat,

et merci pour cette solution et l'exemple qui vient avec , cela marche d'enfer et va sans doute faire plaisir à ricarao qui, si je ne m'abuse, cherchait exactement cela...ricarao, si tu nous regardes...

Cependant, cette solution rejoint celle du tuto d'alsacreation dans sa structure xhtml, qui par rapport à la méthode des 4<div> imbriquées, ne permet pas de faire chevaucher le 'content' sur les bords(haut et bas) de la 'box':

- avec chevauchement:
http://82.229.245.231/arrondi/trans/ideal_layout.png

- sans chevauchement:
http://82.229.245.231/arrondi/trans/not-ideal_layout.png

En d'autres termes, meme si le cadre ne contient pas de texte, il sera au minimum de 2x la hauteur de l'arrondi.
Ce n'est pas forcément gênant pour les "gros" cadres arrondis(comme dans ton exemple ou celui d'alsacréation), mais peut être assez inesthétique appliqué à une seule ligne de texte(ex: un pathway):

- beauuuuu:
http://82.229.245.231/arrondi/trans/ideal_min.png

- pas beau:
http://82.229.245.231/arrondi/trans/not-ideal_min.png

c'est pour cette raison que je n'avais pas opté pour l'exemple d'alsacréation...

une autre idée?

merci,

to
Modifié par wouf (13 Dec 2006 - 09:59)

Si il y toujours une solution, aprés c'est de faire le bon compromis entre la complexité, le poid, la maintenance, la flexibilité, le temps passer...Dans le cas ou tu n'as qu'une ligne, j'utiliserais que deux images, une a droite, une gauche. Aprés si c'est la même boite qui doit s'adapter à tout les cas, ligne simple et multiligne, là faut que tu utilises les positions relative pour placer comme tu le souhaite la boite centrale. C'est compliqué parceque qu'il faut que tu calcul en fonction de tes padding pour qu'elle se place bien comme ici. Ceci dit il ne faut jamais oublier le temps que tu vas passer a adapter ta solution à tout les navigateurs...
Modifié par matmat (13 Dec 2006 - 17:48)

Salut,

je passai par là ... donc je propose une solution sans image et donc qui gère complètement la transparence.

va faire un tour sur ce site

J'utilise cette technique dans plusieur site et ça marche nickel

Si c'est pas mal cette technique, je l'utilise aussi, pour des petits "radius" c'est super rapide et relativement simple, c'est sur ce principe qu'est fait niftycube, seulement c'est générer par javascript
Modifié par matmat (13 Dec 2006 - 20:12)

Salut,

Pour IE7, firefox, opera c'est finalement assez simple de travailler avec des images sur le conteneur principal.

Avec les principaux div habituels :

<div id="global">

    <div id="header">
    Quelque chose...
    </div><!-- fin #header -->

    <div id="contenu">
    Quelque chose...
    </div><!-- fin #contenu -->

    <div id="footer">
    Quelque chose...
    </div><!-- fin #footer -->

</div><!-- fin #global -->

ça passe sans problème... Et sans div vides

et ça c'est une bonne nouvelle je trouve

wouhahou matmat ,

un grand merci, ca marche vraiment d'enfer, c'est exactement ce que je voulais faire !!

je me suis permis de relifter un peu le source pour qu'il soit le plus condensé possible:

<style>
.cadre-arrondi {
  width:250px; /*on fixe une largeur arbitraire au cadre arrondi*/
}

/*les images des 4 coins(cf fichier PSD)*/
.tl { background: url(cadre-arrondi_tl.png) top left; }
.tr { background: url(cadre-arrondi_tr.png) top right; }
.bl { background: url(cadre-arrondi_bl.png) bottom left; }
.br { background: url(cadre-arrondi_br.png) bottom right; }

/*commun*/
.tl, .tr, .bl, .br { background-repeat: no-repeat; }

/*bas*/
.bl, .br { height:16px; font-size:0;/*correction bug ie*/ } /*16px est la grandeur de l'arrondi*/

/*gauche*/
.bl, .tl { padding-left:16px; }

/*contenu*/
.tr div {
  position:relative;
  bottom:-8px; left:-8px; /*soit la moitié de l'arrondi*/

  text-align:center;
  line-height:1em;
}
</style>

<div class="cadre-arrondi">
  <div class="tl"><div class="tr">
    <div>
      Je suis un cadre arrondi, fluide et TRANSPARENT!!!
    </div>
  </div></div>
  <div class="bl"><div class="br"></div></div>
</div>

j'ai testé ici et je suis plus que satisfait du résultat qui semble être compatible avec la plupart des navigateurs (excepté le bug de transparence des PNGs sous ie6, mais bon la version 7 devrait le supplanter très rapidement maintenant)

bravo et encore merci pour ton investissement


PS: je joins mon fichier psd avec les repères/tranches de découpe: cadre-arrondi.psd

to
Modifié par wouf (13 Dec 2006 - 21:57)

Je crois pas qu'on puisse faire de demi pixel...
Je te conseil d'intégrer l'opacité pour IE6, ce serait quand même mieux.
Modifié par matmat (13 Dec 2006 - 21:12)

ben vous ou le navigateur arrondira, c'était pour être cohérent vis-à-vis de mes 15
Modifié par wouf (13 Dec 2006 - 21:11)

j'avais compris... tu peux faire 16 et 8.
C'est pratique ton truc browser screen shot
Modifié par matmat (13 Dec 2006 - 21:16)