CSS úprava pro tisk
21. 11. 2005 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Zpětné odkazy: jak je nikdy nezískávat
- Budování webu 100+1 na Drupalu: tipy a postřehy
- 7 tipů, které pochopí i laici, když migrujete stránky
- Zoner FOTOden "Dobrý fotograf může být každý"
- Pozvánka na (ne)konferenci Vyhledávače zboží 2013
Tematicky související články
- Dvousloupcový layout s plovoucí šířkou obou panelů
- Dvousloupcový layout s pevnou šířkou
- Dvousloupcový layout s plovoucí šířkou pravého panelu
- Třísloupcový layout se stejnou délkou všech panelů
- Třísloupcový fluidní layout
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
