7Posizionare gli elementi sulla pagina con i fogli di stile CSS

7
Posizionare
gli elementi
sulla pagina con
i fogli di stile CSS
Posizionare gli elementi sulla pagina in modo relativo
Posizionare gli elementi in modo assoluto
Impostare il posizionamento 3D (Z-Order) con i fogli di stile
Impostare le dimensioni con il ritaglio
Nascondere gli elementi
Gestire il testo in eccedenza
HTML 4 I Portatili
Il posizionamento convenzionale degli elementi sulla pagina è in grado di
potenziare l’efficacia del linguaggio HTML convenzionale e tradizionale. Allo
stesso modo, utilizzando tabelle complesse (vedi il capitolo 8, “Utilizzare le
tabelle per strutturare le pagine”) è possibile controllare con precisione gli elementi che compongono la struttura della pagina.
Tuttavia, entrambi gli approcci sono soggetti a limitazioni non ancora facilmente superabili. Al contrario, il posizionamento basato sui fogli di stile può essere
utilizzato per inserire con precisione gli elementi sulla pagina.
Inoltre, questo tipo di posizionamento consente agli oggetti di sovrapporsi tra
loro – simulando un effetto 3D – o addirittura di sparire e ricomparire. Questi
fattori efficaci rendono il posizionamento con i fogli di stile CSS la scelta
migliore per gli sviluppatori.
Il posizionamento basato sui fogli di stile si basa sull’inserimento degli elementi
in una casella, che sarà poi sistemata a sua volta sulla pagina. Questa casella
prende il nome di casella di associazione. Le caselle associate vengono create
con i fogli di stile CSS utilizzando i tag <DIV> e <SPAN> negli stili in linea e i
selettori in quelli incorporati e collegati (vedi il capitolo 4, “Fogli di stile CSS”).
Perfino un’intestazione, come H2, crea una casella invisibile dietro il testo in
cui verrà inserito. È infatti questa invisibile casella a essere posizionata, non il
testo vero e proprio.
■
Posizionare gli elementi sulla pagina in modo relativo
Il posizionamento relativo viene eseguito combinando la proprietà position
con il valore relative (relativo). In seguito, puoi effettuare una selezione tra
più attributi di posizionamento, come TOP (in alto), BOTTOM (in basso), LEFT (a
sinistra), RIGHT (a destra) o altro. Specifica quindi un valore numerico seguito
da un’unità di misura. Digitando 25 px, l’oggetto viene posizionato a una
distanza relativa pari a 25 pixel dall’ultimo elemento sulla pagina.
1. Seleziona un selettore in un foglio di stile incorporato o collegato.
2. Rientra di alcuni spazi, per esempio 5. Quindi, digita la proprietà position
(7.1).
7.1
<STYLE>
.h1 {
position:
</STYLE>
114
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
3. Adesso, aggiungi il valore relative e termina la dichiarazione con un punto
e virgola (7.2).
7.2
<STYLE>
.h1 {
position: relative;
</STYLE>
4. Spostati alla riga seguente e rientra di nuovo di alcuni spazi.
5. Aggiungi la proprietà top seguita dal valore associato. Termina la dichiara-
zione con un punto e virgola (7.3).
7.3
<STYLE>
.h1 {
position: relative;
top: 0px;
</STYLE>
Puoi utilizzare questa tecnica anche con gli stili in linea. In questo caso,
inserisci semplicemente ogni dichiarazione nell’attributo style del tag di tua
scelta. Tutte le dichiarazioni devono essere inserite sulla stessa riga, come
avviene con i fogli di stile incorporati o collegati.
6. Spostati ancora alla riga seguente e aggiungi la proprietà left seguita dal
valore associato; ricordati di terminare la dichiarazione (7.4).
7.4
<STYLE>
.h1 {
position: relative;
top: 0px;
left: 250px;
</STYLE>
7. Vai a capo un’altra volta e concludi il gruppo di regole inserendo una paren-
tesi graffa chiusa (7.5).
115
HTML 4 I Portatili
7.5
<STYLE>
.h1 {
position: relative;
top: 0px;
left: 250px;
}
</STYLE>
Questo tipo di posizionamento può essere utilizzato anche con le immagini.
Non applicando alcun foglio di stile, la grafica viene inserita nella posizione
predefinita (7.6). Utilizzando invece uno stile, come mostrato nella figura 7.3,
l’immagine si sposta nella nuova posizione (7.7).
7.6
7.7
116
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
La principale limitazione incontrata utilizzando il posizionamento basato sui
fogli di stile è la mancanza di compatibilità e di supporto nei browser. Tali
limitazioni restringono per il momento l’applicazione di questo approccio.
Tuttavia, l’elevato livello di efficacia offerto dal metodo in oggetto stimola gli
sviluppatori a continuare lo studio e – quando appropriato – l’utilizzo dei
fogli di stile CSS nel posizionamento degli elementi.
■
Posizionare gli elementi in modo assoluto
Il posizionamento assoluto inserisce la casella relativa a un tag o selettore specifico sul bordo della finestra del browser. Il risultato ottenuto è più complesso di
quello offerto dal posizionamento relativo. Se hai utilizzato un foglio di stile per
definire la posizione di un selettore H1, tutte le intestazioni di livello uno verranno inserite nella stessa posizione assoluta.
Puoi però creare regole da applicare ai tag in linea, in quanto vengono tutti
gestiti singolarmente. A tal fine, avrai bisogno di combinare la proprietà position con il valore absolute (assoluto) e di concludere la dichiarazione della
posizione specificando un valore per l’attributo style.
1. Per creare un ID, inserisci il simbolo # e digita una descrizione come faresti
per creare una classe (7.8).
7.8
<STYLE>
#offset
</STYLE>
2. Inserisci una parentesi graffa e passa alla riga seguente.
3. Digita la dichiarazione di posizione absolute (7.9).
7.9
<STYLE>
#offset {
position: absolute;
</STYLE>
117
HTML 4 I Portatili
4. Posizionati sulla riga seguente e aggiungi la dichiarazione.
5. Aggiungi altre dichiarazioni in modo da completare l’insieme di regole (7.10).
7.10
<STYLE>
#offset {
position: absolute;
top: 200px;
left: 300px;
}
</STYLE>
Il posizionamento assoluto o relativo può essere applicato a testo (come
illustra questo capitolo), immagini e altri elementi quali animazioni multimediali.
6. Individua il tag che desideri associare alla posizione.
7. Aggiungi l’attributo id (7.11).
7.11
<BODY>
<DIV id=>
</BODY>
8. Digita un valore corrispondente al nome dell’attributo ID creato nel foglio
di stile (7.12).
7.12
<BODY>
<DIV id=”offset”>
</BODY>
9. Verifica il risultato nel browser (7.13).
118
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
7.13
Nell’esempio, l’immagine è stata posizionata a una distanza assoluta pari a 200 pixel dalla parte superiore della finestra del browser e 300 pixel dal lato sinistro.
Sebbene il posizionamento assoluto e relativo siano supportati dai browser
della generazione 4.0, è importante precisare che Internet Explorer e
Netscape impostano gli assi x e y su posizioni differenti. Per questo motivo,
potresti rilevare alcune differenze in merito al posizionamento degli elementi aprendo la pagina in entrambi i browser.
Puoi utilizzare gli ID come base di uno stile in linea che sarà poi richiamato
utilizzando la proprietà id. Questa proprietà è una parte fissa dei fogli di
stile, sebbene il suo valore sia costituito da parole composte e descrittive,
quali “offset” o “rightside”. Come avviene con le classi, dovresti essere in
grado di comprendere i valori ID in modo da identificare costantemente le
loro azioni durante il posizionamento degli oggetti sulla pagina.
■
Impostare il posizionamento 3D (Z-Order) con i fogli di stile
Il posizionamento è principalmente un processo geometrico. L’asse orizzontale
viene indicato come asse x, mentre quello verticale è indicato come asse y.
Esiste un terzo asse, l’asse z, reso disponibile in HTML grazie al posizionamento assoluto. Mentre l’asse x definisce il posizionamento orizzontale degli ele119
HTML 4 I Portatili
menti e l’asse y quello verticale, l’asse z posiziona gli elementi lungo una terza
dimensione, offrendo alla struttura un senso di altezza, larghezza e profondità.
Per posizionare gli elementi lungo gli assi x e y, puoi utilizzare metodi convenzionali; tuttavia, senza i fogli di stile, sarebbe impossibile includere l’asse z, o
“Z-Order”.
Il posizionamento lungo l’asse z è reso possibile combinando la proprietà zcon un valore numerico. Per avere un’idea di come operi questo approccio, inserirai in modo assoluto due elementi nella stessa dimensione e utilizzerai
l’asse z per farli apparire entrambi sulla pagina.
index
1. In un foglio di stile collegato o incorporato, aggiungi una classe denominata
front.
2. Inserisci uno spazio e la parentesi graffa aperta; quindi, spostati sulla riga
seguente e aggiungi la dichiarazione di posizione assoluta.
3. Aggiungi le dichiarazioni per la posizione degli elementi e per altre proprietà, per esempio il colore (7.14).
7.14
<STYLE>
.front {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: black;
</STYLE>
Queste dichiarazioni indicano misure standard lungo gli assi x e y.
4. Per posizionare l’elemento in base alla profondità della pagina, aggiungi la
proprietà z-index seguita da un valore numerico. Per esempio, puoi posizionare un’immagine lungo gli assi x e y e definire in seguito un valore numerico per posizionarla anche lungo l’asse z. Per ottenere un senso di profondità
più evidente, puoi utilizzare questo valore anche per posizionare gli altri elementi sulla pagina (7.15).
120
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
7.15
<STYLE>
.front {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: black;
z-index: 2;
</STYLE>
5. Termina la regola con una parentesi graffa chiusa; posizionati quindi sulla riga
seguente e aggiungi una nuova classe, questa volta denominandola back (7.16).
7.16
<STYLE>
.front {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: black;
z-index: 2;
}
.back {
</STYLE>
6. Inserisci uno spazio e la parentesi graffa aperta; spostati quindi sulla riga
seguente e aggiungi la dichiarazione di posizione assoluta.
I fogli di stile ti consentono di utilizzare diverse unità di misura. Al posto dei
pixel, prova a impiegare punti (pt), percentuali (%), pollici (in), centimetri
(cm) o em (em). Molti sviluppatori preferiscono ricorrere ai pixel in quanto
anche la risoluzione dello schermo adotta la stessa unità di misura.
7. Aggiungi le stesse dichiarazioni per le posizioni indicate nella classe prece-
dente. Eventualmente, specifica anche altre proprietà (7.17).
121
HTML 4 I Portatili
7.17
<STYLE>
.front {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: black;
z-index: 2;
}
.back {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: purple;
</STYLE>
8. Inserisci la proprietà z-index seguita da un valore numerico più piccolo;
chiudi quindi la regola (7.18).
9. Nello schema HTML, individua l’elemento da inserire nella posizione frontale e, utilizzando l’attributo di classe, definisci il valore front.
10. Adesso, individua l’elemento da inserire nella posizione back e, utilizzando
l’attributo class, definisci il valore back (7.19).
11. Visualizza il risultato in un browser compatibile con i fogli di stile CSS (7.20).
Noterai che l’elemento inserito nella posizione front appare in primo piano,
mentre quello disposto nella posizione back sembra essere più distante dall’utente.
Utilizzando la proprietà z-index per definire il posizionamento lungo l’asse
z, molti sviluppatori riescono a scrivere il codice pensando in termini tridimensionali. Con un adeguato supporto da parte del browser, questo significa essere in grado di creare strutture con un senso di profondità, senza
dover ricorrere a elementi grafici.
122
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
7.18
<STYLE>
.front {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: black;
z-index: 2;
}
.back {
position: absolute;
top: 200px;
left: 300px;
color: white;
background-color: purple;
z-index: 1;
}
</STYLE>
7.19
<BODY>
<DIV class=”back”>
Non so quale sarà il vostro destino, ma una cosa è certa: quelli
che tra voi saranno davvero felici sono coloro che hanno cercato
e sono riusciti a essere utili.
</DIV>
<DIV class=”front”>
Gli scopi servono come principi attorno a cui organizzare la
propria vita.
</DIV>
</BODY>
123
HTML 4 I Portatili
7.20
Sebbene questi due elementi siano stati posizionati alla stessa distanza assoluta rispetto agli assi x e y,
puoi notare parti distinte di ognuno di essi (evidenziate da diverse tonalità di colore) in quanto vengono
visualizzati lungo l’asse z.
Se utilizzi la versione 4.0 di Netscape Navigator, devi fare molta attenzione
a quali tag HTML utilizzare per posizionare gli elementi lungo l’asse z. Per
andare sul sicuro, limitati ai tag SPAN e DIV. Un altro approccio che potresti
seguire implica l’impiego del tag <LAYER> per mandare a capo gli altri tag in
esso contenuti. Tuttavia, questo tag è stato creato appositamente per
Netscape; di conseguenza, non viene considerato parte dello standard
HTML 4.0.
■
Impostare le dimensioni con il ritaglio
Il ritaglio è un effetto speciale di posizionamento. Se desiderassi creare una
casella di associazione più grande delle informazioni in essa contenute, potresti
definirne le dimensioni e utilizzare quindi la proprietà clip per impostare quelle effettive dell’elemento.
124
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
Per esempio, questa tecnica può essere utilizzata per aggiungere spazio vuoto
attorno a un’immagine. Sebbene quest’ultima sia inclusa nell’area di ritaglio, il
browser farà riferimento alla casella di associazione, e non al riquadro ritagliato,
per posizionare gli altri elementi sulla pagina.
1. Seleziona un selettore e crea un foglio di stile che comprenda diverse regole,
tra cui quelle per il posizionamento.
2. Aggiungi la proprietà clip.
3. Assegna un valore a questa proprietà utilizzando dimensioni più piccole di
quelle della casella effettivamente posizionata (7.21). In questo caso, otterrai
come risultato un’area di ritaglio circondata da angoli aventi posizione assoluta (7.22).
7.21
<STYLE>
.P {
position: absolute;
top: 20px;
left: 20px;
height: 150px;
color: white;
background-color: black;
clip: rect(25px, 125px, 125px, 25px)
}
</STYLE>
Tutto ciò che non rientra nella sezione ritagliata, non verrà visualizzato. Tuttavia, per risalire alle dimensioni originali della bounding box potrai esaminare gli altri elementi della pagina.
Per ottenere effetti interessanti, ritaglia le immagini già posizionate. Se desideri che la fotografia inserita mostri solamente gli occhi della persona fotografata, puoi inserire gli occhi nell’area di ritaglio. Ricorri a filtri o ad altre
tecniche per mostrare il resto del volto durante un’animazione.
125
HTML 4 I Portatili
7.22
Questo paragrafo non viene visualizzato in quanto sono stati ritagliati i bordi.
■
Nascondere gli elementi
Un altro effetto di posizionamento è nascondere una casella di associazione
dopo averla creata. Utilizza questo approccio per creare spazio vuoto in posizioni specifiche. Per nascondere un elemento, definisci il selettore, specifica la
proprietà visibility e aggiungi l’attributo hidden per ottenere l’effetto desiderato.
1. Crea una classe e aggiungi una dichiarazione che specifichi la posizione o la
dimensione.
2. Inserisci la proprietà visibility.
3. Aggiungi il valore hidden e chiudi il gruppo di regole (7.23). Visualizza il
risultato nel browser (7.24).
126
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
7.23
<STYLE>
.hidden {
position: absolute;
top: 200px;
left: 200px;
visibility: hidden;
}
</STYLE>
7.24
Questa divertente citazione di Steven Wright appare nella parte inferiore della pagina poiché viene preceduta da altre due citazioni, rese entrambe nascoste con la dichiarazione visibility: hidden.
Un utilizzo interessante di questa tecnica è posizionare una casella di associazione sopra altre caselle già inserite utilizzando l’attributo z-index. Potrai
così nascondere porzioni di altre caselle creando strutture geometriche.
Come avviene con il ritaglio, questa tecnica è applicabile anche alle immagini.
127
HTML 4 I Portatili
Se il foglio di stile non funzionasse, controlla la sintassi scritta e verifica la
versione del tuo browser. Se ancora non riuscissi a ottenere il risultato desiderato, significa probabilmente che si è verificato un problema di incompatibilità. Questo ti consente di capire che il posizionamento deve ancora essere perfezionato prima di diventare applicabile.
■
Gestire il testo in eccedenza
Immagina la situazione opposta del ritaglio. Le informazioni che possiedi eccedono i confini della casella di associazione che hai inserito sulla pagina.
Per risolvere questo problema, utilizza la proprietà overflow. I valori disponibili sono: visible (consente di visualizzare le informazioni che eccedono i limiti
della casella), hidden (nasconde le informazioni in eccedenza e dispone in modo
corretto gli elementi circostanti) e scroll (ritaglia le informazioni in eccedenza
e inserisce due barre di scorrimento per consentire la visualizzazione del contenuto rimanente).
1. Seleziona un selettore e aggiungi una dichiarazione a tua scelta.
2. Digita la proprietà overflow.
3. Aggiungi il valore che preferisci e chiudi il gruppo di regole (7.25).
7.25
<STYLE>
P {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: black;
overflow: scroll;
}
</STYLE>
4. Visualizza il risultato nel browser (7.26).
128
7: Posizionare gli elementi sulla pagina con i fogli di stile CSS
7.26
Pur essendo legale, il valore scroll non è supportato da Netscape 4.0. Di
conseguenza, questo dimostra che Internet Explorer 5.0 per Windows 98
offre – nel momento in cui è stato scritto questo libro – il miglior supporto ai
fogli di stile.
129