Salve a tutti, dalla guida di css che ho trovato su html.it
ho trovato questo sorgente, che sarebbe l'ideale per quello che ho intenzione di fare io:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout a tre colonne con posizionamenti assoluti</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{position: relative;width:760px; margin: 0 auto;
border-left: 1px solid #ccc; border-right: 1px solid #ccc;
background: url(3rightcol.jpg) repeat-y top right}
div#container2{background: url(3leftcol.jpg) repeat-y top left;text-align: left}
/*stili generici, su header e footer*/
div#header{height: 80px;background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px;font: bold 2.3em/80px arial,sans-serif}
h2{color: #69f;font-size: 1.5em}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{position: absolute; top: 80px; left: 0;
width: 160px;\width:170px;w\idth:160px;padding: 1em 0 0 10px}
div#extra{position: absolute; top: 80px; right: 0;
width: 160px;\width:170px;w\idth:160px;padding: 1em 5px}
div#content{margin: 0 170px;padding: 1em 10px;background-color: #fff}
div#footer{text-align:center; padding: 5px 0;
background-color: #69c; color: #000}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}
/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
</style>
</head>
<body>
<div id="container">
<div id="container2">
<div id="header">
<h1>Html.it</h1>
</div>
<div id="content">
<h2>Layout a tre colonne - versione con i posizionamenti assoluti e immagine di background</h2>
Per il layout a tre colonne con i posizionamenti assoulti nel codice html la sezione dei contenuti deve precedere le due colonne
laterali, e deve essere la più lunga. Ritengo che siano una caratteristica e un limite che si compensano a vicenda: migliore accessibilità
e chanche di indicizzazione nei motori di ricerca per un limite accettabilissimo.
Infatti è raro trovare siti in cui i contenuti delle colonne laterali eccedono rispetto alla colonna centrale, e per tali situazioni si può
sempre pensare uno snellimento o una riorganizzazione (spostando i contenuti nella colonna centrale) dei contenuti delle colonne laterali.</p>
Sull' ordine di html delle due colonne laterali non ci sono vincoli: si può quindi scegliere se disporre prima la navigazione oppure
la colonna extra. Dovendo effettuare una scelta apparentemente ininfluente, si può optare per avere la seguente disposizione di codice: header, corpo centrale, colonna extra, navigazione e footer.</p>
Per il layout a tre colonne con i posizionamenti assoulti nel codice html la sezione dei contenuti deve precedere le due colonne
laterali, e deve essere la più lunga. Ritengo che siano una caratteristica e un limite che si compensano a vicenda: migliore accessibilità
e chanche di indicizzazione nei motori di ricerca per un limite accettabilissimo.
Infatti è raro trovare siti in cui i contenuti delle colonne laterali eccedono rispetto alla colonna centrale, e per tali situazioni si può
sempre pensare uno snellimento o una riorganizzazione (spostando i contenuti nella colonna centrale) dei contenuti delle colonne laterali.</p>
Sull' ordine di html delle due colonne laterali non ci sono vincoli: si può quindi scegliere se disporre prima la navigazione oppure
la colonna extra. Dovendo effettuare una scelta apparentemente ininfluente, si può optare per avere la seguente disposizione di codice: header, corpo centrale, colonna extra, navigazione e footer.
</p>
</p>
</div>
<div id="extra">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
<div class="newsbox">
<h2>Largezza totale</h2>
Un layout a tre colonne si presenta generalmente fluido a larghezza totale,
e cioè occupa in ampiezza tutta la larghezza della finestra del browser [...]</p>
</div>
</div>
<div id="navigation">
<ul>[*]Home[*]Pillole[*]Contenuti[*]Grafica[*]Linguaggi[*]Webdesign[*]Software[/list]
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</div>
</div>
</body>
</html>
Però, sono un gran newbbo sui css e layout e volevo chiedere:
- tramite il menu a sinistra io posso caricare delle pagine tramite link, nella zona centrale, come faccio senza dover ricaricare tutta la pagina??
- alcune mie pagine sono dinamiche, ossia prendono dati da un db, quindi una visualizzazione del risultato sarà divisa in più viste (spero di essermi spiegato) e collegate tra loro tramite link, come faccio a caricare queste pagine senza dover ricaricare il tutto..
Io fino ad ora ho oviato a questo tramite i famre, ma ora voglio dare un tocco più verso la grafica che verso altro al mio sito..
grazie per l'aiuto e
spero di essermi spiegato abbastanza bene.
Rispondi quotando
