Forum d'entraide PHPFrance

Bonjour,

J'ai un souci pour faire le saut de page avec CSS.

La structure :
- Une page XHTML avec une balise

<div class="saut_page">Saut de page</div>

- 3 pages CSS
-- La première pour tous médias avec

.saut_page {
   display: none;
}

-- La seconde c'est pour l'affichage à l'écran (media = screen), qui ne fait que donner un pourcentage en largeur à la page.

-- La troisième pour le média = print qui contient

Code : Tout sélectionner

.saut_page {
   page-break-before: always;
}

Mais le saut de page ne se fait pas avec "aperçu avant impression".
Bien entendu, chaque navigateur coupe la page à un endroit différent.
Une idée ?
Merci d'avance.

As-tu bien précisé le media dans ta feuille de style ?

Voici une illustration, testée et fonctionnelle :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
    <title>Saut de page dans un Style d'impression</title>
    <meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
    <style type="text/css" media="print">
    /* <![CDATA[ */
    .sautdepage {
        page-break-before: always;
    }
    /* ]]> */
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero. </p>
    <p class="sautdepage">Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
    <p class="sautdepage">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum. </p>
    <p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
  </body>
</html>

Slt Cyrano,

Voici plus de code.
Fichier HTML

Code : Tout sélectionner

<link href="cv.css" type="text/css" rel="stylesheet" media="all" />
<link href="cv_screen.css" type="text/css" rel="stylesheet" media="screen" />
<link href="cv_print.css" type="text/css" rel="stylesheet" media="print" />
......
......
<div class="saut_page">Saut de page</div>

La partie concernée du fichier cv.css

Code : Tout sélectionner

.saut_page {
	display: none;
}

Le fichier cv_screen.css au complet

Code : Tout sélectionner

#page{
	background-color: white;
	color: black;
	display: table;
	margin: auto;
	width: 75%;
}

Le fichier cv_print.css au complet

Code : Tout sélectionner

#page{
	background-color: white;
	color: black;
	display: table;
	margin: auto;
	width: 100%;
}
.saut_page{
	page-break-before: always;
}

Et je comprends vraiment pas pourquoi ça ne fonctionne pas.

Tu n'as besoin de spécifier le saut de page que dans le style d'impression et tu n'es nullement obligé d'avoir un code spécifique pour ça dans ton HTML : si tu regardes le code HTML que j'ai mis, j'ai choisi deux paragraphes auxquels j,ai juste ajouté une classe CSS : je n'ai pas inséré d'élément particulier avant ces paragraphes et pourtant lors de l'aperçu avant impression, ça fonctionne très bien alors qu'à l'écran, la page est d'un seul tenant.

Re,

J'ai essayé comme tu me l'indiques, le résultat est le même.

Ma page est validée par le W3C, aussi bien en XHTML qu'en CSS.

Et le PB est le même avec tous les navigateurs que j'ai essayé.

Je ne comprends plus rien. Je crois que je vais laisser tomber l'histoire.

Mouais, j'ai trouvé d'où ça vient : tu as mis pour un <div> la propriété (à mon avis bien inutile) display: table;

Vire ça et refais l'essai

Non, j'ai pas de <div>, je l'ai même essayé dans la balise <table style="page-break-after: always"> et même résultat.

je ne pense pas t'apporter une réel solution mais vue que j'avait deja fait un site avec un css pour l'impression...

en faite moi mon print.css ressemblait plus à ceci:

Code : Tout sélectionner

@page { 
size: portrait;
margin: 0;
padding: 0;
marks: none;
}

il me semble que c'est important à specifier telquel via le @ pour les info de la page...

sinon, l'exemple de Cyrano fonctionne à merveille chez moi sous IE, FF, opera, konqueror donc je voit pas trop

si cela peut t'aider

Bonjour et merci à vous deux,

Après quelques modifications et l'ajout de la partie donnée par BeRoots
ça fonctionne parfaitement.

Si ça peut aider...
Fichier XHTML :

<table class="emploi saut_page">

Fichier cv_print.css :

@page {
size: portrait;
margin: 0;
padding: 0;
marks: none;
} 
.page{
	background-color: white;
	color: black;
	margin: auto;
	width: 100%;
}
.saut_page {
	page-break-before: always;
}
.noprint {
	display: none;
}

Forum d'entraide PHPFrance

CSS -- Saut de page

CSS -- Saut de page