28172 sujets

CSS et mise en forme, CSS3

Problème CSS @media print (help !)

Bonjour à tous,

Je souhaite faire une CSS @media print { }

J'ai une page avec un contenu au centre dans une div avec ( un overflow auto et un height de 400px) donc il me génère sur l'écran un scroll, jusque la pas de problème.
Dans la CSS print je n'arrive pas a faire l'équivalent d'un height auto même en mettant height auto, overflow hidden, il garde en 'mémoire' la hauteur de 400px.

Que faire ? il doit bien y avoir une solution ?

Merci par avance.
Je pense que l'erreur viens du html :

<link href="css/mediaprint.css" rel="stylesheet" type="text/css" />
tu ne précises pas le media comme pour l'écran : media="print"

Ta feuille de style n'était pas chargée (firefox+web developer >css >afficher les css par type de media>print (impression), avec un coup de firebug tu te rend compte que ta feuille de style n'est pas chargée Smiley cligne
Ou peut être que je me trompe c'est possible aussi Smiley cligne
Bien vue,

J'ai rajouté media:print dans le chargement de la css mais ce n'est pas mieux.
il faut peut être ajouté un autre paramètre ?
Je pense avoir trouvé une erreur:

Il faut définir sur chaque link ... le type de média (screen, print, etc) pour éviter les conflits de css.
Maintenant le problème est qu'il n'affiche qu'une page, comment générer un saut de page si le contenu est plus important.
laurent60 a écrit :
Maintenant le problème est qu'il n'affiche qu'une page, comment générer un saut de page si le contenu est plus important.

Les propriétés page-break-before, page-break-after et page-break-inside peuvent-elles faire l'affaire ? Smiley cligne

Soit dit en passant, les navigateurs n'implémentent pas toujours correctement les propriétés CSS spécifiques à l'impression (voir ce tableau comparatif sur Webdevout).
Modifié par Victor BRITO (24 Oct 2009 - 21:54)
Merci de prendre un peu de temps pour m'aider.
j'ai fais des tests avec les page-break... mais je n'ai aucun saut de page il ne m'affiche que la page 1 je ne le place peut être pas au bon endroit ?
Un exemple d'utilisation des propriétés page-break-* :
h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid;
}

La règle CSS ci-dessus consiste à éviter qu'un élément de titre (tous niveaux confondus) ne se retrouve tout seul en bas de page, avec le contenu qui le suit à la page suivante.

Mais, le mieux, c'est que tu nous montres le code de ta feuille de style pour impression. Smiley cligne
Un grand merci a tous j'ai partiellement résolu mon problème car dans IE cela fonction à merveille mais dans Firefox il ne me charge que la première page ?
Bonjour,

Le problème ici vient du fait que la hauteur (height: 410px) est ajoutée en JavaScript. Concrètement, une fois le code JavaScript chargé au chargement de la page, tu te retrouves avec:

<div
id="contenucustomscroll_mcontentwrapper"
class="mcontentwrapper"
style="
  border-bottom: 0px solid black;
  padding: 15px;
  overflow: hidden;
  width: 595px;
  height: 410px;
  top: -15px;
  left: -15px;
  text-align: justify;
  position: relative;
  z-index: 2;
">

Et les styles dans ta feuille de styles CSS ne sont pas prioritaires sur ces styles déclarés directement sur l'élément. Le mieux serait d'avoir un script JS qui se contente d'attribuer le minimum de styles possibles, et qui s'accompagnerait d'une feuille de styles CSS séparée et librement modifiable. À défaut, utiliser !important peut suffire (mais j'ai un petit doute sur la priorité entre un style="property: value1;" et un property: value2 !important).

L'autre problème que tu as, c'est un design dont les dimensions (1100x790px) et le comportement en présence d'un fort contenu (barre de défilement interne à un bloc) ont été déterminés en dépit du bon sens. Mais c'est une autre histoire.
Modifié par Florent V. (26 Oct 2009 - 21:13)
Sujet clos
Aller à