Div
Di seguito troverete diversi esempi che spiegano come utilizzare le div per realizzare colonne multiple. Potete fare il copia-incolla del codice ed aggiungerlo secondo le vostre necessità.
Galleggiamento - contornamento
Per fare in modo che il testo e gli altri oggetti girino attorno (galleggiamento) ai bordi di un div o di una immagine dovete attribuire al medesimo div (o immagine) la proprietà «float ». Quando utilizzate questa proprietà, dovete poi annullarla alla fine del codice mediante uno dei modi sottoindicati.
Inoltre dovete fare delle prove per verificare quale dei due modi opera meglio nel vostro caso.
- ~~~~
- [[div style="clear:right;height:1px;"]] [[/div]]
Nei casi indicati di seguito, nell'esempio 1, l'espressione ~~~~ non funziona bene, mentre funziona benissimo nell'esempio 3.
Esempio 1
Un modo di creare colonne multiple consiste nell'impiego dei div.
Colonne ripetute:
un
un
un
deux
deux
deux
trois
trois
trois
quatre
quatre
quatre
cinq
cinq
cinq
six
six
six
Affinchè le colonne della dodicesima line si collochino al di sotto delle prime 3, dovete annullare il galleggiamento tra i due gruppi utilizzando l'espressione:
[[div style="clear:right;height:1px;"]]
Ecco il codice impiegato per generare questa struttura.
Osservate che l'ordine delle colonne dipende dal tipo di galleggiamento- contornamento (sinistro o destro) che avete scelto.
[[div style="float:right;width:33%;"]]
un
un
un
[[/div]]
[[div style="float:right;width:33%;"]]
deux
deux
deux
[[/div]]
[[div style="float:right;width:33%;"]]
trois
trois
trois
[[/div]]
[[div style="clear:right;height:1px;"]]
[[/div]]
[[div style="float:left;width:33%;"]]
quatre
quatre
quatre
[[/div]]
[[div style="float:left;width:33%;"]]
cinq
cinq
cinq
[[/div]]
[[div style="float:left;width:33%;"]]
six
six
six
[[/div]]
[[div style="clear:right;height:10px;"]]
[[/div]]
Esempio 2
Box 1
Contenuto del primo box
Box 2
Contenuto del secondo box
Box 3
Contenuto del terzo box
Box 4
Contenuto del quarto box
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#fdf5e6;padding:5px;float:left;margin-bottom:4px"]]
**Box 1**
Contenuto del primo box
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:right;margin-bottom:4px"]]
**Box 2**
Contenuto del secondo box
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
**Boix 3**
Contenuto del terzo box
[[/div]]
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#ffe4e1;padding:5px;float:right;margin-bottom:4px;"]]
**Boix 4**
Contenuto del quarto box
[[/div]]
[[div style="clear:right;height:1px;"]]
[[/div]]
Esempio 3
Questo esempio è basato su quello precedente, con qualche aggiustamento delle variabili e l'inserimento di tabelle nei box.
Osservate che la variabile "height" (altezza) può provocare la sparizione di alcuni dati, quando la finestra del browser viene ridimensionata.
Variables Used: Experiment with | |
---|---|
Border colour adjustment | "border:solid 1px #fff; |
Border width adjustment | width:45%; |
Border height adjustment | height:35em; |
Background Colour adjustment | background:#ffffff |
Padding adjustment | padding:5px |
Position adjustment | float:left |
Margin Bottom adjustment | margin-bottom:4px |
General Information | |
---|---|
UID | |
ID | 2 |
Continent | e |
Country | NL |
Original Name | European parliamentary elections |
English Name | missing |
Level | 1 |
Binding | Yes |
Shadow election | no |
Start Date | 38139 |
End Date | 38148 |
Election Period | 9 |
When did the electronic vote cast take place? | Before and during Election Period |
Available channels | |
---|---|
Polling Place | 1 |
Postal Voting | 1 |
Counting Machine | 0 |
Voting Machine | 1 |
Networked Voting machine | 0 |
Kiosk Voting | 0 |
Remote Electronic Voting | 1 |
Software | missing |
Main Provider | LogicaCMG |
User name and Password | 0 |
TAN | 1 |
Signature Card | 0 |
Biometric properties | 0 |
Other | 0 |
Statistics | |
---|---|
Eligible Voters | 16000 |
Votes | missing |
Eligible Electronic Voters | 7196 |
Electronic Votes | 2253 |
Turnout Groups | C |
Turnout | missing |
Electronic Turnout | missing |
Anonymity | |
---|---|
Separate Machines | 0 |
Pre-election | 1 |
Election | 0 |
Post Casting | 0 |
Other | missing |
Comments | Leotine Leober |
Grazie a http://e-voting.wikidot.com/ per aver consentito l'uso delle loro tabelle.
[[div style="border:solid 1px #fff;width:45%;height:35em;background:#ffffff;padding:5px;float:left;margin-bottom:4px"]]
||||~ General Information||
|| UID|| ||
|| ID|| 2||
|| Continent|| e||
|| Country|| NL||
|| Original Name|| European parliamentary elections||
|| English Name|| missing||
|| Level|| 1||
|| Binding|| Yes||
|| Shadow election|| no||
|| Start Date|| 38139||
|| End Date|| 38148||
|| Election Period|| 9||
|| When did the electronic vote cast take place?|| Before and during Election Period||
[[/div]]
[[div style="border:solid 1px #fff;width:45%;height:35em;background:#fff;padding:5px;float:left;margin-bottom:4px"]]
||||~ Available channels||
|| Polling Place|| 1||
|| Postal Voting|| 1||
|| Counting Machine|| 0||
|| Voting Machine|| 1||
|| Networked Voting machine|| 0||
|| Kiosk Voting|| 0||
|| Remote Electronic Voting|| 1||
|| Software|| missing||
|| Main Provider|| LogicaCMG||
|| User name and Password|| 0||
|| TAN|| 1||
|| Signature Card|| 0||
|| Biometric properties|| 0||
|| Other|| 0||
[[/div]]
[[div style="border:solid 1px #fff;width:45%;height:20em;background:#fff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Statistics||
|| Eligible Voters|| 16000||
|| Votes|| missing||
|| Eligible Electronic Voters|| 7196||
|| Electronic Votes|| 2253||
|| Turnout Groups|| C||
|| Turnout|| missing||
|| Electronic Turnout|| missing||
[[/div]]
[[div style="border:solid 1px #fff;width:45%;height:20em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Anonymity||
|| Separate Machines|| 0||
|| Pre-election|| 1||
|| Election|| 0||
|| Post Casting || 0||
|| Other|| missing||
|| Comments|| Leotine Leober||
[[/div]]