Menu verticale avec calque Menu vertical trois niveaux Le corps Le pied de page Les titres Les paragraphes Les colonnes.
Les colonnes.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Les colonnes. | C'est « float:left » et « float:right » qui déterminent le positionnement... |
| Des colonnes égales. | Plusieurs colonnes de même hauteur... |
Les colonnes.
Vous pouvez insérer votre texte à l'intérieur de colonnes à l'aide le la balise <div>. La procédure est somme toute assez simple.
Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div class="colonne">
<div class="gauche">
<p>
Vous pouvez écrire votre texte comme vous le feriez normalement dans votre éditeur de texte, sans tenir compte
des sauts de lignes. Les éditeurs comme Notepad++ ne sont pas des traitements de texte tels que Word par exemple.
Les paramètres des colonnes seront déterminées par le CSS et non par la disposition du texte dans l'éditeur. </p>
<p>
Si vous désirez insérer une image, assurez-vous que ses dimensions soient adaptées à l'espace ou plus petites
que la colonne à laquelle vous la destinez. </p>
</div>
<div class="droite">
<p>
Les colonnes peuvent se voir attribuer une couleur en arrière plan différente que celle que vous utilisez
dans le reste de la page. Vous pouvez en changer l'alignement, la couleur du texte, la police par défaut
ou tous autres paramètres que vous jugerez utiles. </p>
<p>
La largeur des colonnes dépend de l'espace que vous avez dans le corps. Pour ce faire nous n'appliquerons la
largeur des colonnes qu'une fois votre texte écrit. Vous pourrez agencer la disposition des colonnes grâce à
margin et padding. </p>
</div>
</div>
|
Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.colonne {
width:650px;
height:270px;
border:1px solid #000
}
.gauche {
float:left;
width:300px;
padding:10px;
background-color:#ccc
}
.droite {
float:right;
width:300px;
padding:10px;
background-color:#ccc
}
|
Dans la portion HTML nous avons le conteneur principal, colonne puis deux conteneurs secondaires, gauche et droite. Le conteneur principal détermine l'espace réservé aux colonnes et pour les besoins de la cause, est entouré d'une bordure. C'est float:left et float:right qui déterminent le positionnement des colonnes.
Des colonnes de la même hauteur.
La procédure pour insérer une série de colonnes mentionner plus haut est ajustable au contenu c'est-à-dire que si le contenue de la colonnes de droite est plus court que la colonne de gauche, la hauteur des deux colonnes ne sera pas égale. Pour pallier ce contretemps, nous allons créer une division que nous nommerons wrapper.
Cette division permet d'enveloppé un contenu ensemble.
Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<div class="wrapper">
<div class="gauche">
<p>
Vous pouvez écrire votre texte comme vous le feriez normalement dans votre éditeur de texte, sans tenir compte
des sauts de lignes. Les éditeurs comme Notepad++ ne sont pas des traitements de texte tels que Word par exemple.
Les paramètres des colonnes seront déterminées par le CSS et non par la disposition du texte dans l'éditeur. </p>
<p>
Si vous désirez insérer une image, assurez-vous que ses dimensions soient adaptées à l'espace ou plus petites
que la colonne à laquelle vous la destinez. </p>
<p>
Si vous répétez le paragraphe plusieurs fois, remarquez que l'arrière-plan du conteneur de droit s'ajuste à la
même hauteur que celui de gauche.</p>
</div>
<div class="droite">
<p>
Les colonnes peuvent se voir attribuer une couleur en arrière plan différente que celle que vous utilisez
dans le reste de la page. Vous pouvez en changer l'alignement, la couleur du texte, la police par défaut
ou tous autres paramètres que vous jugerez utiles. </p>
<p>
La largeur des colonnes dépend de l'espace que vous avez dans le corps. Pour ce faire nous n'appliquerons la
largeur des colonnes qu'une fois votre texte écrit. Vous pourrez agencer la disposition des colonnes grâce à
margin et padding. </p>
</div>
</div>
|
Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.wrapper {
width:650px;
overflow:hidden;
margin:0 auto
}
.wrapper p{
padding:10px
}
.gauche {
width:300px;
height:100%;
overflow:hidden;
padding:0 0 2000px 0;
margin:0 0 -2000px;
float:left;
background-color:#ccc
}
.droite {
width:300px;
height:100%;
overflow:hidden;
padding:0 0 2000px 0;
margin:0 0 -2000px;
float:right;
background-color:#ccc
}
|
Ajouter ce site à vos favoris
