Navigation nicht ausdrucken

[Urs Gamper]

Ich habe eine Seite, welche in zwei Spalten aufgeteilt ist. Die Linke Spalte beinhaltet die Navigation, die rechte Spalte den Seiteninhalt. Nun möchte ich lediglich den Inhalt - also die rechte Spalte - ausdrucken.
Wohl habe ich gesehen, dass es eine Möglichkeit mit class="noprint" gibt, doch finde ich nirgends, wie ich dasa bewerkstelligen muss.
danke im voraus für eure Hilfe!
Urs

[Tobias K.]

Hallo Urs,

Wohl habe ich gesehen, dass es eine Möglichkeit mit class="noprint" gibt, doch finde ich nirgends, wie ich dasa bewerkstelligen muss.

http://selfhtml.teamone.de/css/eigenschaften/printlayouts.htm (bzw. der Link unter "Allgemeines")

Grüße aus Nürnberg
Tobias

[molily]

Hallo, Urs,

Ich habe eine Seite, welche in zwei Spalten aufgeteilt ist. Die Linke Spalte beinhaltet die Navigation, die rechte Spalte den Seiteninhalt. Nun möchte ich lediglich den Inhalt - also die rechte Spalte - ausdrucken.
Wohl habe ich gesehen, dass es eine Möglichkeit mit class="noprint" gibt, doch finde ich nirgends, wie ich dasa bewerkstelligen muss.

Es gibt verschiedene Möglichkeiten, Stylesheet-Regeln einzubinden, welche speziell beim Drucken angewendet werden. Entweder indem die CSS-Regeln für die Druckausgabe in einer besonderen Datei untergebracht werden und wie gewohnt eingebunden werden, nur mit media="print": http://selfhtml.teamone.de/css/formate/einbinden.htm#link_media
Alternativ kannst du in einem Stylesheet, welches dann mindestens für die Ausgabetypen screen und print gilt, ein @media print {...} unterbringen. In diesem @media-Bereich kannst du dann die Styleregeln unterbringen, welche nur für die Druckausgabe gelten sollten, siehe http://selfhtml.teamone.de/css/formate/einbinden.htm#media.

Damit eine Tabellenzelle (Spalte) im Druckstylesheet adressiert werden kann, solltest du sie am Besten mit einer ID (id-Attribut) http://selfhtml.teamone.de/css/formate/zentrale.htm#individualformate oder auch wahlweise, wenn sie abgesehen davon keine Formatierungen benötigt, mit einer Klasse (class-Atttribut) http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen versehen.

Über die CSS-Eigenschaft display kannst du bestimmen, ob das Element angezeigt wird oder nicht, siehe http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display, der Wert »none« bedeutet, dass das Element nicht angezeigt wird. Diese Eigenschaft musst du im Stylesheet für die Druckausgabe für die Spalte vergeben.

Das sieht beispielsweise folgendermaßen aus:

Im Markup:
...<td id="navigationsspalte">...</td>...

Im Stylesheet, welches bspw. mit <link rel="stylesheet" type="text/css" href="..." media="screen,print" ...> eingebunden wurde:

@media print {
 #navigationsspalte {display:none;}
}

Wahrscheinlich verstehen nur neuere Browser die @media-Regel, weshalb spezielle ausgelagerte Druckstylesheets (Dateien) wie eingangs erwähnt vermutlich breiter unterstützt werden. Zudem kann es vielleicht Probleme beim Anzeigen der Layouttabelle geben, wenn die linke Spalte fehlt - benutze besser CSS-Layout, dann solltest du damit keine Probleme haben.

Grüße,
Mathias

[molily]

Das Posting bezog sich natürlich auf [pref:t=44295&m=241517].

Mathias

[Urs Gamper]

Erst mal gleich allen vielen Dank für die schnelle Reaktion!

Es ist mir eigentlich klar, dass ich die Variante mit der Einbindung eines zweiten CSS bevorzuge. So weit war ich eigentlich von Beginn weg.

Ich dachte mir deshalb, dass ich in einem externen CSS eine Klasse (z.B. .noprint) erstelle und diese der Zelle zuweise. Das wäre ja alles kein Problem. Was ich aber nicht begreife, wie ich nun diese Klasse definieren muss, damit sie mir schlussendlich auch nicht gedruckt wird :(

irgendwie steh ich da auf nem Schlauch.

[Thomas J.S.]

Hallo,

Was ich aber nicht begreife, wie ich nun diese Klasse definieren muss, damit sie mir schlussendlich auch nicht gedruckt wird :(

Du schreibst einfach in deinem CSS:

@media print {
  .noprint { diplay:none; }
}

.noprint {
  /* alle CSS-angaben für deine Navigation */
}

und in deinem HTML, weist du die Klasse zu:

<div  class="noprint">
<!-- in diesem div ist die navigation -->
</div>

Grüße
Thomas

[Thomas J.S.]

Hallo,

»» Wohl habe ich gesehen, dass es eine Möglichkeit mit class="noprint" gibt, doch finde ich nirgends, wie ich dasa bewerkstelligen muss.

Wie die Klasse heisst ist nicht von Bedeutung.

http://selfhtml.teamone.de/css/formate/einbinden.htm#media

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

Grüße
Thomas

[emu]

Hallo!

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

Davon würde ich abraten. Der IE5 hat einen Bug und wendet diese Regel willkürlich auch auf die Bildschirmausgabe an, manchmal erst nach einigen Sekunden, manchmal nachdem man gescrollt hat. Der Marktanteil ist viel zu hoch, als dass man ihn auf diese Weise praktisch ausschließen könnte, eventuell wäre es mit einem Conditional-Comments-Block möglich (wobei man dann natürlich die anderen Browser nicht vergessen darf.)

emu

[Sven Rautenberg]

Moin!

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

Davon würde ich abraten. Der IE5 hat einen Bug und wendet diese Regel willkürlich auch auf die Bildschirmausgabe an, manchmal erst nach einigen Sekunden, manchmal nachdem man gescrollt hat.

Der IE für Mac kennt @media gar nicht - diese Direktive kann man also im Prinzip komplett in die Tonne treten.

Allerdings ist es mit zwei CSS-Dateien, die für ihre jeweiliges Medium eingebunden sind, auch viel schöner. Zunächst die Screen-CSS gestalten. Diese Datei dann als Print-CSS kopieren. Nun kann man alle die Elemente, die man im Ausdruck nicht sehen will, mit "display:none" abschalten. Wenn die Navigation (was meist sinnvoll ist) in einem kompletten DIV mit eigener ID steht, ist das sehr simpel:

#navi { display:none; }

Was noch für die Druckausgabe zu beachten ist: Der Textinhalt sollte für die Druckausgabe _keinesfalls_ mit width in der Breite fest definiert werden, sondern _immer_ automatische Breite haben. So kann der Benutzer sich seine Seitenränder selber setzen, ohne dass vom Text was abgeschnitten wird.

In diesem Zusammenhang noch der gute Tipp: Opera hat eine sehr schöne, sehr schnell umschaltbare Druckdarstellung der Seite (ein Buttonklick), und außerdem die bislang beste Umsetzung von druck-spezifischen CSS-Eigenschaften. Es bietet sich an, ein Druckstylesheet mit diesem Browser zu entwickeln und dann hinterher zu gucken, was der Rest (Mozilla, aber vor allem IE) davon übrigläßt. Wobei man so wahnsinnig viele Alternativen dann eigentlich nicht hat, wenn es nicht funktioniert. Gewisse Dinge gehen einfach nicht.

- Sven Rautenberg