Druckbereich festlegen

tschaly

Hallo,
ich möchte bei einer Homepageseite einen bestimmten Druckbereich festlegen. Also z.B.

sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed Druck beginnen ---> diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <--- Druck Ende sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Wie lege ich diesen Bereich in einer CSS Printatei fest, was muß ich in der HTML Seite festlegen.

Schon mal Danke
tschaly

MrMurphy

Hallo

Zitat

ich möchte bei einer Homepageseite einen bestimmten Druckbereich festlegen

Das hört sich eher nach einer Tabellenkalkulation an. In Webseiten funktioniert es anders, dort können keine Druckbereiche festgelegt werden.

Die Teile, welche nicht ausgedruckt werden sollen, werden in Container eingeschlossen, welche eine Klasse bekommen, zum Beispiel mit dem Namen "nichtdrucken". Der Name kann natürlich beliebig gewählt werden sofern er nach den CSS-Regeln zulässig ist. In deinem Beispiel bieten sich als Container span-Elemente an.

Anschließend wird im CSS festgelegt, dass die Elemente mit der Klasse "nichtdrucken" nicht ausgedruckt werden, zum Beispiel:

Code

@media print {
      .nichtdrucken {
         display: none;
      }
   }

Dazu kann natürlich auch eine komplette CSS-Datei nur für die Druckausgabe verwendet werden.

Eine komplette Datei könnte dann folgendermaßen aussehen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Druckbereich 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 1rem;
         margin: 0;
      }
   }


   @media print {
      .nichtdrucken {
         display: none;
      }
   }


   </style>
</head>
<body>
   <p><span class="nichtdrucken">sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed </span>diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<span class="nichtdrucken"> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span></p>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

tschaly

@ Mr.Murphy,
danke für die Infos. Leider habe ich damit kein Erfolg gehabt. Meine Homepage ist in zwei Spalten (Tabelle) aufgeteilt. Linke Spalte ein Javascript Menu, in der rechten Spalte der Content. Es wird zwar alles was nicht benötigt wirdunterdrückt und nicht gedruckt, jedoch der Platz für das Menu
bleibt bestehen. Für den Content ist da dann zu wenig Platz vorhanden, siehe Anhang
Sorry ich habe von der Materie keine Ahnung. CSS ist das was zu Essen ???

Gruß
tschaly

modem-kind

Moin,
verstehe ich nicht ganz.. Du hast es doch auf dem rechten Bild wie es wolltest..
oder ist das eine andere Html Datei ohne Menue .. -

ansonsten stellt sich mir die Frage ob Du
bei @Media print visibility: hidden; benutzt hast - > statt display: none;

kannst Du nicht mal einen link zur Seite schicken .. ! ?

und Ja - CSS ist lecker was zum futtern...

Gruß modem-kind

tschaly

@ modem-kind

Hallo,
ja die rechte Version ist Handmate (Druckversion) ohne Menu.
In der CSS ist display: none; verwendet.
Hier mal 2 Test links
1 soll soll es sein: http://www.bund-der-katzenfreunde.de/test/test_1.htm
2.so nicht: http://www.bund-der-katzenfreunde.de/test/test_2.htm
Vorsicht: in der CSS herrscht Chaos.
Wie gesagt: CSS ist lecker was zum futtern...

Gruß
tschaly

modem-kind

okay..
dann kopiere das mal ( die ganze blaue Zeile) in Deine stylesheet.css im > css Ordner !

@media print { .menu { display:none; padding:0px; margin:0px; }}

Genauso .. mit ALLEM klammern wie es hier steht

am besten ganz oben - Über .headline

und dann probiere es aus..

Good luck modem-kind

Tags