Css con tanto di curve

[cortex]

Ciao Ragazzi,

volevo chiedervi cortesemente un parere.
Mi è stato richiesto un layout come il seguente

http://img99.imageshack.us/img99/2755/layoutfa3.jpg

è possibile con i css? nn riesco a capire come legare i soliti angoli smussati a quella curva!

qualche consiglio?

ty

[Mich_]

Devi lavorare con le immagini e gli sfondi trasparenti.

La tua curva deve stare in un'immagine che a sinistra e sopra e` trasparente, mentre sotto a destra e` colorata, o comunque non trasparente.

Poi lavori con la sovrapposizione dei livelli con l'attributo z-index.

E l'immagine si sovrappone al menu.

Pero` attenzione. quando il mouse sara` sulla zona trasparente dell'immagine, non sara` sul menu (e non vedrai quindi gli effetti di :hover), per cui devi tenere la zona trasparente il piu` piccola possibile, compatibilmente con i problemi grafici. Eventualmente l'immagine potra` essere spezzata.

In alternativa puoi lavorare con le <area> sull'immagine (sulla zona trasparente), ma ho l'impressione (dovrei studiarci con calma per dare una risposta completa) che questo ti obblighi ad usare JS, che non e` il massimo per un menu. Tieni quindi questo come soluzione di emergenza, oppure come completamento se vuoi rendere l'effetto :hover anche sulla parte coperta dall'immagine.

[cortex]

grazie mille!

siete dei grandi! provo subito!!!

[cortex]

sono ad un passo dal mollare

[Mich_]

Originariamente inviato da cortex
sono ad un passo dal mollare

Questa e` una grande delusione.
Ho avuto l'impressione che intendessi studiarci su, e provare; invece prima dici di provarci, poi senza altre spiegazioni molli.

Fa' alcune prove, e posta il risultato (linka una o piu` prove). Magari qualcuno ti da` altri consigli (piu` mirati della mia spiegazione teorica iniziale).

[Another-Life]

Non vedo dove sia la difficoltà....:

1)Crei una sezione dedicata al menu in questione(ad esempio <div id="navigation_menu">..</div>)
2)Con Photoshop Cs 2(o un qualsiasi altro programma di grafica che sia decente)realizzi tutta la parte grafica in un unica immagine(ovviamente la parte grafica di ogni singola voce non dovra essere presente e lasciare quindi uno spazio vuoto).
3)Per inserire l'immagine nella sezione appena menzionata o utilizzi un immagine trasparente(in modo tale da visualizzare a monitor solo il contenuto dell'immagine e non anche lo sfondo)oppure utilizza lo stesso colore di sfondo della sezione adiacente a quella del menu che andrai ad inserire successivamente nel progetto)
4)Crei un immagine per ogni voce(una per lo stato :link e un altra per lo stato :hover)
5)Visto che la sezione del menu è allineata a sinistra dichiarerai al suo interno tramite un foglio di stile la seguente proprietà(le altre proprietà sono ormai di comune uso per cui non le menziono nemmeno):

div#navigation_menu {
......
float: left
.....
}

6)Successivamente creerai una lista e disporrai ogni singola immagine nella posizione corretta.(per maggiori informazioni ti consiglio ti dare un occhiata alla sezione
Link Utili )

p.s: Ci sono altri metodi per ottenere lo stesso fine,ad esempio tramite l'utilizzo di una mappa immagine ecc..

[cortex]

mi scuso con il povero mich che si era precipitato in una soluzione per aiutarmi!

davvero scusami! sorgenti purtroppo al momento non ne posso postare essendo in ufficio,

questa sera o max domani sera dovrei riuscire a postarli!

cmq il problema + grosso era quello dell'hover che non c'era verso di farlo sentire come evento come giustamente mi avevi annunciato tu!

porco cane ( si può dire? ) devo riuscirci!

grazie mille ancora una volta!

[Mich_]

Originariamente inviato da cortex
cmq il problema + grosso era quello dell'hover che non c'era verso di farlo sentire come evento come giustamente mi avevi annunciato tu!

rileggi con attenzione l'ultimo paragrafo del mio primo intervento: c'e` indicato come bypassare (purtroppo usa JS)

[quoteporco cane ( si può dire? ) devo riuscirci! [/QUOTE] Certo che ci riesci!!

[Another-Life]

....cmq il problema + grosso era quello dell'hover che non c'era verso di farlo sentire come evento come giustamente mi avevi annunciato tu!....

:master: ....Non capisco perchè devi complicarti la vita.....

[cortex]

and the winner is... HTML.IT

alla fine ci sono riuscito, ho preso spunto di qua e di la e ce l'ho fatto!

alla fine ho invertito l'idea! nel senso... il menu ora è una jpg mentre la parte sotto la curva è quella trasparente! con i livelli poi sono riuscito a costruire il content sulla parte trasparente!

credo di esser riuscito a trovare un giusto compromesso tra i vostri consigli e le mie capacità che al momento sono ancora un pochito un scarne

grazie mille di tutto ragassuoli!!!