Drucklayouts mit CSS - Beispiel 06

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.

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;
   }
#main-text {
   padding: 0 0 0 20mm;
   border: none;
   margin: 0;
   background: #fffefc
               url(//graphics/css-back-main-1.gif)
               repeat-x;
   padding: 2em 2em 2em 85px;
   border: 1px solid #fffefc;
   border-width: 1px 0 1px 0;
   margin: 0 0 0 148px;
   }
#bottom {
   display: none;
   }
#printbottom {
   display: none;
   }
#navigation {
   display: none
   }
/* Body */
body {
   font: 15px Georgia,"Times New Roman",Chicago,Charcoal,serif;
   color: #000;
   background: #ffffff;
   padding: 0;
   margin: 0;
   }
html > body {
   max-width: 1005px;
   min-width:  820px;
   }
* html body {
   width: 1005px;
   }
/* (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="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>