Multi-column, présentation différente par page

Version imprimable

17/09/2015, 21h37
Slayes

Multi-column, présentation différente par page
Bonjour à tous,

Je bute sur la recherche d'une méthode CSS pour mettre en place une mise en page.
Le code html serait quelque chose du genre :
Code:

1 2 3 4 5 <div class="column"> <div>Long texte + image</div> <div>Long texte de différentes longueurs + image</div> ....etc </div>
Et obtenir à l'impression du document
Sur la première page :
- une colonne à gauche de la page de 200px
- une colonne à droite de la page de 200px
Puis sur la 2eme
- plusieurs colonnes les unes à la suite des autres ( affichage classique du -moz-column )

J'ai fais différents tests à base de "-moz-columns" mais je n'arrive à rien ....

Quelqu'un aurait une idée ?
17/09/2015, 22h41
Muchos

Bonjour,
Qu'avez-vous produit comme CSS pour obtenir le résultat voulu ?
18/09/2015, 08h17
Slayes
J'ai essayé :
Code:

1 2 3 4 .column {-webkit-columns: 2;-moz-columns: 2;column: 2; } .column div {padding-right: 30%;} @page :not(:first) .column {-webkit-columns: 4;-moz-columns: 4;column: 4; }
Mais le résultat est toujours sur 2 colonnes, l'idée serait de pouvoir indiquer :
- que la page 1 comporte 2 colonnes
- que les autres pages 4 colonnes
- que pour la page 1, la première colonne est fixée à gauche et que la 2eme est fixée à droite.
18/09/2015, 11h30
Slayes

Pour contourner le problème, est-il possible de spécifier des styles sur la 2ème colonne (de cibler la 2ème colonne) ?
Je n'ai pas trouvé de règle CSS permettant de le faire.
18/09/2015, 13h29
Muchos

D'abord, la propriété CSS s'appelle columns.
Ensuite, je doute que sélecteur @page puisse être utilisé pour modifier le nombre de colonnes.

Cela dit, je propose simplement d'utiliser une classe pour cibler les deux premières colonnes.
18/09/2015, 13h55
Slayes

Merci pour votre réponse.

Vous avez raison le sélecteur @page ne peux résoudre le problème. De plus la mise en page ne convient pas non plus avec la propriété columns.
Je dois mettre en place un système pour imprimer des topoguides :
- impression d'une map au centre de la première page avec des marqueurs numérotés
- puis toujours sur la première, dans la colonne de gauche, reprise des infos détaillées liées aux marqueurs ( infos = texte + photo + picto .. etc hauteur dynamique )
- quand la colonne de gauche est pleine, remplissage d'une colonne fixée à droite
- quand la colonne de droite est pleine, affichage sur les pages suivantes dans 5 colonnes.

Je ne peux pas générer du html en php car les infos par marqueur sont dynamiques et complétement différentes, donc je peux estimer leur hauteur.

Je devrais peut être m'orienter vers le JS

Bonjour Slayes,

Connaissez-vous "flexbox" ?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Je pense que les 2 premiers schémas vont vous convaincre... :P

Voici un exemple :

flexbox.html

Code:

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
30
31
32
33
34
35
<!doctype html>
 
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS flexbox</title>
	<meta name="description" content="The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic">
	<meta name="author" content="Nicolas Casel">
	<link rel="stylesheet" href="flexbox.css">
</head>
 
<body>
	<ul class="navigation">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
 
	<p>Source:<br /><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" alt="Page source for this tutorial">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>
 
	<div class="parent"><div class="child">Consoles</div></div>
 
	<ul class="flex-container">
		<li class="flex-item">NES</li>
		<li class="flex-item">Master System</li>
		<li class="flex-item">Super Nintendo</li>
		<li class="flex-item">Megadrive</li>
		<li class="flex-item">Game Boy</li>
		<li class="flex-item">Game Gear</li>
	</ul>
 
 
</body>
</html>

flexbox.css

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
body {
    font-family: Calibri, Arial
}
 
.parent {
  display: flex;
  height: 100px;
  margin: 50px 0;
  padding: 2px;
  background-color: blue;
  color: orange;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  text-transform: uppercase
}
 
.child {
  width: 100px;
  height: 100px;
  margin: auto;  /* Magic! */
}
 
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
 
.flex-item {
  background: tomato;
  padding: 5px;
  width: 220px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
 
.navigation {
  list-style: none;
  margin: 0;
  background: deepskyblue;
 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 
  -webkit-flex-flow: row wrap;
  justify-content: flex-end
}
 
.navigation a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 1em
}
 
.navigation a:hover{
  background: rgb(102, 204, 255)
}
 
@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around
}}
 
@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0
  }
 
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1)
  }
 
  .navigation li:last-of-type a {
    border-bottom: none
  }
}

Qu'en pensez-vous ?

21/09/2015, 06h14
Slayes

Merci pour votre réponse,

J'avais découvert flexbox, il y a 2 ou 3 jours, il a l'air très intéressant et plus complet/simple que le système à base de clear/float.
Je ne suis pas certain de pouvoir jouer avec un nombre de colonne différente par page.

Si, c'est possible, il vous faut alors créer une "configuration" flexbox par page. A priori, seul ce bout de code CSS sera particulier à chaque page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .flex-item { background: tomato; padding: 5px; width: 220px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 2em; text-align: center; }