Kun et område der skal printes

lav et media print stylesheet?

forstår ikke lige helt det sidste du skriver?

Ved at have 2 css filer, en til print og en til skærmvisning.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Og brug #menu{display:none;} til det du ikke ønsker udskrevet i din print.css

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

hvor du definerer det du ikke skal udskrive i print.css f.eks.:
body * {display:none;}
#printes {display:block!important;}
- hvis elementet med id #printes ligger for sig selv i body.
Ellers nøjes du blot med at give de elementer der skal udskrives display:none.

Den skal jeg lige have igen med kode på ...



<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  </HEAD>
<BODY>
 
(Skal ikke printes)
jeg vil ikke printes..


(Skal printes)
jubii det virker

</BODY>
</HTML>

du behøver ikke have to forskellige filer, du kan godt angive det i samme fil, se f.eks. www.w3schools.com om hvordan du gør

http://www.w3schools.com/css/css_mediatypes.asp (her nærmere bestemt)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

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

</head><body>
<div>jeg vil ikke printes..</div>
<div class="printes">jubii det virker</div>
<div>jeg vil ikke printes..</div>
</body></html>

og

print.css:
body * {display:none;}
.printes {display:block!important;}


eller


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

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

</head><body>
<div class="noprint">jeg vil ikke printes..</div>
<div>jubii det virker</div>
<div class="noprint">jeg vil ikke printes..</div>
</body></html>

og

print.css:
.noprint {display:none;}

hmm det virker ikke den tager stadig det hele med

jo det gør sorry

men nu videre til den den helt frække...

nu er det jo bare en blank side den printer på .. jeg kunne godt tænke mig den lige kunne lægge til top logo image i toppen og firma tekst i bunden..


toplog


teksten der printes


---------------
footer firma-gaden 12 osv


Hvordan laver vi den

og den skal printe baggrundsfarven ud på mine tabeller :-)

Husk default er udskrivning af baggrundsfarver og billder slået fra i printer opsætningen, så dem kan du ikke udskrive uden du gør brurgen opmærksom på dette og de slår det til.

øv det tænkte jeg nok, er der ikke en smart løsning på¨det

- Du definerer hvilke elementer der
ikke skal printes ud (display none).

- Du ligger baggrunden ind på det element du
udskriver eller det bagved liggende element.
- Du beder din bruger om at vælge filer ->
sideopsætning og afkrydse udskrivning af baggrunde.

eller

- Du laver et relativt placeret element.
- Placerer en img i dette element via f.eks.
position absolute på den placering du ønsker.
- Ovenpå dette element placerer du et nyt element
med teksten.
- Du læner dig tilbage og nyder at folk der
udskriver siden får baggrunden med uden at
du skal bede dem foretage ændringer.

Ulempen ved 1'eren er at baggrunden evt. mangler.
Ulempen ved 2'eren er at folk uden farve printer
måske ikke synes baggrunder ser fed ud og/eller at
folk måske ikke syntes at baggrunden var blækket værd.

ok tak jeg prøver...

eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
</head><body>
<div style="height:65px;background:url('http://www.eksperten.dk/images/eksperten_logo.gif') no-repeat;">Hejsa</div>

vs.

<div style="position:relative;height:65px;"><img src="http://www.eksperten.dk/images/eksperten_logo.gif" style="position:absolute;"><div style="position:relative;">Hejsa</div></div>

eller

<div style="position:relative;"><img src="http://www.eksperten.dk/images/eksperten_logo.gif" style="position:absolute;z-index:-1;">Hejsa</div>
</body></html>

perfekt tak... kan jeg give print.css en fast baggrundsfarve?

Tjoh, du kan gøre noget i stil med:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.onlyprint{display:none;}

@media print
{
.printes {display:block;}
.noprint {display:none;}
}
</style>


</head><body>
<div style="position:relative;height:65px;"><img class="noprint" src="http://www.eksperten.dk/images/eksperten_logo.gif" style="position:absolute;z-index:-1;"><img class="printes onlyprint" src="http://www.eksperten.dk/images/dot_3.gif" style="position:absolute;z-index:-1;">Hejsa</div>
<br><br>
<div style="position:relative;height:65px;"><img class="noprint" src="http://www.eksperten.dk/images/eksperten_logo.gif" style="position:absolute;z-index:-1;"><img class="printes onlyprint" src="http://www.eksperten.dk/images/dot_3.gif" style="position:absolute;z-index:-1;width:100%;height:100%;">Hejsa</div>
</body></html>


... Vær dog opmærksom på at du ikke "decideret*" kan tile baggrundsbilleder, men kun stretche dem eller bevarer deres oprindelige størrelse ved denne måde. Snakker vi om en ensfarvet baggrund burde det dog ikke være noget problem i et streche en 1x1 px billede til at fylde hele elementet.
*Der kan dog laves krumspring

@media print er fra LadyHawke's link

tak kom med et svar :-)

Er det blot en 1x1px baggrundsfarve billede der skal bruges kan det dog også laves via. border, hvis str. er kendt

<div style="position:relative;height:65px;"><img class="noprint" src="http://www.eksperten.dk/images/eksperten_logo.gif" style="position:absolute;z-index:-1;"><div class="onlyprint printes" style="position:absolute;z-index:-1;width:0;height:0;border-right:188px solid #f00;border-bottom:65px solid #f00;">Hejsa</div>

Super, fordel venligst point mellem ladyhawke og mig.
Hun svarede jo først på dit oprindelige spørgsmål ;)
- Og takker for point :)

OOKI