Drucklayouts mit CSS - Beispiel 03

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 {
   color: #000;
   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 {
   color: #99c;
   background-color: #fffefc;
   font-size: 0.86em;
   text-align: center;
   padding: 0.8em 0.8em 1.8em 0.8em;
   border: 1px solid #325;
   border-width: 0;
   margin: 0 0 -1em 148px;
   }
#printbottom {
   display: none;
   }
#navigation {
   color: #000;
   background: #fcf5ec;
   background-image: url(//graphics/css-back-nav-a-top-2.gif);
   background-position: 100% 1px;
   background-repeat: no-repeat;
   line-height: 20px;
   padding: 8px 0 0 0;
   border: none;
   margin: 140px 0 0 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 148px;
   }
/* Body */
body {
   font: 15px "Trebuchet MS",Verdana,sans-serif;
   color: #000;
   background: #fffefc
               url(//graphics/css-back-11.gif)
               fixed;
   padding: 0;
   margin: 0;
   }
html > body {           /* Gilt nicht für IE */
   max-width: 1005px;
   min-width:  820px;
   }
* html body {           /*  Gilt nur für IE  */
   width: 1005px;
   }
/* Header-Navigation */
#top-navigation {
   background-color: transparent;
   padding: 0;
   border: none;
   height: 31px;
   margin: 0;
   position: absolute;
   top: 109px;
   left: 0px;
   }
#top-navigation li {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   display: inline;
   }
#top-navigation ul {
   background-color: transparent;
   padding: 0;
   margin: 0;
   }
#top-navigation a {
   font: bold 0.93em sans-serif;
   color: #000;
   text-decoration: none;
   padding: 0;
   border: 0;
   margin: 0px;
   height: 31px;
   display: block;
   float: left;
   }
#top-navigation a.thom {
   width:72px;
   }
#top-navigation a.tqrf {
   width:159px;
   }
#top-navigation a.tref {
   width:100px;
   }
#top-navigation a.tbas {
   width:119px;
   }
#top-navigation a.ttut {
   width:178px;
   }
#top-navigation a.tqui {
   width:59px;
   }
#top-navigation a.tgen {
   width:124px;
   }
/* Navigation */
#navigation div {
   color: #000;
   padding: 0;
   border: none;
   margin: 0;
   list-style: none;
   width: 148px;
   }
#navigation a {
   background-image: url(//graphics/css-back-nav-a-8.gif);
   background-position: 100% 100%;
   background-repeat: repeat-y;
   text-decoration: none;
   font-size: 0.86em;
   line-height: 20px;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   padding: 0px 22px 0 7px;
   border: none;
   margin: 0;
   width: 119px;
   display: block;
   position: relative;
   }
#navigation a.h1 {
   font-size: 1em;
   font-weight: bold;
   padding: 10px 22px 0 7px;
   }
#navigation a:link {
   color: #000;
   }
#navigation a:visited {
   color: #666;
   }
#navigation div a:hover,
#navigation div a:focus {
   color: #085192;
   background-color: #ecf5fc;
   background-image: url(//graphics/css-back-nav-a-7.gif);
   background-position: 100% 100%;
   background-repeat: repeat-y;
   border: none;
   margin: 0;
   width: 119px;
   }
/* Fußteil */
#bottom p a {
   color: #77b;
   background: transparent;
   text-decoration: none;
   padding: 1px 4px;
   border: 1px solid #77b;
   border-width: 1px 0 1px 1px;
   }
#bottom p a:hover, #bottom p a:active {
   color: #006;
   background: #bbd;
   text-decoration: none;
   }
#bottom a.last {
   border-width: 1px;
   }
#bottom td a:hover, #bottom td a:active {
   color: #006;
   background: transparent;
   text-decoration: none;
   }
#bottom .logo {            /* logo */
   text-align: center;
   vertical-align: bottom;
   line-height: 3em;
   border: none;
   }
#bottom .logo img {
   border:none;
   }
#bottom hr {
   margin: 1em 2em 1em 85px;
   border: 1px solid #eee;
   height: 1px;
   }
/* (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>