Crea sito

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 liquidi. 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.

Clearing

Poiché tutte le colonne sono con float, questo layout utilizza overflow:hidden sul .container. 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 avete un elemento di grandi dimensioni che fuoriesce dal .container, esso apparirà troncato. Inoltre non potrete utilizzare margini negativi o posizionamenti assoluti con valori negativi per portare gli elementi all'esterno del .container, altrimenti non saranno aggiornati al di fuori del .container.

Se avete bisogno di utilizzare queste proprietà, 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.

Piè di pagina

L'aggiunta di un piè di pagina dopo le colonne ma all'interno del .container farà fallire il metodo di clearing overflow:hidden. Potete inserire un .footer in un secondo .container esternamente al primo senza produrre effetti indesiderati. La scelta più semplice è probabilmente quella di iniziare con un layout contenente intestazioni e piè di pagina e poi rimuovere l'intestazione per utilizzare i metodi di clearing in quel tipo di layout.

Commenti condizionali di Internet Explorer

Questi layout liquidi contengono un commento condizionale di Internet Explorer (IECC) che consente di correggere due problemi.

  1. I browser eseguono tutti allo stesso modo l'arrotondamento delle dimensioni dei div nei layout basati su percentuale. Quando il browser esegue il rendering di un valore come 144,5 px o 564,5 px, deve arrotondarlo al numero intero più vicino. Safari e Opera arrotondano per difetto, Internet Explorer per eccesso e Firefox arrotonda una colonna per eccesso e una per difetto riempiendo completamente il container. Queste diverse modalità di arrotondamento possono determinare delle differenze in alcuni layout. Questo IECC specifica un margine negativo di 1 px per correggere il problema in IE. Potete spostarlo in qualunque colonna (a sinistra o a destra) a seconda delle vostre necessità di layout.
  2. La proprietà zoom è stata aggiunta all'ancoraggio all'interno dell'elenco di navigazione poiché, in alcuni casi, viene eseguito il rendering dello spazio vuoto supplementare in IE6 e IE7. Zoom fornisce a IE la sua proprietà hasLayout per correggere questo problema.

Sfondi

Normalmente, il colore di sfondo di un div viene visualizzato solo per tutta la lunghezza del contenuto. Ciò significa che se state utilizzando un colore di sfondo o un bordo per creare l'aspetto di una colonna laterale, questa non si estenderà fino al piè di pagina bensì si fermerà alla fine del contenuto. Se il div .content includerà sempre altro contenuto, potete inserire un bordo nel div .content per dividerlo dalla colonna.