nicht angemeldet
Druckfunktion
Hi,
mit Hilfe von Stylesheets kann ich bestimmte Seitenelemente in der Druckversion auszuschliessen. Dabei habe ich folgender Befehl in eine externe css-Datei eingesetzt:
.keindruck { display: none; }
das html-Dokument sieht vereinfacht so aus:
<html>
<head>
<link rel="stylesheet" href="../css/style.css" type="text/css">
<link rel="stylesheet" media="print" href="../css/print.css" type="text/css">
</head>
<body>
<table width="800">
<tr>
<td width="150"><div class="keindruck">Navigation</div></td>
<td>Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. </td>
</tr>
</table>
</body>
</html>
Somit kann ich die Navigation, die sich am linken Rand befindet, vom Druck ausschliessen, ohne eine extra Druckversion anzufertigen. Er bekommt nur den Inhalt der Seite ausgedruckt.
Da die Seite in der Breite auf 800px ausgelegt ist, muss ich den User darauf hinweisen, dass er auf Querformat umstellen muss. Der Raum, den die Navigation einnimmt, bleibt erhalten und der Inhalt wird im Hochformat an der rechten Seite abgeschnitten.
Ist es möglich, den Inhalt z.B. um 150px nach links zu schieben? So könnte die Seite trotzdem im Hochformat gedruckt werden, was den Usern sicher entgegen kommt.
Greetings
Herb
-
Hi,
mit Hilfe von Stylesheets kann ich bestimmte Seitenelemente in der Druckversion auszuschliessen. Dabei habe ich folgender Befehl in eine externe css-Datei eingesetzt:
.keindruck { display: none; }
das html-Dokument sieht vereinfacht so aus:
<html>
<head>
<link rel="stylesheet" href="../css/style.css" type="text/css">
<link rel="stylesheet" media="print" href="../css/print.css" type="text/css">
</head>
<body>
<table width="800">Warum 800? Damit Surfer mit 800*600 Bildschirm garantiert scrollen dürfen?
Ich würde per CSS
width:100%; max-width:120ex;
setzen (der genaue Wert für max-width ist natürlich Geschmackssache...)<tr>
<td width="150"><div class="keindruck">Navigation</div></td>Wozu das div? laß es weg und setz das class-Attribut in die Tabellenzelle.
<td>Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. Hier steht der Inhalt. </td>
</tr>
</table>
</body>
</html>Da die Seite in der Breite auf 800px ausgelegt ist, muss ich den User darauf hinweisen, dass er auf Querformat umstellen muss. Der Raum, den die Navigation einnimmt, bleibt erhalten und der Inhalt wird im Hochformat an der rechten Seite abgeschnitten.
s.o., das erledigt das Problem.
Ist es möglich, den Inhalt z.B. um 150px nach links zu schieben? So könnte die Seite trotzdem im Hochformat gedruckt werden, was den Usern sicher entgegen kommt.
s.o., wenn Du nicht das div aussschaltest, sondern die ganze Tabellenzelle, ist das Problem weg.
Andreas
-
Hi,
Warum 800? Damit Surfer mit 800*600 Bildschirm garantiert scrollen dürfen?
Wie meinst Du das? Vertikal scrollen müssen auch Surfer mit grösserem Monitor wegen des unterschiedlich langen Inhalts, horizontal soll niemand scrollen. 800px sind hier ein Beispiel, vielleicht wäre 700px geschickter gewesen. Ich habe aus Layoutgründen mit "div id" im css gearbeitet und wollte das Beispiel vereinfachen, daher die Tabelle. Jedenfalls ist es so, dass mir in der Druckvorschau der rechte Rand abgeschnitten wird. Daher würde ich gern die "div id" des Inhalts für den Druck nach links verschieben.
Nichts desto trotz danke für die Antwort, nur hilft sie mir leider nicht weiter.
Greetings
Herb-
Hi,
Warum 800? Damit Surfer mit 800*600 Bildschirm garantiert scrollen dürfen?
Wie meinst Du das? Vertikal scrollen müssen auch Surfer mit grösserem Monitor wegen des unterschiedlich langen Inhalts, horizontal soll niemand scrollen.
|
|
vertikal: |
|
Vhorizontal: --------->
800px sind hier ein Beispiel, vielleicht wäre 700px geschickter gewesen.
240px ist die Breite meines PDA-Displays. Aus diesem Grund solltest du dich von festen (bzw. Minimal-)breiten grundsätzlich verabschieden.
Ich habe aus Layoutgründen mit "div id" im css gearbeitet und wollte das Beispiel vereinfachen, daher die Tabelle.
Ein CSS-Layout lässt sich durch eine Tabelle sicher nicht vereinfachen ;)
Jedenfalls ist es so, dass mir in der Druckvorschau der rechte Rand abgeschnitten wird.
Weil die Seite zu breit ist und die Elemente nicht fließen können, sondern einzementiert sind - ein Problem von Tabellen. Abgesehen davon hat der M$IE ein Problem beim Druck, er schneidet rechts gerne etwas ab.
Daher würde ich gern die "div id" des Inhalts für den Druck nach links verschieben.
Du kannst Elemente (im Beispiel ein DIV) vom Druck ausschließen:
@media print {
#element { display:none; }
}
Mit dieser Methode kannst du für das Drucklayout natürlich auch anderen Maße definieren.
http://selfhtml.teamone.de/css/formate/einbinden.htm#media
http://selfhtml.teamone.de/css/eigenschaften/printlayouts.htmÜbrigens beträgt die Breite meines Browserfensters 858px bei einer Auflösung von 1152*864. Ich sage nur Sidebars...
LG Orlando
-
-