Drucklayouts mit CSS - Beispiel 13

Text

Lorem ipsum dolor sit amet, Externer Link im Text consectetuer adipiscing elit. Sed wisi augue, elementum quis, vulputate non, gravida ut, wisi. Morbi eget mauris. Curabitur tempus enim a risus. Nulla wisi metus, volutpat vel, pulvinar non, ultricies quis, turpis. Nunc tincidunt turpis vel nibh. Suspendisse et metus. Aenean facilisis sem sit amet arcu. Aliquam arcu tellus, vehicula quis, cursus in, elementum vitae, wisi. Morbi quam ligula, vestibulum a, interdum et, pulvinar eu, odio. Nullam mi dui, malesuada at, sollicitudin suscipit, pharetra a, erat. Pellentesque laoreet magna sit amet purus. Etiam in lorem.

Tip:
Sed nisl. Aliquam wisi sem, vestibulum eget, blandit sit amet, convallis non, ligula. Cras mauris risus, pulvinar id, auctor et, egestas vitae, nibh. Fusce tincidunt enim quis ipsum. Maecenas non libero. Duis eu diam porttitor mauris fringilla varius. Nulla eu ligula.

Geordnete Liste

Cras eget elit a tortor laoreet eleifend.
Duis quis urna id augue rutrum posuere.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse eleifend, sem ac tincidunt condimentum, nisl magna nonummy risus, et adipiscing lorem ante in ligula.

Tabelle

	Morbi at felis	Phasellus pellentesque
Duis porta dictum nunc:	Cras convallis, tortor ac pulvinar molestie, felis dolor rhoncus sapien, non porttitor enim est non augue.	Nullam gravida, velit a aliquet varius, nunc magna consequat lorem, at scelerisque leo nisl ac elit.
Nulla cursus interdum nunc:	Nam ligula lacus, laoreet sit amet, faucibus vel, rhoncus at, nisl.	Etiam eu quam sed diam suscipit condimentum.

Style-Sheet für den Druck:

/* (Das Layout wurde in den Beispielen 1 - 8 betrachtet.) */
/* Textformatierungen */
body {
   font: 11pt Georgia,"Times New Roman",Chicago,Charcoal,serif;
   color: #000;
   background: #ffffff;
   padding: 0;
   margin: 0;  
   orphans: 2;
   widows: 2;
   }
#main-text a:link, #main-text a:visited {
   color: #000;
   background-color: #e9ebf8;
   text-decoration: none;
   }
#main-text a:hover, #main-text a:active {
   color: #063b6a;
   background-color: #d3d7f1;
   text-decoration: none;
   }
a.exlink {
   color: #000;
   background: url(//graphics/linkpfeil.gif)
               no-repeat
               left center;
   padding: 0 0 0 5mm;
   text-decoration: none;
   }
h1,h2,h3,h4,h5,h6 {
   font-family: "trebuchet ms",arial,helvetica,sans-serif;
   color: #000;
   padding: 1mm 0;
   margin: 1em 0 1mm;
   page-break-after: avoid;
   /* Kein Seitenumbruch direkt nach Überschriften */
   }
h1 {
   font-size: 17pt;
   font-weight: normal;
   line-height: 1.5mm;
   color: #434015;
   background-color: #ffe5cd;
   padding: 0.5mm 0 1.25mm 0;
   border: 0.2mm solid #d86c10;
   border-width: 0 0 0.2mm 0;
   margin: 0 0 5mm;
   vertical-align: bottom;
   }
h2 {
   font-size: 14pt;
   font-weight: normal;
   }
h3 {
   font-size: 12pt;
   }
h4 {
   font: bold 12pt georgia,"times new roman",serif;
   }
ol {
   margin-top: 2mm;
   margin-bottom: 2mm;
   page-break-inside: avoid;
   /* Kein Seitenumbruch innerhalb geordneter Listen */
   }
ol.la {
   list-style-type: lower-latin;
   list-style-type: lower-alpha;
   }
ol > li {
   margin: 2mm 0;
   margin-bottom: 2mm;
   }
p {
   margin: 2.1mm 0;
   }
#main-text p.tip {
   background: url(//graphics/sym-tip.gif)
               no-repeat
               top left;
   margin-left: -15mm;
   padding-left: 15mm;
   page-break-before: avoid;
   page-break-after: avoid;
   /* Kein Seitenumbruch direkt vor oder nach Tipps. */
   }
#main-text p.tip:first-line {
   font-weight: bold;
   }
table.tformat {
   font: 10pt "trebuchet ms",arial,helvetica,sans-serif;
   padding: 0;
   border-spacing: 0;
   border-collapse: collapse;
   }
table.tformat td {
   text-align: left;
   vertical-align: top;
   page-break-inside: avoid;
   /* Tabelle nicht auf zwei Seiten aufteilen. */
   }
table.tformat td.b {
   background-color: #f0f3f9;
   padding: 0.5mm 5mm 0.5mm 2mm;
   border: 0.2mm solid #aab;
   border-width: 0 0 0.2mm 0;
   }
table.tformat td.q {
   background-color: #fcf6e4;
   padding: 0.5mm 5mm 0.5mm 2mm;
   border: 0.2mm solid #ca3;
   border-width: 0 0 0.2mm 0;
   }
table.tformat th {
   text-align: left;
   vertical-align: top;
   page-break-inside: avoid;
   }
table.tformat th.b {
   background-color: #f0f3f9;
   padding: 0.5mm 5mm 0.5mm 2mm;
   border: 0.1mm solid #aab;
   border-width: 0.2mm 0 0.5mm;
   }
table.tformat th.q {
   background-color: #fcf6e4;
   padding: 0.5mm 5mm 0.5mm 2mm;
   border: 0.1mm solid #ca3;
   border-width: 0.2mm 0 0.5mm;
   }

Das HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>...</title>
<link rel="stylesheet" media="all" type="text/css" href="screen-styles.css" />
</head>
<body>
<div id="top-across">                 <!-- Gesamter Kopfteil -->
    <div id="top-navigation">             <!-- Nur Navigationsbalken -->
     ...
    </div>
</div>
<div id="navigation">                 <!-- Seitennavigation -->
 ...
</div>
<div id="main-text">                  <!-- Inhalte, Text -->
 ...
</div>
<div id="bottom">                     <!-- Fußteil für Bildschirm -->
 ...
</div>
<div id="printbottom">                <!-- Fußteil für Druck -->
 ...
</div>
</body>
</html>