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

**Slayes** · 17/09/2015, 22h37

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Muchos** · 17/09/2015, 23h41

Bonjour,
Qu'avez-vous produit comme CSS pour obtenir le résultat voulu ?

**Slayes** · 18/09/2015, 09h17

J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Slayes** · 18/09/2015, 12h30

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.

**Muchos** · 18/09/2015, 14h29

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.

**Slayes** · 18/09/2015, 14h55

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

**gazza** · 19/09/2015, 13h13

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

Voici un exemple :

flexbox.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Slayes** · 21/09/2015, 07h14

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.

**gazza** · 23/09/2015, 18h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

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

CSS

Discussions similaires

Partager

Partager