Forum Développeur - Administration serveur, programmation et base de données

Version complète : CSS print saut de page

Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS

qwix

Apr 11 2005, 01:12 PM

Hello

J'aurais besoin d'aide concernant la CSS css:page-break-after et css:page-break-before
J'ai du mal à l'appliquer, j'ai l'impression que ça ne fonctionne pas correctement, voici les styles en questions:

QUOTE

body {
background: #fff;
color: #000;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, Geneva, sans-serif;
text-align: justify;
}

#global {
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: left;
padding: 20px;
}

.header {
border-bottom: 1px solid #aaa;
width: 500px;
}

.menu {
display: none;
}

.search {
display: none;
}

.formheader {
display: none;
width: 218px;
vertical-align: bottom;
}

.utile {
display: none;
}

.blockquote {
text-align: justify;
margin-top: 50px;
margin-bottom: 50px;
}

a {
font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
font-size: 13px;
color:#880000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

img {
border: none;
}

.spip_documents {
line-height: 130%;
font-size: 12px;
padding-right: 20px;
}

.spip_documents a {
font-size : 12px;
}

.footer td {
font-size: 11px;
color:#999;
border-top: 1px solid #aaa;
padding-top: 10px;
width: 500px
}

. utile {
display: none;
}

#navig {
display: none;
}
/* Colonne Centrale */

.contenu .spip_note {
line-height: 120%;
}

.contenu {
width: 500px;
font-size:13px;
}

.contenu ul {
font-size:13px;
list-style-type: none;
text-decoration: none;
padding-bottom: 20px;
padding-left: 0px;
margin-left: 0px;
}

.contenu ul a {
font-size: 13px;
text-decoration: none;
}

.contenu li {
margin-bottom: 6px;
list-style-type: none;
}

.contenu h1 {
font-size: 16px;
text-decoration: none;
}

.contenu h4 {
font-size:12px;
font-weight:bold;
font-family:Georgia, \"Times New Roman\", Times, serif;
color: #333;
text-decoration: none;
margin-bottom: 10px;

}

.contenu h4 a {
font-size:12px;
text-decoration: none;
}

.contenu p {
text-align: justify;
}

/* Contexte - Colonne de gauche */

.contexte {
font-size: 11px;
border-right: 1px solid #ddd;
width: 220px;
vertical-align: top;
padding-bottom: 0px;
display: none;
}
.contexte ul {
font-size: 11px;
list-style-type: none;
text-decoration: none;
display: none;
}
.contexte li {
list-style-type: none;
font-size: 11px;
text-decoration: none;
margin-right: 10px;
display: none;
}

.contenu .contexte ul {
font-size: 11px;
margin-left: 0px;
padding-left: 0px;
padding-right: 10px;
display: none;
}

.contenu .contexte a {
font-size: 11px;
display: none;
}

.contenu .contexte {
font-size: 11px;
line-height: 100%;
display: none;
}

/* Article */

.article {
vertical-align: top;

}

.article a {
font-weight: bold;
}

.article .site {
font-size: 14px;
font-weight: bold;
}
.article .site a {
font-size: 14px;
font-weight: bold;
}

.docjoint {
font-size: 11px;
text-align: center;
padding-right: 6px;
}

.article .resume {
line-height: 130%;
}

.article .abstract {
line-height: 130%;
font-style: italic;
padding-bottom: 40px;
border-bottom: 1px solid #aaa;
}

blockquote.spip p {
line-height: 130%;
margin-top: 50px;
margin-bottom: 50px;
}

a.spip_note {
font-weight: bold;
}

biblio. spip p {
line-height: 130%;
}

#tablematiere {
margin: 0;
padding: 0;
font-weight: bold;
padding-bottom: 20px;
border-bottom: 1px solid #aaa;
}

#tablematiere ul {
font-style: italic;
font-weight: normal;
margin: 0;
padding-left: 25px;
padding-bottom: 0px;
padding-top: 5px;
}

/* Classe des titres des articles */

.spiphead1 {
padding-top: 70px;
padding-bottom: 10px;
}

.spiphead2 {
padding-top: 40px;
padding-bottom: 10px;
}
.spiphead2 h3 a {
padding-left: 25px;
font-style: italic;
font-weight: 600;
}
.spiphead3 {
padding-left: 25px;
font-size: 12px;
font-weight: normal;
}

.flottant_titre_g {
margin: 0;
padding: 0;
width: 440px;
float: left;
text-align:left;
}

.flottant_titre_d {
margin: 0;
padding: 0;
width: 20px;
float: right;
text-align:right;
}

.flottant_titre_g a, .flottant_titre_g h3 {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size: 13px;
margin: 0;
padding: 0;
color:#333;
}

.spacer {
clear: both;
}

#biblio p {
line-height: 130%;
}

.article p {
text-align: justify;
line-height: 170%;
}

.auteur {
color:#333333;
font-size: 12px;
}
.auteur a {
color:#333333;
}

.sommaire ul {
font-size:11px;
text-decoration: none;
}

.sommaire {
font-size:11px;
text-decoration: none;
font-weight : bold;
}

.sommaire a {
text-decoration: none;
}

/*Tableaux*/

table.spip {
font-size: 12px;
text-align: right;
margin: 20px;
border :1px solid #666
}

table.spip td {
padding: 4px;
text-align: left;
vertical-align: top;
border :1px solid #666
}

/* Titres */

h1 {
font-size: 16px;
font-weight:bold;
font-family:Georgia, \"Times New Roman\", Times, serif;
color: #333;
padding-bottom: 20px;
border-bottom: 1px solid #aaa;
}

h2 {
font-family:Georgia, \"Times New Roman\", Times, serif;
color: #333;
font-size: 12px;
font-weight:bold;
}

h4 {
font-size: 14px;
font-weight:bold;
padding-top: 10px;
}
.auteur h4 a {
font-size:12px;
font-family:Georgia, \"Times New Roman\", Times, serif;
color: #333;
text-decoration: none;
}

Je sais le fichier est dans un bordel innomable...

RaphaelG

Apr 11 2005, 02:47 PM

A part sur Opera, les media "print" sont très mal interprétées par les navigateurs. Il ne faut pas trop espérer que ça marche sur IE (ni même Firefox).

txiki

Jul 20 2005, 06:04 PM

Salut à tous,

Quoi ! Sibelius, tu veux dire que la CSS print n'est pas gérée par IE où FF ?
ça fait 4 jours que j'essaie de mettre au point une css afin de permettre aux visiteurs d'imprimer une page.
En local, ça marche très bien sous FF 1.04 et 1.0.6 (maintenant).
Mais si je vais sur le site, chez free, c'est plus du tout la même chose.
Tu peux le voir ici: lexique (la petite imprimante en bas de la page.

Merci pour tes éventuels conseils.

RaphaelG

Jul 20 2005, 06:49 PM

txiki (Jul 20 2005, 07:04 PM) a dit :

Salut à tous,

Quoi ! Sibelius, tu veux dire que la CSS print n'est pas gérée par IE où FF ?

Si si, les media print fonctionnent très bien... sauf certaines propriétés spécifiques.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.