.:Divinità:.
- Group
- Precursore
- Posts
- 26,519
- Status
- Anonymous
|
|
Questa guida non vuole essere un insegnamento della teoria degli HTML con annessi e connessi, ma solamente un tutorial per la creazione di 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.
Qualora avessimo già definito la struttura del BOX nei CSS, allora non ci resta nient'altro da fare che richiamarlo.
Un rapido esempio:
Dichiarazione nel foglio di stile: HTML #box {width: 350px; height: 150px; padding: 20px; border: 5px solid; margin: 20px;} HTML <div id="box">CONTENUTO BOX</div>
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 www.web-link.it)
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.HTML <div style="width:200px; height:40px; border:1px solid #FFF">CONTENUTO BOX...</div>
CONTENUTO BOX CONTENUTO BOX CONTENUTO BOX CONTENUTO BOX
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.
CONTENUTO BOX CONTENUTO BOX CONTENUTO BOX HTML <div style="width:150px; border:1px solid #FFF; background-color:#FFEC8E">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8EFF8E">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8E8EFF">CONTENUTO BOX</div>
Qualora volessimo lasciare uno spazio tra un box e l'altro, è sufficiente specificare il valore (in pixel) dell'attributo margin.
CONTENUTO BOX CONTENUTO BOX CONTENUTO BOX HTML <div style="width:150px; border:1px solid #FFF; background-color:#FFEC8E; margin:5px">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8EFF8E">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8E8EFF">CONTENUTO BOX</div>
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.
CONTENUTO BOX CONTENUTO BOX CONTENUTO BOX HTML <div style="width:150px; border:1px solid #FFF; background-color:#FFEC8E; margin-left:5px">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8EFF8E">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8E8EFF">CONTENUTO BOX</div>
In sintesi, ecco le quattro possibilità di posizionamento:
margin-left: margine sinistro
margin-right: margine destro
margin-top: margine superiore
margin-bottom: margine inferiore
E' ovviamente possibile combinarle tra loro, come nel seguente esempio:
CONTENUTO BOX CONTENUTO BOX CONTENUTO BOX HTML <div style="width:150px; border:1px solid #FFF; background-color:#FFEC8E; margin-left:5px; margin-bottom:3px">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8EFF8E; margin-top: 10px">CONTENUTO BOX</div> <div style="width:150px; border:1px solid #FFF; background-color:#8E8EFF; margin-left:15px">CONTENUTO BOX</div>
Impostando invece margin:auto, il box si posizionerà automaticamente al centro della pagina. E' ovviamente possibile deciderne la distanza dai quattro lati.
CONTENUTO BOX HTML <div style="width:150px; border:1px solid #FFF; background-color:#FFEC8E; margin: auto">CONTENUTO BOX</div>
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.
• OVERFLOW: VISIBLE
HTML <div style="overflow: visible; width:200px; height:120px; border:3px solid #FF0000"><img src="http://i54.tinypic.com/2ivenmd.jpg" border="0" alt="SONO UN'IMMAGINE"></div>
• OVERFLOW: HIDDEN
HTML <div style="overflow: hidden; width:200px; height:120px; border:3px solid #FF0000"><img src="http://i54.tinypic.com/2ivenmd.jpg" border="0" alt="SONO UN'IMMAGINE"></div>
• OVERFLOW: AUTO
HTML <div style="overflow: auto; width:200px; height:120px; border:3px solid #FF0000"><img src="http://i54.tinypic.com/2ivenmd.jpg" border="0" alt="SONO UN'IMMAGINE"></div>
• OVERFLOW: SCROLL
HTML <div style="overflow: scroll; width:200px; height:120px; border:3px solid #FF0000"><img src="http://i54.tinypic.com/2ivenmd.jpg" border="0" alt="SONO UN'IMMAGINE"></div>
Diamo adesso un rapido sguardo alle possibilità di riempimento di un BOX, dove per 'riempimento' intendo lo sfondo.
Riempimento con COLORE
HTML <div style="background-color:valore"></div>
Riempimento con IMMAGINE
HTML <div style="background-image: url(LINK IMMAGINE)"></div>
Nel caso del riempimento con un'immagine, è possibile specificare come disporla affinchè riempia o meno l'intero box (in un sito web, l'intera pagina...)
background-repeat: repeat | repeat-x | repeat-y | no-repeat
repeat indica che l'immagine deve essere replicata in orizzontale ed in verticale.
repeat-x deve essere replicata soltanto in orizzontale.
repeat-y deve essere replicata soltanto in verticale.
no-repeat indica che l'immagine non deve essere replicata.
Come esempio, utilizzerò questa simpatica casetta: 
HTML <div style="width:400px; height:80px; border:1px solid #FFF; background-image: url(http://www.web-link.it/css/home.gif); background-repeat: repeat"></div>
HTML <div style="width:400px; height:80px; border:1px solid #FFF; background-image: url(http://www.web-link.it/css/home.gif); background-repeat: repeat-x"></div>
HTML <div style="width:400px; height:80px; border:1px solid #FFF; background-image: url(http://www.web-link.it/css/home.gif); background-repeat: repeat-y"></div>
HTML <div style="width:400px; height:80px; border:1px solid #FFF; background-image: url(http://www.web-link.it/css/home.gif); background-repeat: no-repeat"></div>
Qualora volessimo riempire il nostro box con un contenuto testuale, e personalizzarlo, sarà necessario impostare i vari attributi del testo. Di questo, parlo nell'apposita guida, presente sempre in questa sezione!
|
|
.
Web