Drucklayouts mit CSS - Beispiel 08b

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:

/* Layout */
#top-across {
   display: none;
   margin: 0;
   border: none;
   padding: 0;
   }
#top-navigation {
   display: none;
   }
#logo {
   width: 372px
   height: 54px;
   padding: 0;
   border: none;
   margin: 0 0 0.5em;
   float: left;
   }
#logo img {
   border: none;
   }
#main-text {
   padding: 0 0 0 20mm;
   border: none;
   margin: 0;
   }
#bottom {
   display: none;
   }
#printbottom {
   padding: 10mm 0 0;
   border: none;
   margin: 0;
  }
#navigation {
   display: none
   }
#anzeige {
   color: #000;
   background: #ecf5fc;
   padding: 3mm;
   border: 1px solid;
   margin: 5mm 0  5mm 3mm;
   width: 25mm;
   float: right;
   }
div.clear-line {
   clear: both;
   }
/* Body */
body {
   font: 15px Georgia,"Times New Roman",Chicago,Charcoal,serif;
   color: #000;
   background: #ffffff;
   padding: 0;
   margin: 0;
   }
/* (Textformatierungen werder später noch genauer betrachtet) */

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="logo">                       <!-- Nur Logo -->
     ...
    </div>
    <div id="top-navigation">             <!-- Nur Navigationsbalken -->
     ...
    </div>
</div>
<div class="clear-line"></div>        <!-- unsichtb. Trennlinie -->
<div id="anzeige">                    <!-- Werbung -->
 ...
</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>