Layout complessi a tre colonne (Parte II)

< Leggi la prima parte dell'articolo

Risoluzione problemi di visualizzazione

Così strutturato, però, il layout darebbeproblemi di visualizzazione in IE per Windows. Intanto, nonsi vedrebbe il "Tip of the day" ed il contenutoprincipale verrebbe scostato al suo posto. Per risolvere talproblema, non dovremo far altro che impostare laproprietà position di "tipDay" su relative.

Width "Auto" vs "Inherit"

Altro problema legato ad IE ed al modo in cui rappresenta ilnostro layout, è l' errato posizionamento dellabarra orizzontale sulla destra. Per risolvere il problema,impostiamo la proprietà width in "level2".IE infatti non riconosce l' "auto" in width,mentre preferisce l' "inherit". Inpostandoinfatti la width di "level0" a 100% e quella di"level2" ad inehrit, risolveremo il problema.

#level0 {    background:#FC0;    width:100%; # - New, outermost DIV}#level2 {    background:#FFF3AC;    position:relative;    width:inherit; # - New, inherits 100% from level0 in IE5 #  inherits auto from level1 in all others}#tipDay{    float:right;    width:175px;    background:#FFF3AC;    position:relative; # - New, forces z-index so this div displays in IE}

Ripulire il codice

A questo punto è importante una pulizia di quantoscritto, perchè tra accorgimenti, revisioni edaggiunte, il codice risulta piuttosto caotico. Intanto,sbarazziamoci di "level3" e spostiamo nel blocco"main" tutto ciò che conteneva . Aggiungiamopoi due headers al main ed alcuni contenuti di esempio edaltri headers nella barra di destra. In fondo alla barra didestra, impostiamo l' header "A_Long_String"per evitare problemi con i font grandi

#main { # Where the main content goes    margin-right:143px;    padding-right:9px;    background:#FFF;}#main h1 { # Where our main section headers go    margin:0;    padding-left:.3em;    font:1.25em Verdana,Helvetica,Arial;    color:#609;    background:#FC0;}#main dt { # Bump up the main content links    font-weight:bold;    font-size:120%;    margin-top:.8em}#rgtBar h3 { # Subheads for right nav bar, (newsletter, experts...)     margin:0;    padding:3px;    background:#FC0;    font-weight:bold;    font-size:1em;    text-align:center;}

Controlli sull' attributo relative

Andiamo a questo punto a modificare alcune dichiarazioniriguardati "rgtBar" e "main" esprimendolein unità di misura relative quali "em".Sostituiamo quindi il valore margin-right di"rgtBar" e "main" con 9em (anzichè143px). Otterremo così una barra destra checambierà le proprie dimensioni proporzionalmente alladimensione caratteri scelta dall' utente

#main {    margin-right:9em; # - Use variable widths rather than fixed, they are  more user-friendly. This also applies to font sizes.    padding-right:9px;    background:#FFF;}...#rgtBar {    position:absolute;    width:9em; # - likewise    top:0;    right:0;}

Spostare il Search Form

Andiamo ora ad impostare il search form nella top navigationbar. Per farlo, impostiamo al blocco "topBar" laproprietà float sulla destra, dichiarandone la width a10.5 em ed allineando il testo sulla destra:

#topBar form {    float:right;    width:10.5em;    text-align:right;}  

A questo punto impostiamo i margini del form a 0 per renderloil meno ingombrante possibile. Per Netscape abbiamo aggiuntola proprietà line-height a 7 em per rendere la searchform alta quanto l' elemento di input.  Perrisolvere un bug di IE, infine, impostiamo la width della"topBar" a 100%

#advBar {    background:#FFF3AC;    clear:right; # - New, clear the search form}...#topBar form { # The search form    float:right;    width:10.5em;    text-align:right;    margin:0;    line-height:.7em; # - Crucial!}#topBar input {    font-size:.8em;}

Aggiungiamo alcuni links testuali

Inseriamo adesso alcuni links. Ad esempio, decidiamo diinserirne 5, strutturati ad elenco e scritti in grassetto(<b>). Stando ad un bug di IE 5.0 questi linksverrebbero spostati totalmente sulla destra; per evitareciò, inseriamo l' elemento b in una DIVimpostandole la proprietà text-align sulla sinistra.Impostiamo pure le proprietà riguardanti i font.

#topBar b { # Top nav bar text links (sitemap, experts...)    display:block;    text-align:left;    font:bold .8em/1.7em Arial,Geneva,sans-serif;}

Aggiunta di contenuti e del titolo

Modifichiamo ora gli headers "This is the main" e"This is the main2" rispettivamente con"WebReference.com: Dev the Web™" e"internet.com". Vogliamo ora che i titoli in"Tip of the day" abbiano lo stesso colore dell'header bar contenente "WebReference.com: Dev theWeb™"; per far ciò usiamo un elemento DIVidentificato con "tipTit" , il quale sarà ilprimo blocco sottostante al "main" e cheavrà la proprietà float impostata a right, lawidth a a 7 em ed i font scelti a nostro piacimento.

#tipTit {    float:right;    width:7em;    text-align:right;    position:relative;    font:.8em/1.8em Arial,Geneva,sans-serif;    background:red;}.note {    }

Abbiamo terminato, ora il look del nostro sito èquello di WebReference

< Leggi la prima parte dell'articolo



Ti potrebbe interessare anche

commenta la notizia