[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.

[Luckie]

Firefox 2.0.0.5. und wenn ich ihn neu starte hab eich Firefox 2.0.0.6. ;) Im IE habe ich mich noch gar nicht getraut es mir anzugucken. ;)

Auch das hilft nicht:

Code:

p {
  text-align: left;
  width: 100%;
}

Nachtrag: Der IE macht es richtig. :wall:

[tr909]

Jup. Bei mir sieht es auch so aus. Beim Ausdruck ist es aber richtig.

Aber schau mal hier : http://de.selfhtml.org/css/eigenscha...intlayouts.htm
evtl. Mal mit @page (margin-right xx:px) experimentieren

Gruß
tr909

[Luckie]

Hm, im Ausdruck stimmt es wieder. OK, dann hat sich das erledigt.

[DGL-luke]

Seitenumbrüche und sowas setzt zur Zeit der Opera am besten um, glaube ich. Ich hatte da mal was getestet.

[Luckie]

Ich habe es fast geschafft. Nur ein Link will nicht verschwinden:

Code:

[url="http://www.michael-puff.de/forum/viewforum.php?f=22"][b]Artikel kommentieren[/b][/url]

Und die CSS-Datei dazu:

Code:

/*
  Links
*/

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

a:hover {
  text-decoration: underline;
}

a.comment {
  display: none;
}

Aber im Druck ist der Link immer noch zu sehen. Aber da ist er ja überflüssig, also soll er dort verschwinden.

Alles zurück, geht. Ich hatte nur vergessen die Datei hochzuladen. :wall:

[Luckie]

So, das Ergebnis meiner Bemühungen:
http://www.michael-puff.de/Developer...sComCtrl32.php

Ich hoffe damit spare ich mir die PDF-Versionen der Artikel zum Ausdrucken. Und wer trotzdem eine PDF-Version will, muss eben einen PDF-Drucker benutzen. :?

[tr909]

Sehr schön.
Aber du könntest natürlich auch automatisch nach pdf umwandeln lassen und zum download anbieten, so wie hier in der DP ;)

Gruß
tr909

[Luckie]

Ich glaube, das unterstützt mein Webspace nicht. Wäre aber natürlich eine feine Sache. Wie funktioniert denn das und was brauche ich dazu?

[fkerber]

Hi!

Da solltest du hier Infos finden:
http://www.dynamicwebpages.de/50.tut..._tutorialID=11


Ciao, Frederic

[jfheins]

Zitat:

Zitat von Luckie

Ich glaube, das unterstützt mein Webspace nicht. Wäre aber natürlich eine feine Sache. Wie funktioniert denn das und was brauche ich dazu?

Zur Unterstützung: IIRC muss dazu dein PHP nur die pdf-extension installiert haben, sonst ist keine besondere Unterstützung notwendig (zur not kann man ja fragen ...) ;)

Guck aber auch noch mal da: http://de2.php.net/manual/en/ref.pdf.php