In questa esercitazione mostreremo il codice degli esempi mostrati nella lezione in modo che lo studente possa ampliarli o modificarli a piacere.
Da questo punto in avanti il documento è diviso in due sezione di uguale ampiezza.
Le due sezioni possono essere essere utilizzate come caselle di testo affiancate in cui il testo scorre dall'alto in basso e poi da sinistra a destra. Oppure una delle due sezioni può essere utilizzata per commentare o spiegare i contenuti dell'altra.
Come esempio, utilizzo la sezione di sinistra per un testo scritto in italiano, e quella di destra per la sua traduzione in inglese ottenuta con Google Traduttore.
La lunghezza dei due testi sarà, molto probabilmente, diversa. Per mantenere le due sezioni nella stessa schermata potremmo assegnare ad esse una medesima altezza e dotarle di barre di scorrimento verticali.
Creare modelli, a fronte di uno sforzo iniziale, ci consentirà di risparmiare tempo, definire uno stile personale, standardizzare la qualità dei documenti, concentrarsi sul contenuto.
La proprieta di CSS che consente di applicare barre di scorrimento ad un contenitore è overflow. overflow è una scorciatoia per le proprietà overflow-x e overflow-y che consentono rispettivamente l'applicazione di una barra di scorrimento orizzontale e di una barra di scorrimento verticale.
As an example, I use the left section for a text written in Italian, and the right section for its English translation obtained with Google Translate.
The length of the two texts will most likely be different. To keep the two sections on the same screen we could assign them the same height and equip them with vertical scroll bars.
Creating templates, with an initial effort, allows us to save time, define a personal style, standardize the quality of documents, focus on the content.
The property of CSS that allows you to apply scroll bars to a container is overflow . overflow is a shortcut for le overflow-x and overflow-y properties that respectively allow the application of a horizontal scroll bar and a vertical scroll bar.
Nella sezione di sinistra riporto il codice HTML che fornisce la struttura al contenitore doppio oggetto di questo modello e il relativo codice CSS. Nella sezione di destra commento il codice a fronte.
<div class="doppia"> <h2>Intestazione della sezione</h2> <p>Abstract ......</p> <div class="sinistra"></div> <h3>Intestazione</h3> <p>Contenuto ....</p> </div> <div class="destra"></div> <h3>Intestazione</h3> <p>Contenuto ....</p> </div> </div>
.doppia{
clear:both;
padding-top:1em;
margin-top:1em;
background-color:lime;
border-style:solid;
border-width:1px;
height:90vh;
}
.doppia h2, h3{
text-align:center;
}
.doppia p{
padding-left:1em;
padding-right:1em;
text-indent:1em;
font-size:large;
}
.sinistra{
position:relative;
width:50%;
float:left;
overflow:auto;
background-color:aqua;
height:60vh;
}
.destra{
position:relative;
width:50%;
float:left;
overflow:auto;
background-color:teal;
height:60vh;
}
In realtà il codice HTML è piuttosto chiaro: definisce una struttura consistente in un contenitore, l'elemento div di class="doppia" con all'interno due altri contenitori di tipo div di classe rispettivamente sinistra e destra.
Gli elementi di intestazione h2 e h3 e gli elementi di tipo p li ho inseriti come esempio dei contenuti che nella pratica possono essere elementi di tipo qualsiasi.
Un po più interessante è il codice CSS.
I colori e i bordi sono stati assegnati ai diversi contenitori per evidenziarli. Per verificare la propria comprensione delle altre proprietà CSS, lasciando inalterati colori e bordi, si provi a modificarne i valori e a confrontare il risultato atteso con le proprie previsioni.
clear:both; interrompe le eventuali proprietà float assegnate ad oggetti precedentemente visualizzati. In questo caso non serve. Siete in grado di dire perchè in questo caso non serve? Se avete qualche dubbio provate ad eliminare le proprietà height dai contenitori .doppia, .sinistra e .destra e poi togliete la property clear.
Gli oggetti .sinistra e .destra hanno entrambi width:50%;. Siete in grado di prevedere cosa succederebbe aggiungendo ad uno qualsiasi di esso un bordo dello spessore di un solo pixel?
Questa sezione è destinata a contenere gli appunti personali del lettore.