I collegamenti qui sopra mostrano una struttura di navigazione di base mediante un elenco non ordinato con stili CSS. Utilizzate questa struttura come punto di partenza e modificate le proprietà per produrre un look personalizzato. Se vi servono dei menu flyout, createli utilizzando un menu Spry, un menu widget di Adobe Exchange o una varietà di altre soluzioni javascript o CSS.

Se volete posizionare l'area di navigazione in alto, dovete semplicemente spostare il ul.nav nella parte superiore della pagina e ricreare gli stili.

Istruzioni

Tenete presente che il codice CSS di questi layout contiene molti commenti. Se solitamente lavorate nella vista Progettazione, visualizzate almeno momentaneamente la vista Codice per consultare i suggerimenti sull'uso del codice CSS nei layout fissi. Potete rimuovere questi commenti prima di lanciare il sito. Per saperne di più sulle tecniche utilizzate in questi layout CSS, leggete questo articolo sul Centro per gli sviluppatori Adobe - http://www.adobe.com/go/adc_css_layouts.

Metodo di clearing

Poiché tutte le colonne sono con float, questo layout utilizza una dichiarazione clear:both nella regola .footer. Questa tecnica di clearing obbliga il .container a capire dove terminano le colonne per fare apparire i bordi o i colori di bordo che applicate al .container. Se il vostro design richiede la rimozione di .footer dal .container, dovete utilizzare un metodo di clearing differente. Quello più affidabile prevede l'aggiunta di un <br class="clearfloat" /> o <div class="clearfloat"></div> dopo l'ultima colonna con float (ma prima della chiusura del .container). L'effetto di clearing sarà lo stesso.

Sostituzione logo

In questo layout è stata utilizzata un'immagine segnaposto nell'area .header, nel punto in cui probabilmente inserirete un logo. Si consiglia di rimuovere il segnaposto e sostituirlo con il vostro logo collegato.

Tenete presente che se utilizzate la finestra di ispezione Proprietà per accedere all'immagine del logo utilizzando il campo Orig. (anziché rimuovere e sostituire il segnaposto), dovrete rimuovere le proprietà di visualizzazione e sfondo in linea. Questi stili in linea vengono utilizzati solo per fare apparire il segnaposto del logo nei browser a scopo di dimostrazione.

Per rimuovere gli stili, controllate che il pannello Stili CSS sia visualizzato nella versione Corrente. Selezionate l'immagine e, nel riquadro Proprietà del pannello Stili CSS, fate clic con il pulsante destro ed eliminate le proprietà di visualizzazione e sfondo (display e background). (Naturalmente potete sempre accedere direttamente al codice ed eliminare manualmente gli stili in linea dall'immagine o dal segnaposto.)

Sfondi

Normalmente, il colore di sfondo di un div viene visualizzato solo per tutta la lunghezza del contenuto. Se desiderate visualizzare una linea di divisione anziché un colore, inserite un bordo sul lato del div .content (ma solo se esso conterrà sempre una quantità maggiore di contenuto).