Originariamente inviato da ResianTaxidrive
Dipende da come sei abituato. Io con le tabelle non combino proprio, trovo che sia più semplice con i div, non ci sono le costrizioni delle tabelle. Ma perchè non parti guardando dei layout semplici e vedi come sono costruiti? secondo me è meno difficile di quel che pensi.
Il discorso del libro "fa parte del flusso pero' si sposta" ti introduce al concetto di come una pagina è strutturata. Hai mai visto il sito csszengarden.com?
Prova a dare un occhio e togli gli stili css, vedrai la pagina con html nudo e crudo. Quella è la partenza per un sito ben strutturato; bisogna partire dai contenuti e dall'importanza che questi assumono nella pagina. Quindi prima ci sono i contenuti più importanti e poi via via, quelli meno significativi. Il flusso della pagina è questo: l'ordine con cui i contenuti sono disposti nell'html.
Se ho 3 paragrafi, il loro normale flusso è
ar1, par2, par3 perchè così sono nell'html.
Però con gli opportuni stili questo ordine può essere cambiato, andando contro il normale flusso della pagina. Per far questo spesso si usano i posizionamenti relativi e assoluti; questi sono da usare però "cum grano salis", primo perchè bisogna avere buone ragioni per sovvertire l'ordine degli elementi di una pagina; secondo perchè bisogna saperli maneggiare.
Cmq, quando metti un div a position:relative; sei in grado di dargli delle coordinate in rapporto alla posizione in cui si trova in quel momento. Cioè: vuoi spostarlo più a destra di 10px e più in basso di 20? gli assegni:
{
position:relative;
top:20px;
left:10px
}
Il posizionamento assoluto invece lo usi per sovvertire il flusso, per l'appunto; anche in questo caso puoi dare delle coordinate al tuo contenitore ma il punto 0 da cui prendi riferimento per le coordinate è: o il punto in alto a sx del tuo browser ( in assenza di specifiche) oppure il primo div con posizionamento relativo che contiente questo div con posizionamento assoluto.
Esempio
codice:
<div id="wrap">
<p id="uno"></p>
<p id="due"></p>
</div>
<p id="tre"></p>
#wrap{
position:relative;
}
#due{
top:0px;
left:0px;
}
#tre{
top:0px;
left:0px;
}
In questo esempio, il paragrafo 3 andrà a piazzarsi in cima alla pagina (quindi verrà prima di tutti gli altri) mentre il due andrà a piazzarsi a partire dall'angolo sx in alto del div#wrap perchè è il parente più prossimo a #due che abbia posizionamento relativo. Se a div#wrap togli infatti il position:relative, #due andrà nello stesso posto di #tre.
Quindi in questo caso il posizionamento relativo non è servito per spostare il contenitore in se ma per determinare il comportamento di un figlio.
Detto tutto ciò, ti consiglio di imparare intanto senza i posizionamenti ma solo con i float.
Rispondi quotando
