Proprietà Float

Abbiamo affrontato in precedenza alcuni concetti fondamentali relativi ai box container:

1. tutti i tag html sono considerati dei box contenitori;
2. il contenuto di un box è al centro. Intorno al contenuto si trova un'area chiamata padding, che è lo spazio tra il contenuto e il bordo. Il bordo è intorno al padding. E vicino al bordo si trova il margine (margin), che è lo spazio tra il box e gli altri box che si trovano vicino a esso;
3. i box vengono visualizzati sempre uno sopra l'altro.

E allora come fare a posizionare i box uno accanto all'altro?

Per visualizzare i box uno accanto all'altro è necessario affidarsi ai fogli di stile e alla proprietà float creando cosi' i cosiddetti box galleggianti (appunto floats).

I floats box sono contenitori che vengono rimossi dal normale flusso del documento (dall'alto verso il basso) e vengono spostati a sinistra o a destra del blocco contenitore, mentre il resto del testo si dispone intorno a loro.

I floats box sono creati utilizzando la proprietà float che prevede tre parametri: left, right e none (sinistra, destra e nessuno). Per default la proprietà float ha il valore none. Quando si imposta la proprietà float per un elemento html (la useremo per il tag <div>) si deve necessariamente impostare la proprietà width dell'elemento stesso.

Facciamo un esempio usando il tag <p> :

Supponiamo di avere questo codice html in una pagina

<DIV>
<P ID="uno">Questo è un float box. Non segue il normale flusso del documento. 
<br />
</P>
<P ID="due">Questo è un altro box successivo al primo che viene posizionato
   normalmente. 
Il suo contenuto viene spostato per effetto del float box
</P>    
<P ID="tre">Questo altro box è solo coperto parzialmente dal float box. 
Il testo ruota attorno al float box per le prime righe, 
poi si posiziona normalmente.
</P>   
</DIV>  

In questo codice vediamo un container div all'interno del quale si trovano tre paragrafi ad uno dei quali viene applicata la proprietà float.

Ora vediamo come usare la proprietà float in questo foglio di stile collegato alla pagine contenente il codice precedente:

BODY {background: #000000; width: 400px; }  
DIV {margin: 1em;   padding: 1em;   background: #00CC99; }  
P {   margin: 1em;  }  
#uno { 
float: left;   
width: 40%;   
margin: 0.5em;   
background: #003399;   
border: solid thin #D7040B;   
color: #FFFFFF;  
}

Ed ecco il risultato:

Come vedete il primo box container <P ID="uno"> viene posizionato nella pagina e i successivi box <p> vengono posizionati non seguendo il normale flusso del documento (un box sotto l'altro) ma partendo dalla destra del primo box e ruotando attorno ad esso.

Vediamo ora cosa succede ad applicare la proprietà float a più box container contemporaneamente.
Riprendendo l'esempio di prima modifichiamo il foglio di stile come segue:

BODY {   background: #000000;  }
DIV {
margin: 1em;
padding: 1em;
background: #00CC99;  
}  
P {   
margin: 1em;  
}  
#uno {  
float: left;   
width: 25%;   
margin: 0.5em;   
background: #003399;   
border: solid thin #D7040B;   
color: #FFFFFF;  
}  
#due {  
float: left;   
width: 45%;   
margin: 0.5em;   
background: #003399;   
border: solid thin #D7040B;   
color: #FFFFFF;  
}

Questo è il risultato:

In questo caso il secondo box container <P ID="due"> viene posizionato a destra del primo e provoca il posizionamento del terzo box alla sua destra.
Se adesso nel foglio di stile precedente proviamo ad aumentare la larghezza del secondo box container protandola da 45% al 70% otterremo l'effetto di veder scivolare il secondo box sotto il primo.

 

Questo perchè il secondo box non avrà abbastanza spazio per stare accanto al primo e verrà posizionato sotto il primo box.

Proprietà Clear

Se desideriamo che un box container non si disponga a contorno di un altro (come nel primo caso) dobbiamo usare la proprietà clear in questo modo:

BODY {   
background: #000000;  
}  
DIV {    
margin: 1em;   
padding: 1em;   
background: #00CC99;  
}  
P {   
margin: 1em;  
}  
#uno {   
float: left;   
width: 40%;   
margin: 0.5em;   
background: #003399;   
border: solid thin #D7040B;   
color: #FFFFFF;  
}  
#tre {   
clear: left;  
}

L'effetto sarà il seguente:

Come si vede, rispetto alla prima figura, il terzo box container non contorna il primo ma ne resta completamente distaccato.

In conclusione applicando la proprietà float ad uno o più box container è pissibile modificarne la loro disposizione rispetto al normale flusso del documento.

Esercizio 1 - Primo template

Adesso proviamo a realizzare il primo template per Joomla! Sarà un template molto semplice a due colonne ma senza grafica, solo con i colori. La grafica è comunque possibile aggiungerla in un secondo momento

Iniziamo col disegnare lo schema che vogliamo realizzare:

Come si vede sono presenti 4 contenitori nominati Header, Left, Main Content e Footer contenuti all'interno di un unico contenitore (colorato in verde). Quest'ultimo serve solo a raggrupparli al loro interno e permette di centrare l'intera struttura nella pagina del browser.

Iniziamo a scrivere il codice html che descrive quanto abbiamo disegnato. Ad ogni contenitore DIV che andremo a disegnare assegneremo una classe del foglio di stile che abbia lo stesso nome descritto nello schema:

<body>
<div class="principale">
<div class="header"> Header </div>
<div class="left"> Left </div>
<div class="maincontent"> Main Content </div>
<div class="footer"> Footer </div>
</div>
</body>

Per scriverlo non abbiamo tenuto conto della disposizione ma seguito l'orientamento dall'alto verso il basso e da sinistra verso destra. Il contenitore di classe "principale" è quello colorato di verse e al suo interno abbiamo disposto, uno dopo l'altro, gli altri contenitori.

Così come lo abbiamo scritto però, visualizzandolo in un browser, vedremo i contenitori disposti uno sottto l'altro. E' necessario adesso iniziare a definire il Foglio di Stile del nostro template descrivendo le classi che abbiamo assegnato ad ogni contenitore.

<style>

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
}
.principale{
/*i margini auto insieme a una larghezza centrano la pagina */
width: 800px;
margin: 0 auto;
border: 2px solid #008000;
}
.header {
text-align: center;
background-color:#FF9900;
border: 1px solid #CCCCCC;
width: 100%;
height: 80px;
float:none;
}
.left {
text-align: center;
background-color:#6666CC;
width: 25%;
height: 600px;
float:left;
}
.main-content{
text-align: center;
background-color:#FFCC99;
width: 75%;
height: 600px;
float:left;
}

.footer{
text-align: center;
background-color:#33FF33;
border: 1px solid #CCCCCC;
height: 50px;
clear:left;
}
</style>L'elemento body consente di assegnare le caratteristiche di base al font usato in tutta la pagina.

Al contenitore di classe principale abbiamo assegnato una dimensione di 800 pixel mentre agli altri contenitori abbiamo assegnato un'ampiezza in percentuale. Pechè? Avremmo potuto stabilire delle dimensioni in pixel anche per gli altri contenitori, ad esempio 200px per il contenitore di classe left e 600px per il contenitore di classe maincontent (la somma dei due valori fa 800px). Così facendo però se avessimo aumentato la dimensione del contenitore principale (che contiene tutti gli altri) avremmo dovuto variare in proporzione anche le dimensioni degli altri contenitori (left e maincontent). Esprimendoli in percentuale il problema non sussiste.

Ad ogni classe seono stati applicati dei colori di background e dei bordi colorati solo per differenziarle. Quello che più ci interessa in questo momento è guardare come è stata usata la proprietà float.

Come vedete la proprietà float:left è stata usata nelle classi left e maincontent per modificare la naturale disposizione dei contenitori a cui sono applicate in modo da affiancarli uno all'altro.

Ecco dunque come si presenterà la base del nostro template.

Cosa manca adesso per trasformarlo in un vero template per Joomla?

Semplicemente aggiungere quelle funzioni di Joomla che consentano di inserire all'interno dei contenitore i moduli, i componenti e i contenuti che joomla legge dal database. Queste funzioni fanno parte del cosiddetto Framework di Joomla e sono scritte in questo modo:

<jdoc:include type="tipo_oggetto" name="nome_zona_modulo" />

Riscriviamo allora il codice html inserendo le funzioni del Framework:

<body>
<div class="principale">
<div class="header">
<jdoc:include type="modules" name="header" />
</div>
<div class="left">
<jdoc:include type="modules" name="left" />
</div>
<div class="maincontent">
<jdoc:include type="component" />
</div>
<div class="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</body>

Adesso dovremmo staccare la parte di codice del foglio di stile del template e inserirla in un file che chiameremo template.css. Quello che fino ad ora era un file con estensione html lo rinominiamo in un file con estensione .php

Con una semplice operazione di taglia e incolla togliamo tutto ciò che si trova tra i tag <style> e </style> (che cancelleremo) e inseriamoli in un file di testo che rinomineremo in telmplate.css. Il file che contiene l'html lo rinomineremo con il nome index.php.

Sistemiamo questi due file in una cartella che chiameremo MioTemplate. In questa cartella mettiamo il file index.php e dentro una cartella che chiamermo css (dentro la cartella MioTemplate) metteremo il file template.css.

Nel file index.php aggiungiamo, all'inizio del codice  quello che segue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang="">

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/css/template.css" type="text/css" />
</head>

Con il tag <link> possiamo includere all'interno della nostra pagina il foglio di stile conservato nella cartella css.

Nella realtà il path per raggiungere questo file è un pò più complesso perchè deve tenere conto del percorso reale per raggiungere il file. Per fare questo si usano le variabili php proprie del Framework di joomla. Potremo quendi esprimere il path in due modi:

<link rel="stylesheet" href="/templates/rhuk_milkyway/css/template.css" type="text/css" />

oppure

<link rel="stylesheet" href="/templates//css/template_css.css" type="text/css" media="screen" />

Nel primo caso viene usato $this->baseurl per esprimere l'url del sito. Il path verrà dunque trasformato in:

http://www.miosito.it/templates/rhuk_milkyway/css/template.css

Nel secondo caso viene usato in più $this->template che sostituisce il nome del template in uso (al posto di indicare direttamente il nome della cartella. Il path verrà dunque trasformato allo stesso modo descritto in precedenza. La differenza sta nel fatto che questo metodo è più generico è può essere usato in tutti i template a prescindere dal nome del template stesso.