[danielone80]

Credo che il titolo sia orrendo

Provo a spiegarmi, vorrei capire qual'e' l'approccio migliore per riportare da photoshop ad Html/css questo effetto sul menu in posizione top del template :



quello che vedete e' un menù, cerchiamo di vederlo come se fosse la mia pagina web, il nero che contorna sarà un gradiente, i vari menù non selezionati e' il corpo, le alette della selezione che hanno l'effetto visivo di finire dietro al corpo, come le dovrei riportare nell'html?

Avevo pensato di avere un div con posizione assoluta con tutta la barra arancione che porta con se tutto la grafica con l'effetto, ma credo avere problemi di posizione con diverse risoluzioni di schermo?!?!

Altrimenti quali sono altri possibilità di riportare tale effetto...
Spero di aver reso l'idea...

Grazie
Daniel

[antoscarface]

io dividerei quel menu in 3 parti: la parte superiore con il titolo del menu, le voci e la bordatura inferiore.

Io ti suggerisco questo metodo, che è più compatibile con tutti i browser. Potrei suggerirti la via CSS3, che ti evita di esportati lo sfondo con i bordi arrotontardi, facendoli direttamente da css, con tanto di sfondo e bordo. Questa via è comunque molto semplice... al metodo che ti spiegherò adesso, dovrai soltanto evitare di aggiungere lo sfondo del menu e del bordo arrotondato inferiore, ma dovrai semplicemente dare il background-color all'<ul> e arrotondare i bordi inferiore, tramite queste proprietà:

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. -webkit-border-bottom-right-radius: 10px;
2. -webkit-border-bottom-left-radius: 10px;
3. -moz-border-radius-bottomright: 10px;
4. -moz-border-radius-bottomleft: 10px;
5. border-bottom-right-radius: 10px;
6. border-bottom-left-radius: 10px;
7.  

Purtroppo questo non funzionerà con IE. Se vuoi un metodo più compatibile, continua a leggere.

Dal PSD esportati la striscia superiore e l'arrotondatura inferiore (mettiamo che sia alta 5px)

Il markup sarebbe così:

Sintassi: html [ Scarica ] [ Nascondi ]

Sintassi: html [ Scarica ] [ Mostra ]

1. <div class="nav">
2.     <div class="nav-title">&nbsp;</div>
3.     <ul>
4.         <li>Home</li>
5.         <li>News</li>
6.         <li>About</li>
7.         <li>Portfolio</li>
8.         <li>Contact</li>
9.     </ul>
10. </div>
11.  

Ora facciamo caso che il titolo sia largo 320px e il menu 300px. Dobbiamo fare in modo che il box tutto sia largo 320px, per fare entrare la striscia del titolo, mentre il menu con le voci deve essere largo 300px. Quindi:

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. .nav, .nav .nav-title {width:320px;}
2. .nav .nav-title {background:url('striscia_titolo.png')}
3. .nav ul {width:300px;margin:0 auto}
4.  

lo sfondo del menu lo inserisci così:

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. .nav ul {background:#333333 url('border-bottom.png') bottom center;border:1px solid #eeeeee}
2.  

In background, vedi che ho messo un '#333333': questo lo sostituirai con lo sfondo del menu, mentre allo stesso modo cambierai anche il colore del bordo.

Ovviamente poi ci sarebbe ancora formattazione da aggiungere, per i margini delle varie voci, il bordo delle voci, ecc... io ti ho dato la base per convertire da PSD a html, per ottenere lo stesso effetto, poi tu adatti secondo ciò che devi fare.

[danielone80]

Grazie per l'aiuto e per la spiegazione dettagliata

Quindi da quello che posso capire, se io voglio adattare i tuoi settaggi per fare un template per la mia pagina, devo creare un contenitore/box sia grande almeno come la striscia del titolo(che per me conterra il menu in posizione top sviluppato orizionatalmente) e tutto il corpo piu' piccolo come tu hai fatto per il menu'?

Mi viene un dubbio, se dovessi mettere un gradiente tutto intorno alla pagina come faccio a far si che nella differenza tra box intero(dove c'e' il .png della striscia del titolo) e la parte piu' piccola si veda il gradiente?

Spero che nell'immagine si capisca quello che intendo, vorrei sfondo (un gradiente) dove ho pitturato con il bianco... le altre suddivisioni sono corrette(sezioni colorate)?

http://flic.kr/p/9krdiG (nn riesco a caricarla nei tag!)

Grazie ancora e buona giornata...
Daniel

[antoscarface]

puoi prendere le immagini in trasparenza e senza lo sfondo nero.

L'unico problema sarebbe poi nell'arrotondamento inferiore, perchè con la trasparenza verrà fuori tutto lo sfondo del menu.
Potresti, a questo punto, usare un altro div dopo l'<ul>, dove inserire come sfondo l'immagine inferiore.