Glossaire

Multicolonnage
[[include include:languages pagename=Multi-Colums]]

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.

  1. ~~~~
  2. [[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

Tiré des pages de Snippets

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]]

Tags: avancé colonne div

Bookmark and Share

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License