Oggi Andremo a creare un box, ovvero di un layout composto da rettangoli e/o quadrati (parafrasando: colonne e righe) con o senza bordo che servono per poter impaginare i nostri dati: testi, immagini o qualsiasi altra cosa che potrebbe far parte di una pagina web.
Andiamo ad iniziare.
Dichiarazione nel foglio di stile:
< !Htm l>
< !Htm l>
Per richiamarlo nella nostra pagina web:
< !Htm l>
Ciò vuol dire che il nostro box, se richiamato, avrà SEMPRE larghezza 350px, altezza 150px, e via dicendo.
La maggiorparte delle volte, parlando in termini di forum, le skin di rado comprendono dichiarazioni sui box (salvo quando una skin preveda l'uso di un CONTAINER, ossia, quindi, di un BOX). Si limitano, magari, ad impostare gli attributi delle barre di scorrimento (anche se tali attributi non vengono letti da tutti i browser...)
Dunque, non ci resta che costruire il nostro box da soli. Preparatevi a digitare follemente sulla tastiera xD
Innanzitutto, ecco una FIGURA riassuntiva degli attributi più usati di un BOX (fig. by
Per creare il nostro box, dobbiamo inserirlo, a sua volta, in un contenitore. Questo contenitore è rappresentato dal tag DIV.
Tutto quello che è incluso fra il tag iniziale DIV e quello di chiusura /DIV reagisce secondo gli stili o comandi che gli sono stati associati. Nel caso contengano stili css possono essere ereditari.
Creiamo un semplice box di larghezza 200px ed altezza 40px, e con spessore bordo 1px di colore bianco.
< !Htm l>
Notare che, a differenza delle tabelle, l'attributo BORDER è stato completato con SOLID e colore. Questo perchè, in assenza di suddetti attributi, il bordo non risulterà visibile. E' possibile, ovviamente, tracciare un bordo tratteggiato, a pallini, e via dicendo, come è possibile colorarlo nei modi più disparati.
Prima di occuparci del contenuto del box, occupiamoci della sua posizione.
Per meglio comprendere gli attributi della proprietà position, creerò tre box identici, differenziati dal colore dello sfondo.
< !Html >
[
Guardiamo un attimo il codice. Ma come è possibile che i box si trovino uno sotto l'altro, quando, da quanto si legge, avrei voluto affiancarli orizzontalmente? La risposta è molto semplice. Una volta chiuso il tag DIV, è come se ci fosse un "PUNTO E A CAPO" automatico. Quindi, potete perderci la vita intera, ma non riuscirete mai ad affiancare due box semplicemente scrivendoli uno di seguito all'altro!
Qualora volessimo lasciare uno spazio tra un box e l'altro, è sufficiente specificare il valore (in pixel) dell'attributo margin.
< !Html >
Come risulta evidente, attorno al primo box si è creato un margine di 5 pixel da tutto ciò che lo circonda.
Volendo, possiamo imporre la creazione di un margine SOLO su uno dei quattro lati. Ad esempio, voglio che il primo box abbia un margine sinistro di 5px.
< !Html >
Come si nota dal codice, ho imposto che margin si riferisca al solo lato sinistro (margin-left).
In sintesi, ecco le quattro possibilità di posizionamento:
margin-left: margine sinistro
margin-right: margine destro
margin-top: margine superiore
margin-bottom: margine inferiore
< !Html >
Impostando invece margin:auto, il box si posizionerà automaticamente al centro della pagina. E' ovviamente possibile deciderne la distanza dai quattro lati.
< !Html >
Analizziamo adesso il contenuto del box.
Quando supera le dimensioni del contenitore, ad esempio inserendo un'immagine più larga della larghezza definita, incappiamo in comportamenti differenti, a seconda del browser utilizzato. Alcuni ridimensionano il box per adattarlo, altri se ne fregano altamente...
Al fine di evitare, dunque, errori di visualizzazione, è possibile regolare questo comportamento grazie all'utilissima proprietà overflow (trabocco) che accetta gli attributi: visible (predefinito), hidden (nascosto), auto (appaiono le barre di scorrimento soltanto se necessario), scroll (appaiono SEMPRE le barre di scorrimento sempre).
Vediamo caso per caso.
PRIMA PARTE FINITA È ANCORA IN FASE DI SVILUPPO, A BREVE SARA' COMPLETA.
Fonte: IlPaioloMagico
Andiamo ad iniziare.
Dichiarazione nel foglio di stile:
< !Htm l>
< !Htm l>
Per richiamarlo nella nostra pagina web:
< !Htm l>
Ciò vuol dire che il nostro box, se richiamato, avrà SEMPRE larghezza 350px, altezza 150px, e via dicendo.
La maggiorparte delle volte, parlando in termini di forum, le skin di rado comprendono dichiarazioni sui box (salvo quando una skin preveda l'uso di un CONTAINER, ossia, quindi, di un BOX). Si limitano, magari, ad impostare gli attributi delle barre di scorrimento (anche se tali attributi non vengono letti da tutti i browser...)
Dunque, non ci resta che costruire il nostro box da soli. Preparatevi a digitare follemente sulla tastiera xD
Innanzitutto, ecco una FIGURA riassuntiva degli attributi più usati di un BOX (fig. by
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Per creare il nostro box, dobbiamo inserirlo, a sua volta, in un contenitore. Questo contenitore è rappresentato dal tag DIV.
Tutto quello che è incluso fra il tag iniziale DIV e quello di chiusura /DIV reagisce secondo gli stili o comandi che gli sono stati associati. Nel caso contengano stili css possono essere ereditari.
Creiamo un semplice box di larghezza 200px ed altezza 40px, e con spessore bordo 1px di colore bianco.
< !Htm l>
Notare che, a differenza delle tabelle, l'attributo BORDER è stato completato con SOLID e colore. Questo perchè, in assenza di suddetti attributi, il bordo non risulterà visibile. E' possibile, ovviamente, tracciare un bordo tratteggiato, a pallini, e via dicendo, come è possibile colorarlo nei modi più disparati.
Prima di occuparci del contenuto del box, occupiamoci della sua posizione.
Per meglio comprendere gli attributi della proprietà position, creerò tre box identici, differenziati dal colore dello sfondo.
< !Html >
[
Guardiamo un attimo il codice. Ma come è possibile che i box si trovino uno sotto l'altro, quando, da quanto si legge, avrei voluto affiancarli orizzontalmente? La risposta è molto semplice. Una volta chiuso il tag DIV, è come se ci fosse un "PUNTO E A CAPO" automatico. Quindi, potete perderci la vita intera, ma non riuscirete mai ad affiancare due box semplicemente scrivendoli uno di seguito all'altro!
Qualora volessimo lasciare uno spazio tra un box e l'altro, è sufficiente specificare il valore (in pixel) dell'attributo margin.
< !Html >
Come risulta evidente, attorno al primo box si è creato un margine di 5 pixel da tutto ciò che lo circonda.
Volendo, possiamo imporre la creazione di un margine SOLO su uno dei quattro lati. Ad esempio, voglio che il primo box abbia un margine sinistro di 5px.
< !Html >
Come si nota dal codice, ho imposto che margin si riferisca al solo lato sinistro (margin-left).
In sintesi, ecco le quattro possibilità di posizionamento:
margin-left: margine sinistro
margin-right: margine destro
margin-top: margine superiore
margin-bottom: margine inferiore
< !Html >
Impostando invece margin:auto, il box si posizionerà automaticamente al centro della pagina. E' ovviamente possibile deciderne la distanza dai quattro lati.
< !Html >
Analizziamo adesso il contenuto del box.
Quando supera le dimensioni del contenitore, ad esempio inserendo un'immagine più larga della larghezza definita, incappiamo in comportamenti differenti, a seconda del browser utilizzato. Alcuni ridimensionano il box per adattarlo, altri se ne fregano altamente...
Al fine di evitare, dunque, errori di visualizzazione, è possibile regolare questo comportamento grazie all'utilissima proprietà overflow (trabocco) che accetta gli attributi: visible (predefinito), hidden (nascosto), auto (appaiono le barre di scorrimento soltanto se necessario), scroll (appaiono SEMPRE le barre di scorrimento sempre).
Vediamo caso per caso.
PRIMA PARTE FINITA È ANCORA IN FASE DI SVILUPPO, A BREVE SARA' COMPLETA.
Fonte: IlPaioloMagico
Ultima modifica:
