Toon posts:

[css] printen van een pagina inclusief CSS

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik heb een pagina gemaakt volledig volgens xhtml transitional met css. De pagina bevat een (dynamisch) organogram van een bedrijfsstructuur.

Nu moet de pagina eigenlijk geprint worden, maar de achtergrondplaatjes van de entiteiten staan in de CSS file en worden dus niet geprint.

Weet iemand een oplossing hiervoor?

  • evaarties
  • Registratie: April 2001
  • Laatst online: 27-11 13:15

evaarties

Powerball @ 12.582

Ik denk eerder dat je in je afdrukinstellingen moet aangeven om ook achtergrondplaatjes / kleuren af te drukken.

Neem aan nl dat de rest van je cssindeling wel wordt afgedrukt.

  • Justice
  • Registratie: Maart 2001
  • Laatst online: 07-08 15:02
Het idee is dat achtergrond plaatjes niet informatief zijn (in tegenstelling tot img html elementen) en daarom niet geprint hoeven worden. Vervang deze plaatjes dus door img elementen.

Eventueel kan je spelen met media="screen,print" voor de CSS

[ Voor 14% gewijzigd door Justice op 05-12-2006 10:30 ]

Human Bobby


  • MAZZA
  • Registratie: Januari 2000
  • Laatst online: 01-12 13:35

MAZZA

Barbie is er weer!

Bij Firefox kan je iig aanvinken dat je ook de backgroundkleuren en images kunt meeprinten onder file, page setup.

  • Garyu
  • Registratie: Mei 2003
  • Laatst online: 13:52

Garyu

WW

Je kan een aparte print-css maken en daarmee aangeven wat er geprint dient te worden. Daar kan je die plaatjes weer in opnemen :).

It's Difficult to Make Predictions - Especially About the Future


  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

@garyu: dat kan dus niet. background-images en background-colors worden nooit geprint (hoewel firefox ze wel in de print-preview toont :X).

  • Garyu
  • Registratie: Mei 2003
  • Laatst online: 13:52

Garyu

WW

Tsja, gebruik dan een echte browser zoals IE of zo ;).

* Garyu rent snel weg....

Nee maar serieus, ik dacht dat Firefox dat wel deed, maar goed, de andere optie is om een aparte print-render te maken waar de plaatjes netjes in verwerkt zijn, maar dat lijkt me nou ook niet echt de mooiste oplossing. Ben je eindelijk goed bezig om alles netjes in CSS te zetten, wordt het vervolgens weer teruggrijpen naar de 'oude' methode.

In firefox heb je in ieder geval deze optie:
Afbeeldingslocatie: http://opensourcearticles.com/articles/introduction_to_firebird_7_images/1067099875X42

It's Difficult to Make Predictions - Especially About the Future


Verwijderd

Topicstarter
Garyu schreef op dinsdag 05 december 2006 @ 11:02:
In firefox heb je in ieder geval deze optie:
[afbeelding]
Deze heb ik idd gevonden, maar met het printen komt er een hele rare brei uit. De pagina is ook alleen met IE goed te zien wegens FF's rare oplossing voor padding.
Garyu schreef op dinsdag 05 december 2006 @ 11:02:
Ben je eindelijk goed bezig om alles netjes in CSS te zetten, wordt het vervolgens weer teruggrijpen naar de 'oude' methode.
Dit is nou precies wat ik dacht!

Verwijderd

Topicstarter
Justice schreef op dinsdag 05 december 2006 @ 10:30:
Het idee is dat achtergrond plaatjes niet informatief zijn (in tegenstelling tot img html elementen) en daarom niet geprint hoeven worden. Vervang deze plaatjes dus door img elementen.
Het zijn echt achtergrondplaatjes (denk niet dat ik deze eenvoudig kan vervangen door images), waardoor met behulp van CSS tenminste nog een redelijk overzichtelijk stuk PHP komt.
Justice schreef op dinsdag 05 december 2006 @ 10:30:
Eventueel kan je spelen met media="screen,print" voor de CSS
Hier zal ik 's naar kijken.

Verwijderd

Topicstarter
Garyu schreef op dinsdag 05 december 2006 @ 10:57:
Je kan een aparte print-css maken en daarmee aangeven wat er geprint dient te worden. Daar kan je die plaatjes weer in opnemen :).
wat bedoel je hier precies mee? Zoals het mij nu toelijkt, wordt alle CSS genegeerd tijdens het printen, of bedoel je hier zoiets mee als Justice aanraadt?

edit: de plaatsen van de entiteiten worden wel goed weergegeven.

[ Voor 8% gewijzigd door Verwijderd op 05-12-2006 11:23 ]


Verwijderd

Topicstarter
Onderhand heb ik de volgende tag om de twee relevante stukken css code (2 verschilende files) te zetten:

@media screen,print {

}

In het print preview scherm van IE zie ik geen verschil.

edit: ook niet bij FF

[ Voor 6% gewijzigd door Verwijderd op 05-12-2006 11:28 ]


  • Garyu
  • Registratie: Mei 2003
  • Laatst online: 13:52

Garyu

WW

ik zou er een puntje van maken tussen screen en print :).

Ik heb voor printen een aparte stylesheet in elkaar gezet, en die vervolgens zo in de html-pagina opgenomen:
code:
1
2
<LINK rel="stylesheet" type"text/css" href="defaultlayout.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

En ja, dat mag eigenlijk niet ;)

[ Voor 6% gewijzigd door Garyu op 05-12-2006 11:34 ]

It's Difficult to Make Predictions - Especially About the Future


Verwijderd

Topicstarter
Garyu schreef op dinsdag 05 december 2006 @ 11:34:
ik zou er een puntje van maken tussen screen en print :).
Ik neem aan dat die comma het voor beiden van toepassing maakt. Ik heb dit overigens gecopypaste van w3schools.org ^^.

  • Garyu
  • Registratie: Mei 2003
  • Laatst online: 13:52

Garyu

WW

Verwijderd schreef op dinsdag 05 december 2006 @ 11:36:
[...]


Ik neem aan dat die comma het voor beiden van toepassing maakt. Ik heb dit overigens gecopypaste van w3schools.org ^^.
8)7

* Garyu slaapt nog... :Z

It's Difficult to Make Predictions - Especially About the Future


Verwijderd

Garyu schreef op dinsdag 05 december 2006 @ 11:34:
ik zou er een puntje van maken tussen screen en print :).

Ik heb voor printen een aparte stylesheet in elkaar gezet, en die vervolgens zo in de html-pagina opgenomen:
code:
1
2
<LINK rel="stylesheet" type"text/css" href="defaultlayout.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

En ja, dat mag eigenlijk niet ;)
wat mag daar niet aan? je mag zoveel sheets opnemen als je wilt

@TS: firefox doet niets geks met padding, IE doet dat. Zorg dat je (screen en print) CSS goed is, dan maakt IE er echt geen brij van (en Fx ook niet).

Verwijderd

Topicstarter
Verwijderd schreef op dinsdag 05 december 2006 @ 11:43:
@TS: firefox doet niets geks met padding, IE doet dat. Zorg dat je (screen en print) CSS goed is, dan maakt IE er echt geen brij van (en Fx ook niet).
Misschien zit er iets verkeerd in mijn CSS dan.....
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen,print {
div.niveau1 {
  background-image: url(../pics/organogram/final/niveau1.gif);
  width: 230px;
  height: 63px;
  font-size: x-small;
  padding-left: 3px;
  padding-right: 86px;
  padding-top: 6px;
  text-align: center;
  background-color: #FFFDA3;
}
*knip meerder gelijksoortige stukjes*
}

Background-image en background-color negeert ie dus met printen.
Die genoemde brei ging over printen met FF met "print background colors" geselecteerd.

Over padding: dan ligt het aan mij dat ik de IE padding oplossing veel logischer vind dan de FF oplossing.

  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

Nee, dat ligt niet aan jouw, ik vind het zelf ook logischer. Maar als je dat aangepast wil hebben moet je de standaard aanpassen, en daarvoor moet je bij het W3C zijn. Nu is die standaard er gewoon, en het zou wel zo makkelijk zijn als iedereen die met hetzelfde effect implementeert. * MBV keeps on dreaming :z
En IE heeft die oplossing ook niet meer in de standards compliance mode, als je dus geen <?xml ... ?> bovenaan je xhtml zet 8)7.
Pagina: 1