[css] Zwei Stylesheets einbinden

[Luckie]

Gibt es die Möglichkeit zwei Stylesheets zu definieren? Eins zur Darstellung auf dem Bildschirm und eins für eine Druckversion? Ich wollte da zum Beispiel die Navigation ausblenden usw. Und ich müsste dann noch wisse, wie man Seitenumbrüche erzwingt.

Und wie sähe dann im Dokument ein Link aus, der die Druckversion aufruft, ohne dass ich eine zweite Seite hinterlegen muss, mit der Druckversion.

[Meflin]

Das geht so:

Code:

<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

Media-Typen gibt es viele, u.a. auch für Handheld etc.

Edit: "Druckversion" gibts erstmal keine. Gehe in die Druckvorschau und du siehst deine Seite mit dem Print-Layout ;)

[S2B]

Schau dir mal das hier an: Stylesheets für unterschiedliche Medien

Zitat:

Zitat von Luckie

Und wie sähe dann im Dokument ein Link aus, der die Druckversion aufruft, ohne dass ich eine zweite Seite hinterlegen muss, mit der Druckversion.

Einen Link brauchst du dafür nicht, der Browser druckt deine Seite automatisch mit dem Druck-Stylesheet aus.

Edit: Doppelt hält besser. *g*

[Luckie]

Kann man Elemnet auch irgendwie auf Unsichtbar schalten?

Code:

div.nav {
  float: left;
  position: absolute;
  left: -180px;
  width: 150px;
  padding: 5px;
  background-color: #d8d8d8;
  border-width: 1px;
  border-style: solid;
  border-color: #808080;
}

div.googlead {
  position: absolute;
  left: -170px;
  top: 320px;
  width: 150px;
  padding: 5px;
}

Weil die will ich in der Druckversion nicht haben.

Und irgendwie werden Wörter am rechten Rand abgeschnitten. :?

[tr909]

display:none;

Zu dem Abgeschnittenen text :

Zitat:

Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:

visible = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet.
scroll = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

http://de.selfhtml.org/css/eigenscha...tionierung.htm

Gruß
tr909

[Luckie]

Ja, das habe ich auch schon gefunden. Hat aber leider keine Auswirkung auf die Druckansicht:

Code:

p {
  text-align: left;
  overflow: auto;
}

Mein Stylesheet:

Code:

/*

Stylesheet michael-puff.de
Copyright (c) 2002 - 2006 Michael Puff

*/

body {
  text-align: left;
  font-family: Arial, Sans-Serif;
  font-size: 80%;
  color: black;
  background-color: white; /*#FFFFEE;*/
}

h1, h2, h3, h4, h5 {
  margin-top: 20px;
  margin-bottom: 0px;
}

h2 {
  border-bottom: solid 2px;
  border-color: silver;
  padding-bottom: 5px;
}

div.nav {
  display: none;
}

div.googlead {
  display: none;
}

/*
  Absätze
*/

p {
  text-align: left;
}

p.alignright {
  text-align: right;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 3px;
  margin-bottom: 5px;
}

pre.precode {
  width: 800px;
  font-size: 8pt;
  font-family: "Courier New", Courier, Mono, monospace;
  color: black;
  background-color: #d8d8d8;
  border-width: 2px;
  border-style: solid;
  border-color: #808080;
  padding: 3px;
}

span.InLineCode {
  font-family:"Courier New",Courier,Mono;
  font-size: 11pt;
}

blockquote {
  text-align: justify;
  background-color: #DDDDCC;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #808080;
  padding: 5px;
}


/*
  Links
*/

a:link, a:visited, a:active {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*
  Tabellen
*/

table {
  border-width: 1px;
  border-style: solid;
  border-collapse: collapse;
  border-color: gray;
  font-size: 90%;
}

th {
  text-align: left;
  border-width: 1px;
  border-style: solid;
  padding: 3px;
  font-weight: bold;
}

td {
  padding: 3px;
  border-width: 1px;
  border-style: solid;
  vertical-align: top;
}


table.tblfooter {
  width: 100%;
  font-size: 90%;
  border-width: 0px;
  border-style: none;
}

td.left {
  text-align: left;
  font-style: italic;
  border-width: 0px;
  border-style: none;
}

td.right {
  text-align: right;
  font-style: italic;
  border-width: 0px;
  border-style: none;
}

Und das Ergebnis in der Druckvorschau:
http://www.michael-puff.de/Developer...sComCtrl32.php

[Meflin]

Zitat:

Zitat von Luckie

Ja, das habe ich auch schon gefunden. Hat aber leider keine Auswirkung auf die Druckansicht:

Wo genau ist das Problem? Bei mir (IE 7) sieht die Druckansicht eigentlich so aus als ob sie so gehören würde ;) Menü und Werbung ist weg!

[tr909]

Bei mir FF 2.006 sieht es der Druckvorschau auch gut aus. Wenn du die Seite so angezeigt haben möchtest wie in der Druckvorschau musst du das Stylesheet mit media="screen" statt media="print" einbinden

Gruß
tr909

[Luckie]

Ja aber rechts sind Wörter bei mir abgeschnitten. Siehe Anhang.:

@tr909: Das ist schon geschehen.

[Meflin]

Zitat:

Zitat von Luckie

Ja aber rechts sind Wörter bei mir abgeschnitten. Siehe Anhang.:

Auch das ist bei mir nicht der Fall. Welchen Browser benutzt du?

Du könntest versuchen, dem P eine Breitenangabe (100% oder so) zu geben. Dann sollte der Text auf jeden Fall umbrechen. Overflow kümmert sich ja eigentlich um die Scrollbalken.