Su un sito web per la tua piccola impresa, il tuo logo evidenzia il tuo marchio e la tua identità ai visitatori. Il tuo logo deve essere posizionato in modo ben visibile e sopra altri contenuti. I fogli di stile a cascata consentono un controllo ampio e preciso di come il contenuto del tuo sito web viene mostrato agli utenti. Usando i CSS puoi posizionare facilmente il tuo logo in poche righe di codice.
1
Definisci il tuo logo in una divisione di pagina in base al codice seguente.
2
Crea una sezione per il tuo foglio di stile CSS nell’intestazione della tua pagina HTML.
3
Collegamento a un foglio di stile CSS esterno come alternativa per fogli di stile più grandi. Questo codice dovrebbe anche essere inserito nell’intestazione della tua pagina HTML.
4
Crea una sezione nel tuo foglio di stile CSS per modificare gli attributi del logo “div”. Il selettore “#” viene utilizzato per selezionare un oggetto in base all’ID.
div # my_logo {// CSS va qui}
5
Imposta l’attributo “position” di “div # my_logo” su “assoluto”. Questo definisce la posizione del “div” come assoluta rispetto alla pagina, essendo posizionato indipendentemente da altri elementi nel modello documento-oggetto.
div # my_logo {posizione: assoluto; }
6
Imposta gli attributi “in alto” e “a sinistra” in modo che siano uguali alla posizione in cui desideri posizionare il tuo logo. Questo può essere definito in pixel, punti e altre misurazioni.
div # my_logo {posizione: assoluto; in alto: 12pt; sinistra: 24pt; }
7
Imposta l’attributo “z-index” su un numero alto, maggiore dello “z-index” di altri elementi della pagina. Il numero assoluto è irrilevante; gli elementi della pagina sono posizionati in base al valore relativo dello “z-index”.
div # my_logo {posizione: assoluto; in alto: 12pt; sinistra: 24pt; z-index: 100; }