CSS úprava pro tisk

21. listopadu 2005

•

Tento příklad ukazuje jak pomocí CSS upravit stránku tak aby byla vhodná pro vytištění na Vaší tiskárně. Upravuje stránku na bíle pozadí s černým textem. Dále je možno zakrýt menu a jiné k tisku nepotřebné součásti stránky.

Zde si můžete prohlédnout výsledek. Zde si můžete prohlédnout jak bude stránka vypadat po vytištění na tiskárně.

Toto řešení publikoval Jan Dudek. Popis najdete v článku Formátování dokumentů pro tisk pomocí CSS.

CSS pro tisk

@media print
{
body
{
color: black;
background: white;
font-size: 12pt;
}
@page
{
margin: 2,5cm;
}
[href]:after
{
content: “ [“ attr(href) „] „;
}
#hlavicka, #paticka, #levypanel, #levypanel-obsah
{
display: none;
border-color: black;
}
#hlavnipanel
{
position: static;
margin:0;
padding:0
}
#obsah
{
border-color: black;
width: auto;
}
h1,h2,h3,h4,h5,h6
{
page-break-after: avoid;
}
}

CSS layout

@media screen
{
body
{
margin:0; padding:0;
background:#ffffff;
text-align:center;
}
#hlavicka
{
padding: 10px;
border: 1px solid blue;
background: #dddddd;
}
#obsah
{
width: 750px;
margin:1em auto;
border: 1px solid blue;
text-align:left;
}
#levypanel
{
float: left;
width: 200px;
margin:0; padding:0;
}
#levypanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#hlavnipanel
{
margin:0 0 0 200px;
padding:0;
}
#hlavnipanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#paticka
{
padding: 10px;
border-top: 1px solid blue;
background: #dddddd;
}
hr.cleaner
{
clear:both;
display: none
}
}

XHTML

<html>
<body>
<div id=“obsah“>
<div id=“hlavicka“>
<h1>Hlavička</h1>
</div>
<hr class=“cleaner“ />
<div id=“levypanel“>
<div id=“levypanel-obsah“>
<h4>Menu s pevnou šířkou</h4>
<ul>
<li><a href=“index.html“>Odkaz 1</a></li>
<li><a href=“index.html“>Odkaz 2</a></li>
<li><a href=“index.html“>Odkaz 3</a></li>
<li><a href=“index.html“>Odkaz 4</a></li>
<li><a href=“index.html“>Odkaz 5</a></li>
</ul>
</div>
</div>
<div id=“hlavnipanel“>
<div id=“hlavnipanel-obsah“>
<h1>Obsah s pevnou šířkou</h1>
<p>Lorem ipsum dolor sit amet…</p>
<p>Aenean eu augue sit amet…</p>
<p>Nunc a lacus. Phasellus cursus…</p>
<p><a href=“priklad-53-2.htm“ title=“Tisk“>Stránka v tiskové podobě</a></p>
</div>
</div>
<hr class=“cleaner“ />
<div id=“paticka“>
Patička
</div>
</div>
</body>
</html>