Problema angoli smussati

il.dandi

Problema angoli smussati

Ciao a tutti, vorrei replicare i box presenti nella home page di myspace.com ... ovviamente modificandoli e personalizzandoli. Prima di modificarli volevo però avere la versione funzionante in locale, tutto OK tranne per gli angoli "smussati" che non capisco per quale motivo non visualizzo

cliccando col tasto di destra in prossimità degli angolini, nella versione on line, sembra che l'immagine sia questa

cornersSheet.png

ma anche salvandola in locale e sistemando il path nel CSS

splashv2007.css

Ho anche trovato un riferimento ai ROUNDED CORNER nei CSS

/* =================== /
/ = ROUNDED CORNERS = /
/ =================== */
div.b div div,
div.tb div div,
div.bb div div{ height: 5px; margin: 0 4px; font-size: 0; }
div.mb { padding:0.1em 0.5em; }

...

/* =================== /
/ = ROUNDED CORNERS = /
/ =================== */
div.tb div div,
div.bb div div{ background: #FFF none; }
div.mb { background:#FFF none; border: solid #A8A8A8; border-width:0 1px; }
div.tb div div { border-top:solid 1px; }
div.bb div div { border-bottom:solid 1px; }
div.b,
div.b div,
div.tb div,
div.tb,
div.bb,
div.bb div { background: transparent url() no-repeat left top; }
div.tb div { background-position: right top; }
div.bb { background-position: left -7px; }
div.bb div { background-position: right -7px; }
div.b { background-position: left -56px; }
div.b div { background-position: right -56px; }
div.b div div { background: transparent url(bgSheet.png) repeat-x left -792px; }

ma niente...

cmq l'HTML è questo

<div class="module" id="newMyspace">
<div class="tb">
<div>
<div></div>
</div>
</div>
<div class="mb">
<h2>Appena iscritto a MySpace? </h2>
<div class="middle clearfix">
<ul id="tourList">
<li id="getStarted">Iscriviti subito e diventa parte della community di MySpace </li>
<li id="createProfile">Racconta qualcosa di più di te e carica foto e video </li>
<li id="browseProfile">Guarda i profili e aggiungi nuovi amici al tuo network </li>
<li id="inviteFriends" class="last">Scopri nuove band, registi e comici </li>
</ul>
<div class="clearfix" id="tourLinkWrap"><span class="lCorner"></span><span class="btnTxt">Iscriviti</span><span class="rCorner"></span></a> </div>
</div>
</div>
</div>
<div class="bb">
<div>
<div></div>
</div>
</div>
</div>

Potreste aiutarmi a visualizzare gli angolini??

Grazie

</div>

....

jantima

Ciao il dandi e benvenuto sul Forum GT!
Credo che stai lavorando bene per studiare come si fa a riprodurre l'effetto. Ma ti manca ancora un po di studio! [utilizzi firebug -> plugin per firefox? se non lo usi te lo consiglio vivamente!]

Nel frammento di css che hai postato, manca, per esempio, la parte che stabilisce che in certi tags (i bottoni) deve apparire la immagine di sfondo che contiene l'angolo arrotondato. Io ho spulciato un po' e ho trovato questo


div#account
ul#loginTabs li h2, 
div#account ul#loginTabs li { /*splashv2007.css (line 714)*/
background:transparent url(../img/cornersSheet.png) repeat scroll left -68px;
}

Se riesci a mettere insieme tutti i pezzi vedrai che ti viene fuori. Comunque ti cosiglio di cercare un tutorial semplice semplice per creare un menu tabs con angoli arrotondati, cosi' capisci la logica senza troppo codice in piu' in mezzo.

Tra l'altro ti suggerisco altre due soluzioni: la prima si chiama [url=http://www.html.it/articoli/niftycube/index.html]Nifty Cube praticamente realizza angoli arrondontati senza uso di immagini!

La seconda soluzione sta nascendo proprio ora ed e' un semplicissimo codice css che e' gia' supportato in Firefox e Safari e che presto dovrebbe diventare standard css3!

Puoi trovare molte spiegazioni in rete se cerchi "border radius" oppure "-moz-border-radius" oppure "-webkit-border-radius:" oppure qui .css3.info/graceful-degradation/

Ti faccio un esempio lampo: http://www.antiworld.biz/round-corner-tabs.html
Funziona solo su Firefox e Safari(in teoria ma non ho provato) ovviamente (il codice lo trovi tutto nella sorgente)