Hoe @media print en @media screen combineren in CSS code van <head> en <body>

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Beste,
Ik probeer in een webpage een gedeelte te printen dat niet op het scherm verschijnt en ook omgekeerd.
Tot nog toe lukt alléén het gedeelte dat niet geprint wordt - het niet voor het scherm bedoeld deel (maar wel voor de printer) blijft op het scherm komen.

<style type="text/css" media="print">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
background-color: #FFFFFF;
}
.printtext {
display: block;
}
.dontprinttext {
display: none;
}
.pagebreak {
page-break-before: always;
}

=> Ik wil dit er aan toevoegen - is deze syntax correct ?

@media screen
{
.noscreen {
display: none;
}
}

=> hoe codeer ik dit vervolgens correct in de body :

<@media screen div class="noscreen"> is foute syntax

Dank - leifoet
 
Hi, kun je hier iets mee
Code:
.screenonly {
  display: block;
} 
.printonly {
  display: none;
}
@media print {
   .screenonly {
      display: none;
   } 
   .printonly {
      display: block;
   }
}

/* dit kun je gebruiken om puur tekst te verbergen (uit Bootstrap) */
.text-hide {
   font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
   border: 0;
}
Uitleg: in @media print verander je de css die je eerder hebt ingesteld maar bij print anders wilt hebben. Afhankelijk van de overige css kan het zijn dat je !important achter none respectievelijk block moet zetten.

In de body zet je dan
Code:
<div>
<p>Tekst op <span class="screenonly">scherm</span><span class="printonly">printer</span> getoond</p>
</div>

Scu6. Have fun.
 
Laatst bewerkt:
Beste Bron,
Heb jouw suggesties geprobeerd => lukt niet (nog niet !).
Zit een beetje in de knoei met het volgende
- in @media screen gebruik je "printonly" en diezelfde naam gebruik je ook in @media print => snap niet hoe voor de betreffende teksten (blocks) in de body een onderscheid kan gemaakt worden tussen (al dan niet bestemd voor) de printer en/of (al dan niet bestemd voor) het scherm ?
- wanneer gebruik ik <span class> en wanneer <div class> ?

Dank - Leifoet
 
Laatst bewerkt:
Hoi, "@media screen {}" is nergens nodig en gebruik ik niet. De pagina leest de css van boven naar beneden. Eerst wordt alle css gelezen voor elk apparaat. Helemaal onderaan in je css wordt met "@media print {}" de css voor de printer aangepast.
Hieronder heb ik de css verder uitgebreid voor andere situaties die je tegen komt.
Code:
--- CSS ---

.hidden {display: none;}
@media print {
  .prn-hidden {display: none !important;}
  .prn-inline {display: inline !important;}
  .prn-inlinebk {display: inline-block !important;}
  .prn-block {display: block !important;}
}

--- HTML ---

<body>
<div class="prn-hidden">
<p>Hier staat tekst op scherm.</p>
</div>
<div class="hidden prn-block">
<p>Hier staat tekst op printer.</p>
</div>
<div>
<p class="prn-hidden">Tekst op scherm getoond.</p>
<p class="hidden prn-block">Tekst op printer getoond.</p>
<p>Tekst op <span class="prn-hidden">scherm</span><span class="hidden prn-inline">printer</span>.</p>
</div>
</body>

wanneer gebruik ik <span class> en wanneer <div class>
Kort door de bocht... <div> is een blok (rechthoek) in je layout. <span> gebruik je in een tekstregel als je in de tekst iets wilt aanpassen. Echter, dit gedrag kun je in de css veranderen door bijvoorbeeld een <span> een display:block te geven waardoor het een rechthoek wordt. Alleen bij display:block en display:inline-block heb je invloed op de breedte én de hoogte. Bij display:inline alleen op de breedte.

** edit: ik heb net de css vereenvoudigd:
geen class is op beide tonen
class="hidden prn-block" alleen op printer (of hidden prn-inline of hidden prn-inlinebk)
class="prn-hidden" alleen op scherm
class="hidden prn-hidden" is op geen van beide tonen

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan