css för utskrift

Hej!
Finns det någon vänlig själ som skulle kunna hjälpa mig på traven med css för utskrift.
Har sökt och letat men inte riktigt fattat hur jag ska göra...

Jag har gjort två olika css-filer enligt:

<link href="../Stylesheet/styleTimeReport.css" rel="stylesheet" type="text/css">
<link href="../stylesheet/printTimeReport.css" rel="stylesheet"type="text/css" media="print">

Som jag förstått det så används bara den css-filen med media="print" vid utskrift. Är det rätt uppfattat?

Sedan har jag läst att print-css "ärver" ifrån den vanliga css-filen. Är det så?

Måste jag isåfall göra två helt separata css-filer?

Sedan har jag varit försökt hitta info om hur jag sätter marginaler och sådant och hittat följande:

SPAN 
{ 
	widows: 5; 
	orphans: 10; 
	page-break-before: always 
}

@page 
{ 
	margin-left: 6cm; 
	margin-right: 3cm; 
	margin-top: 5cm; 
	margin-bottom: 3cm 
}

Denna kod har jag i printTimeReport.css

När jag skriver ut sidan så ändras dock inte marginalerna. Andra värden som teckenstorlek och sådant ändras.

Om jag har objekt med på min "skärmsida" som jag inte vill skriva ut. Hur gör jag då? Exempelvis tabeller, bilder, textblock mm.

Tack på förhand!

Mvh
Henrik

Du lägger till

display: none;

i CSS:en för de objekt du inte vill ska synas när du skriver ut. :)

Stilmallen för utskrifter ärver från den vanliga stilmallen såvida du inte bestämmer annat.

Aha! :)
Tack för det m_soderlund!
Men.. om jag exempelvis har en tabell, hur gör jag då.. är dålig på CSS men håller på att lära mig....

Och om den är ver egenskaperna, måste jag då göra en kopia på originalet som jag sedan gör om till utskrifts-css?

Om jag tar tex body i originalet

body {
   background: white;
   font-size: 12pt;
   }

Ska den då se ut:

body {
   background: white;
   font-size: 10pt;
   }

i utsjkriften om jag vill att texten ska vara 10 pt?

Och varför får jag inte till det med marginalerna?

Mvh
Henrik

Nej, du behöver inte skriva om allt i print-stilmallen. Om du vill ha storleken 10pt på texten när den skrivs ut så skriver du bara denna regel i print-stilmallen:

body { font-size: 10pt; }

resten hänger med automagiskt!

okej! :)

Om jag vill dölja en tabell, är det rätt att göra så här då?

<table id="tabell" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

och i css:en

 #tabell {
	DISPLAY: none! important
}

och hur får man till marginalerna?

Mvh

Ja, det är rätt. Det borde fungera med marginalerna..

margin { 5cm 3cm 3cm 6cm; }

kanske är lite smidigare att skriva än din kod. Ovanstående betyder:

margin { top right bottom left; }

Har du mer av din kod att visa?

Jag brukar ta en kopia på stylesheeten, döpa den till print.css. Sätter display:none; på allt som inte ska vara med.
Sätter marginalerna på det som är "huvud-diven", vilken det nu är som ska skrivas ut.
Dessutom brukar jag peta in en del i html-sidan som inte syns på weben, men som jag tar bort display:none; på i print- style sheeten. Till exempel en bildlogga som blir text i stället.
För säkerhets skull bör du nog dessutom sätta ut media="screen" på din andra länk

Har inte kommit så långt utan bara läst mig till följande som finns i print-css:en

SPAN 
{ 
	widows: 5; 
	orphans: 10; 
	page-break-before: always 
}

@page 
{ 
	margin-left: 6cm; 
	margin-right: 3cm; 
	margin-top: 5cm; 
	margin-bottom: 3cm 
}

Men det händer inget när jag ändrar värdena

Mvj
henrik

Som jag förstått det så används bara den css-filen med media="print" vid utskrift. Är det rätt uppfattat?

Sedan har jag läst att print-css "ärver" ifrån den vanliga css-filen. Är det så?

Den första stilmallen har media="all", så båda används för utskrift. Om du anger media="screen" på den första så används bara den andra för utskrift.

Måste jag isåfall göra två helt separata css-filer?

Nej, du kan använda @media om du bara vill ha en stilmall.

/* för alla */
@media screen {
 /* för skärm */
}
@media print {
 /* för utskrift */
}
/* för alla igen */

Tyvärr är vissa delar från Paged Media rätt dåligt implementerat i webbläsare, så du kanske kan tex sätta margin på body istället för att använda @page tills det har bättre stöd i webbläsare. :)

Har inte en del webbläsare problem med @media längre. Eller är det ur världen?

Det skulle väl vara IE5 för Mac i så fall. Om den webbläsaren nu används...

Hmm, det verkar som att @Page inte stöds ordentligt, funkade när jag satte margin i body!

Hur kan man göra ett sidhuvud och sidfot på något smidigt sätt.... Tänkte lägga in en logga i sidhuvudet och lite tfnnummer och sådant i sidfoten...

Mvh
Henrik

jag provade med FF och IE men där verkade det inte funka...

Henrik

Men om jag har en tabell på sidan, hur får jag den att ha marginalen 1 cm? kan jag sätta det i body? ska jag sätta en fast bredd på tabellen eller ska jag ha 100%?

Mvh
henrik

devotion skrev:

Hur kan man göra ett sidhuvud och sidfot på något smidigt sätt.... Tänkte lägga in en logga i sidhuvudet och lite tfnnummer och sådant i sidfoten...

Med position:fixed. Dock saknar IE stöd för det. :(

hmm, typiskt :)

Aha!

IE har ju egna inställningar för marginaler också... Kan man med css eller något annat ändra dessa.

Som jag förstått det så utgår css.marginalen FRÅN den marginal som IE har. dvs är marginalen inställd på 20 mm i IE och i CSS 1 cm blir den totala mariginalen 3 cm...

Kan man få en mariginal som är säg 1 cm utan att behäva gå in i IEs inställningar?

Mvh

devotion skrev:

Kan man få en mariginal som är säg 1 cm utan att behäva gå in i IEs inställningar?

Det ser inte ut som det. :l

synd!
Men om jag har en tabell som visas fint på skärmen, men blir för "stor" när jag skriver ut. Hur ska jag göra då. Nu har jag ju ett fast mått på bredden och då hjälper det väl inte att minska teckenstorleken. Några bra tips?

Mvh
Henrik

Testa att inte ange någon bredd alls (width:auto).