Discussion :

[Slayes]

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]

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

[Slayes]

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]

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]

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]

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