Div
Ci-dessous vous trouverez plusieurs exemples qui décrivent comment utiliser des div pour réaliser du multicolonnage. Vous pouvez copier-coller le code et l’ajuster à vos propres besoins.
Detourage (Float)
Pour faire en sorte que les lignes de textes et les autres objets détourent les bords d’une div ou d’une image vous devez lui attribuer la propriété « float ». Chaque fous que vous avez utilisé cette propriété vous devez l’annuler à la fin de votre code par un des deux moyens ci-dessous. Vous devez essayer pour voir la quelle des deux marche le mieux dans votre cas.
- ~~~~
- [[div style="clear:right;height:1px;"]] [[/div]]
Ci-dessous vous trouverez plusieurs exemples qui décrivent comment utiliser des div pour réaliser du multicolonnage. Vous pouvez copier-coller le code et l’ajuster à vos propres besoins.
Dans l’exemple 1, ~~~~ ne marche pas très bien mais dans l’exemple 3 il marche bien.
Exemple 1
Une façon de créer du multicolonnage et d’utiliser des div
Colonnes répétées :
un
un
un
deux
deux
deux
trois
trois
trois
quatre
quatre
quatre
cinq
cinq
cinq
six
six
six
Pour que les colonnes de la deuxième ligne se placent en dessous des 3 premieres vous devez annuler le détourage entre les deux groupes en utilisant :
[[div style="clear:right;height:1px;"]]
Voici le code utilisé pour générer cette structure.
Notez que l’ordre des colonnes dépends du type de détourage (gauche ou droite ), que vous avez choisi.
[[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]]Exemple 2
Boite 1
Contenu de la première boite
Boite 2
Contenu de la seconde boite
Boite 3
Contenu de la troisième boite
Boite 4
Contenu de la quatrième boite
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#fdf5e6;padding:5px;float:left;margin-bottom:4px"]]
**Boite 1**
Contenu de la première boite
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:right;margin-bottom:4px"]]
**Boite 2**
Contenu de la seconde boite
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
**Boite 3**
Contenu de la troisième boite
[[/div]]
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#ffe4e1;padding:5px;float:right;margin-bottom:4px;"]]
**Boite 4**
Contenu de la quatrième boite
[[/div]]
[[div style="clear:right;height:1px;"]]
[[/div]]Exemple 3
Cet exemple est base sur le précédent, quelques petits ajustements puis l’insertion de tableaux dans chaque cellule.
Notez que le fait de fixer la hauteur peut conduire à la disparition de certaines données lors du rétrécissement de l’écran.
| 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 |
Marci à http://e-voting.wikidot.com/ pour avoir utilisé leurs tables.
[[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]]