Enbart skriva ut en utvald DIV?

6 svar · 412 visningar · startad av oskars 16 maj 2007

oskarsMedlem sedan nov. 20051 317 inlägg

Frågan16 maj 2007 09:51#1

Hej!

Kan man välja vilket innehåll på en viss sida som ska skrivas ut vid Print? För tillfället så har jag skapat en länk till en sida som visar innehållet i ett mer utskriftsvänligt format... men det borde väl gå att säga att den enbart ska skriva ut innehållet som finns i t.ex en div som heter "printcontent"?

Går det att göra något sånt här?

zcorpanMedlem sedan dec. 20042 245 inlägg

16 maj 2007 10:16#2

Ja, men det är lättare att ange vad som inte ska skrivas ut... tex:

@media print {
  .header, .nav, .footer, .annat-som-inte-ska-skrivas-ut { display:none; }
}

silfverMedlem sedan apr. 200312 679 inlägg

16 maj 2007 10:53#3

zcorpan: Räcker det med att skriva så i sin befintliga css-fil för att det ska fungera i alla läsare? Behöver man inte skapa en fil med beteckningen media="print"?

zcorpanMedlem sedan dec. 20042 245 inlägg

16 maj 2007 11:40#4

silfver skrev:

zcorpan: Räcker det med att skriva så i sin befintliga css-fil för att det ska fungera i alla läsare?

Ja, förutsagt att den är media=all eller så.

silfver skrev:

Behöver man inte skapa en fil med beteckningen media="print"?

Nej.

oskarsMedlem sedan nov. 20051 317 inlägg

17 maj 2007 06:34#5

åfan okej, så i min befintliga CSS-fil så lägger jag:

@media print {
.header, .nav, .footer, .annat-som-inte-ska-skrivas-ut { display:none; }
}

och byter ut alla grejer där i till det jag inte vill skriv ut...

Vad är det du pratar om silfver? =) Vad är fördelarna med att ha en separat CSS-fil?

tantenMedlem sedan nov. 20051 596 inlägg

17 maj 2007 06:56#6

Tycker att zcorpans förslag är OK när man bara ska välja ut ett eller några stycken för utskrift rakt av, men om man vill anpassa sidan ännu mer som att ändra t.ex fonter för utskrift, marginaler, ha med andra bilder så är det enklare tycker jag att koppla det till ett eget stylesheet för att inte blanda ihop saker. Jag tar orginal css och kopierar den lägger allt som inte ska skrivas ut i en "hög" och stylar om resten.
Du kan läsa mer om print här: http://www.digital-web.com/articles/css_styling_for_print_and_other_media/

jarvkloMedlem sedan juli 20013 378 inlägg

17 maj 2007 06:58#7

oskars>> Exakt.
Här är ett exempel med stilskillnader för utskrift (testa genom att t.ex. förhandsgranska)

<!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" lang="sv" xml:lang="sv">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ett av jarvklos exempel</title>
	<style type="text/css">
h1 {font-weight: bold}
@media print {
h1 {font-weight:normal; font-size: 6pt; color:red }
}
	</style>
</head>
<body>
<h1>Hej hopp i lingonskogen</h1>
</body>
</html>

Kommentar till din sista fråga:

Det finns flera sätt att lägga in dina utskriftsstilmallar.
Att använda

<link rel="stylesheet" media="print" ... />

kan vara fiffigt i vissa sammanhang - t.ex. om ni är flera som samarbetar om designen och inte vill hålla på och slåss om vem som "får vara inne i stilmallen" hela tiden ;) [//red - eller som tanten påpekar, när man har stora skillnader mellan versionerna och vill ha översikt]

I exemplet ovan valde jag att lägga in allt i en och samma stilmall, men jag hade också kunnat göra såhär:

<!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" lang="sv" xml:lang="sv">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ett av jarvklos exempel</title>
	<style type="text/css">
h1 {font-weight: bold}
	</style>
	<style type="text/css" media="print">
h1 {font-weight:normal; font-size: 6pt; color:red }
	</style>
</head>
<body>
<h1>Hej hopp i lingonskogen</h1>
</body>
</html>

(testa)

Dessutom kan man kombinera externa och interna stilmallar med olika "media-kopplingar" lite hursomhelst egentligen om man känner till vilka olika sätt som finns.
Vad som är "bäst" är ofta en smaksak eller begränsat av praktiska omständigheter som hur ett CMS vill ha det eller hur den grupp man ingår i vill/får samarbeta.