CSS code voor scherm en/of printer

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Met onderstaande code krijg ik alles op het scherm te zien.
Code: 
<style type="text/css" media="print">
.printtext {
    display: block;
}
.dontprinttext {
    display: none
}
</style>

Tekst onder <div class="dontprinttext"> wordt NIET afgedrukt op de printer.


Als bijvoorbeeld volgende 2 teksten (of figuren) onder elkaar staan
AABBCC
XXYYZZ

Hoe kan ik tekst AABBCC NIET op het scherm zien maar WEL afdrukken en
XXYYZZ WEL op het scherm zien maar NIET afdrukken ?

Dank voor tips.
 
Laatst bewerkt door een moderator:
In de html kan je meerdere class'es achter elkaar zetten die van links naar rechts worden uitgevoerd.
Code: 
<style>
.d-none {
    display: none;
}
.d-block {
    display: block;
}
@media print {
    .d-none-print {
        display: none;
    }
    .d-block-print {
        display: block
    }
}
</style>
Code: 
<div class="d-none d-block-print">
niet op scherm, wel op printer
</div>

<div class="d-block d-none-print">
wel op scherm, niet op printer
</div>

Bijvoorbeeld "d-none d-block-print"
- eerst wordt gezegd: toon niet op scherm en niet op printer.
- daarna wordt gezegd: toon wel op printer.

Vroeger werd een aparte stylesheet media="print" gebruikt maar dat wordt niet meer gedaan omdat alle browsers de @media ondersteunen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan