CSS pour reproduire un style 'rapport PDF' ?

Reekoj
Les bases HTML/CSS

Bonjour,

Voila j'aimerais créer une page html, pour présenter un rapport.
Du coup j'aimerais que cette page ressemble à ce qu'on peut voir sur un powerpoint ou un pdf, c'est à dire divers contenus (tableaux , graphiques,images...) qui sont divisés par page
exemple pris au hasard sur Google : https://www.staffcop.com/images/pdf-report-large.gif

L'idéal serait de mettre au point une classe CSS qui me permettrait de créer une nouvelle "page"
en faisant un simple 

<div id="page1" class="page">
contenu... 
</div>
etc...

Auriez-vous une piste pour arriver à un résultat similiaire ?

7 réponses

keulu

https://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html
https://www.alsacreations.com/astuce/lire/1160-une-feuille-de-styles-de-base-pour-le-media-print.html

je pense pas que tu arriveras a faire ce que tu veux. mais avec ces techniques, tu peux bidouiller un peu pour arriver a un résultat convenable

SwithFr

Salut,

Je ne pense pas avoir compris la question mais juste au cas ou. Il suffit de faire du CSS ^^ Si ton souhait est d'avoir des elements stylysés comme sur powerpoint. Bah tu styles tous tes élements comme tu veux et puis si tu veux séparer en blocs / pages tu crées un style page qui ne fait qu'un simple bloc avec un fond blanc ainsi qu'une largeur et hauteur qui correspondent au format que tu veux.

Mais je pense vraiment pas avoir saisi ta question alors hésite pas à donner plus de précisions si jamais.

Cordialement,

Reekoj
Auteur

@SwithFr Oui c'est ça mais le problème c'est que je suis nul en CSS et que je ne sais pas du tout quoi utiliser comme propriétés.
Bon background-color ça va mais c'est surtout pour tout ce qui est placement, dimensions...

SwithFr

Hum dans ce cas, le plus simple (selon moi) mais qui est une solution pas idéale, après tout dépend de l'utilité finale. Si c'est juste pour toi ça passe, mais si c'est destiné à être publié etc, et donc avoir une certaine propreté dans la façon de faire c'est moyen moyen.

Ça serait de passer par un éditeur wysiwyg grapesjs par exemple.

Reekoj
Auteur

wow je connaissais pas ça a l'air pas mal du tout merci :)
ce n'est pas uniquement destiné à moi mais les gens qui iront dessus n'iront jamais inspecter le code de toute façon

chn16000

@kelu. Merci pour l'info pour le site alsacréation. :) Bien pratique comme tuto.

Jean Mitterand

Bonjour, bon je ne maitrise trop le proccessus mais par contre voici un exemple de <a href="https://www.templatemonster.com/fr/type/modeles-powerpoint/">Modèles Powerpoint</a> pui pourrait t'aider si j'ai bien compris ta question. J'utilise souvent ce site pour rendre ma boutique en ligne plus performante grace a leur service en ligne.