Drucklayouts mit CSS - Beispiel 09

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: 15px Georgia,"Times New Roman",Chicago,Charcoal,serif;
   color: #000;
   background: #ffffff;
   padding: 0;
   margin: 0;
   }
#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 {
   background: url(//graphics/link-ex.gif)
               no-repeat
               left center;
   padding-left: 13px;
   }
h1,h2,h3,h4,h5,h6 {
   font-family: "trebuchet ms",arial,helvetica,sans-serif;
   color: #000;
   padding: 3px 0px;
   margin-top: 1.5em;
   margin-bottom: 0;
   }
h1 {
   font-size: 1.5em;
   font-weight: normal;
   color: #441100;
   background: #fefeff;
   padding-left: 0.75em;
   border: 1px solid #c4c4c4;
   border-width: 1px 0;
   margin: 1em 0 1em;
   }
h2 {
   font-size: 1.3em;
   }
h3 {
   font-size: 1.1em;
   }
h4 {
   font-size: 1.0em;
   }
ol {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   }
ol.la {
   list-style-type: lower-latin;
   list-style-type: lower-alpha;
   }
ol > li {
   margin-top: 0.2em;
   margin-bottom: 0.2em;
   }
p {
   margin: 0.5em 0 0.5em 0;
   }
p.tip {
   background: url(//graphics/sym-tip.gif)
               no-repeat
               top left;
   margin-left: -60px;
   padding-left: 60px;
   }
p.tip:first-line {
   font-weight: bold;
   }
table.tformat {
   font: 0.9em "trebuchet ms",arial,helvetica,sans-serif;
   padding: 0;
   border-spacing: 0;
   border-collapse: collapse;
   }
table.tformat td {
   text-align: left;
   vertical-align: top;
   }
table.tformat td.b {
   background-color: #f0f3f9;
   padding: 0.2em 25px 0.2em 0.5em;
   border: 1px solid #aab;
   border-width: 0 0 1px 0;
   }
table.tformat td.q {
   background-color: #fcf6e4;
   padding: 0.2em 25px 0.2em 0.5em;
   border: 1px solid #ca3;
   border-width: 0 0 1px 0;
   }
table.tformat th {
   text-align: left;
   vertical-align: top;
   }
table.tformat th.b {
   background-color: #f0f3f9;
   padding: 0.2em 25px 0.2em 0.5em;
   border: 3px solid #aab;
   border-width: 1px 0 3px;
   text-align: left;
   }
table.tformat th.q {
   background-color: #fcf6e4;
   padding: 0.2em 25px 0.2em 0.5em;
   border: 3px solid #ca3;
   border-width: 1px 0 3px;
   text-align: left;
   }

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>