Corso HTML e Css
Corso HTML e Css
Questo è un invito ad approfondire e consolidere la conoscenza di questo argomento. Gli elementi con position:absolute rispondono alle proprietà left, top, right, bottom che consentono di posizionare gli oggetti a cui sono applicate rispetto allo spigolo superiore sinistro del loro contenitore. La posizione di un oggetto posizionato in maniera assoluto si ottiene applicando allo spigolo superiore sinistro dell'eggetto gli offset assegnati con left, top, right, bottom in conformità al suo modello a box e alla sua proprietà display.
Per illustrare il funzionamento del posizionamento relativo dividerò orizzontalmento lo schermo in due sezioni, sinistra e destra. Nella sezione sinistra posizionerò, secondo il posizionamento statico, uno o più oggetti, evidenziandoli con bordi e colori. Nella sezione destra, agli stessi oggetti, con posizionamento relativo, applicherò specifici valori di offset in modo da poterne verificarne l'effetto.
Nella sezione di destra a "Oggetto 1" ho applica i seguenti valori di offset: left:30px; top:20px;.
Oggetto 1
Oggetto 1
Agli oggetti di destra ho applicato i seguenti offset:
Notare come "Oggetto 3" vada a finire sotto ad "Oggetto 4".
Oggetto 2
Oggetto 3
Oggetto 4
Oggetto 2
Oggetto 3
Oggetto 4
Agli oggetti di destra ho applicato i seguenti offset:
Oggetto 5
Oggetto 6
Oggetto 7
Oggetto 5
Oggetto 6
Oggetto 7
Per prima cosa scarica il file HTML_073.rar nella cartella CorsoHTML che avrai creato in precedenza.
Estrai la cartella HTML_073 e apri in Notepad++ i file HTML_073.html, e i file .css
Studiane il contenuto.
Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.
Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.
Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.
Nelle specifiche ufficiali del w3 consortium puoi consultare:
Nel sito developer mozilla puoi consultare: