nicht angemeldet
DIN A4 Format
Hallo zusammen!
Gibt es einen Trick, mit dem man Webseiten so gestalten kann, dass diese im DIN-A4-Format ausgedruckt werden können, ohne dass oben, unten und an den Seitenrändern etwas abgeschnitten wird?
Die Breite habe ich zwar einigermaßen im Griff, indem ich den ganzen Text in eine Tabelle mit der Angabe <table width="600"> einsperre, aber ich weiß nicht, wie ich die passende Höhe zuverlässig hinbekomme.
Gruß GK
-
Hallo!
Gibt es einen Trick, mit dem man Webseiten so gestalten kann, dass diese im DIN-A4-Format ausgedruckt werden können, ohne dass oben, unten und an den Seitenrändern etwas abgeschnitten wird?
Schau' dir mal http://de.selfhtml.org/css/eigenschaften/printlayouts.htm an. Leider mangelt es bis heute an einer vernünftigen Unterstützung durch die Browser. Opera ist hier noch am weitesten.
Im Gegensatz zu screen orientierten Ausgabemedien kann man bei der Druckausgabe durchaus eine Schriftgröße fest vorgeben (in pt). Somit kannst du vorher ermitteln (jedenfalls ungefähr, da ja Ränder u.a. auch vom jeweiligen Drucker abhängig sind), wieviel Text auf eine DIN A4 Seite passt, und an den entsprechenden Stellen verwendest du dann page-break-before: oder page-break-after:.
Den Text für die Bildschirmausgabe extra zu begrenzen ist nicht erforderlich und das Ganze auch noch mit einer Tabelle zu machen ist verwerflich. Verwende einfach unterschiedliche Stylesheets für die verschiedenen Medien - siehe Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien
Gruß Gunther
-
Hallo Gunther!
Danke für diese Tips. Ich habe mir die beiden Links ausgedruckt und studiere das mal in aller Ruhe.
Eine Frage habe ich aber doch:
Wieso findest du es "verwerflich", dieses Problem mit einer Tabelle zu lösen?Ich habe schon viele Layout-Probleme mit Tabellen und transparenten Grafiken (mit WIDTH & HEIGHT-Angaben) gelöst; das hat den riesigen Vorteil, dass es einigermaßen unabhängig vom Browsertyp funktioniert.
Zweifellos sind CSS und Javascript gute Add-Ons, um dem Design mehr Pfiff zu geben, aber ich habe mir zum Ziel gesetzt, dass meine Webseiten auch unter reinem HTML mit uralten Browsern funktionieren müssen und ansehnlich sein sollen!
(Ich teste alles mit Netscape 3.0, welches kein CSS versteht und viele neue Javascript-Befehle noch nicht kennt.)Gruß GK
-
Hallo GK!
Eine Frage habe ich aber doch:
Wieso findest du es "verwerflich", dieses Problem mit einer Tabelle zu lösen?Weil das semantisch nicht korrekt ist. Das ist das alte Thema "Tabellen nicht zu layoutzwecken zu missbrauchen". Tabellen in HTML sind für tabellarische Daten da und sonst für nichts.
Ich habe schon viele Layout-Probleme mit Tabellen und transparenten Grafiken (mit WIDTH & HEIGHT-Angaben) gelöst; das hat den riesigen Vorteil, dass es einigermaßen unabhängig vom Browsertyp funktioniert.
Das ist eins der Probleme: Es funktioniert.
Nur ist es eben nicht im Sinne des Erfinders, der eine strikte Trennung von Inhalt und Design/Layout fordert.Zweifellos sind CSS und Javascript gute Add-Ons, um dem Design mehr Pfiff zu geben,
Nein. CSS ist eine Auszeichnungssprache mit der du u.a. deinen HTML Seiten übrhaupt erst ein Design gibst, und Javascript ist eine clientseitige Scriptsprache.
aber ich habe mir zum Ziel gesetzt, dass meine Webseiten auch unter reinem HTML mit uralten Browsern funktionieren müssen und ansehnlich sein sollen!
Diese Zielsetzung würde ich nochmal überdenken. Zwar sollten alle Inhalte für jeden Browser zugänglich sein, doch deshalb das Design auf die Möglichkeiten von Uralt-Browsern zu beschränken scheint mir nicht sinnvoll.
(Ich teste alles mit Netscape 3.0, welches kein CSS versteht und viele neue Javascript-Befehle noch nicht kennt.)
Wer ist denn bitte mit so alten Browsern im Web unterwegs? Und selbst wenn, dann schließe diese Browser halt von deinem CSS aus (sofern sie es überhaupt verstehen) und liefere ihnen nur den reinen HTML Teil. Wer mit solch antiquierten Browsern surft, der darf eben auch keine Erwartungen an ein "super Design" haben. Und allen anderen bietest du ein schönes CSS Design an (was durch die Unzulänglichkeiten & Bugs der diversen Browser leider etwas umständlicher ist, als es eigentlich sein müsste).
Kombiniert mit den bereits erwähnten unterschiedlichen Stylesheets für verschiedene Ausgabemedien hast du dann für alle Anforderungen und Besucher eine "top" Website.
Also gehe mit der Zeit und orientiere dich an den Standards.
Gruß Gunther
-
Hallo Gunther,
erstmal vielen Dank für den Tip und Link mit dem Seitenlayout.
Ich habe den Seitenumbruch mit einem klassifizierten <HR>-Tag gebastelt, was auch gut funktioniert:
<html><head>
<style type="text/css">
<!--
hr.seitentrenner {page-break-after:always; visibility:hidden;}
-->
</style>
</head>
<body>
<h1>Seite 1</h1>
Bla bla bla ...
<hr class="seitentrenner">
<h1>Seite 2</h1>
...
</body></html>Blöd ist nur, dass bei Seiten mit wenig Text in der Druckvorschau und auf der ausgedruckten Seite die Zeilen immer in die Mitte der Seite zentriert werden. Wie kriege ich es hin, dass der Text immer oben auf der Seite anfängt?
Gibt es außerdem einen Trick, mit dem man in der Druckvorschau bzw. der ausgedruckten Seite die Kopf- und Fußzeilen wegbekommt oder zumindest soweit manipulieren kann, dass die URL nicht mehr angezeigt wird.So, und jetzt noch etwas zu unserer Design-Debatte:
Eine Frage habe ich aber doch:
Wieso findest du es "verwerflich", dieses Problem mit einer Tabelle zu lösen?» Weil das semantisch nicht korrekt ist. Das ist das alte Thema "Tabellen nicht zu layoutzwecken zu missbrauchen". Tabellen in HTML sind für tabellarische Daten da und sonst für nichts.
Ist das Vorschrift? Wenn ja, wo steht das? Mir klingt das nämlich sehr nach Kadavergehorsam.
Ich habe schon viele Layout-Probleme mit Tabellen und transparenten Grafiken (mit WIDTH & HEIGHT-Angaben) gelöst; das hat den riesigen Vorteil, dass es einigermaßen unabhängig vom Browsertyp funktioniert.
» Das ist eins der Probleme: Es funktioniert.
Genau!! Das ist doch kein Problem, sondern gerade das Gute daran!
» Nur ist es eben nicht im Sinne des Erfinders, der eine strikte Trennung von Inhalt und Design/Layout fordert.
Nochmal: Wer fordert das?
Zweifellos sind CSS und Javascript gute Add-Ons, um dem Design mehr Pfiff zu geben,
» Nein. CSS ist eine Auszeichnungssprache mit der du u.a. deinen HTML Seiten übrhaupt erst ein Design gibst.
Wie gesagt, das sehe ich anders: CSS ist eine feine Sache, um z.B. mehr als die 7 Schriftgrößen von HTML zu ermöglichen, oder um bei größeren Tabellen die in reinem HTML hinter jedem <TD> zu wiederholenden <FONT...>-Angaben nur einmal zentral festzulegen und noch viele schöne Dinge mehr. Ich wende das auch gerne an - und doch bin ich der Meinung, dass Webseiten auch ohne CSS, Javascript und Frames (die ich ohnehin nur im äußersten Notfall verwende) funktionieren müssen und das Layout darf dann auch nicht zusammenklappen!
» und Javascript ist eine clientseitige Scriptsprache.
Klar, deswegen deswegen baue ich dynamische Und interaktive Effekte immer mit PHP oder CGI/Perl auf, weil das serverseitig und damit unabhängig vom Browser und dessen Einstellungen abläuft. Auf meinen Seiten muss alles wesentliche auch ohne Javascript laufen, und wenn es wirklich mal notwendig ist (z.B. ein Formular, das auch offline als Taschenrechner funktionieren soll), darf das bei ausgeschaltetem Javascript auf keinen Fall als nicht funktionierende "Leiche" angezeigt werden. Daher habe ich immer eine Alternative zwischen <NOSCRIPT> </NOSCRIPT> im Angebot, ggf. mit dem Hinweis, Javascript einzuschalten.
aber ich habe mir zum Ziel gesetzt, dass meine Webseiten auch unter reinem HTML mit uralten Browsern funktionieren müssen und ansehnlich sein sollen!
» Diese Zielsetzung würde ich nochmal überdenken. Zwar sollten alle Inhalte für jeden Browser zugänglich sein, doch deshalb das Design auf die Möglichkeiten von Uralt-Browsern zu beschränken scheint mir nicht sinnvoll.
Das ist keine Beschränkung, sondern genau das Gegenteil, weil das nämlich überall funktioniert.
(Ich teste alles mit Netscape 3.0, welches kein CSS versteht und viele neue Javascript-Befehle noch nicht kennt.)
» Wer ist denn bitte mit so alten Browsern im Web unterwegs?
Wohl fast keiner mehr, aber darum geht es auch nicht, sondern das ist für mich das ideale Testmedium: Was mit Netscape 3.0 Javascript läuft, funktioniert auch auf allen anderen Browsern!
» Und selbst wenn, dann schließe diese Browser halt von deinem CSS aus (sofern sie es überhaupt verstehen) und liefere ihnen nur den reinen HTML Teil. Wer mit solch antiquierten Browsern surft, der darf eben auch keine Erwartungen an ein "super Design" haben. Und allen anderen bietest du ein schönes CSS Design an (was durch die Unzulänglichkeiten & Bugs der diversen Browser leider etwas umständlicher ist, als es eigentlich sein müsste).
Richtig, das ist nämlich das unangenehme an CSS, und genau darum setze ich das möglichst sparsam ein; dasselbe gilt auch für Javascript.
Selbstverständlich teste ich meine Seiten auch mit diversen modernen Browsern. Nur selten erlebe ich da böse Überraschungen, eben weil ich soweit wie möglich beim guten alten HTML bleibe.Gruß - G. Keule
-
Hallo,
erstmal vielen Dank für den Tip und Link mit dem Seitenlayout.
Ich habe den Seitenumbruch mit einem klassifizierten <HR>-Tag gebastelt, was auch gut funktioniert:
»»
> <!DOCTYPE HTML PUBLIC "-//W3C// Strict DTD HTML 4.0 //EN"> > <html> > <head> > <title>page-break Test</title> > <style type="text/css"> > <!-- > hr.seitentrenner {page-break-after:always; visibility:hidden;} > --> > </style> > </head> > <body> > <h1>Seite 1</h1> > <p>Bla bla bla ...</p> > <hr class="seitentrenner"> > <h1>Seite 2</h1> > <p>...</p> > </body></html>Blöd ist nur, dass bei Seiten mit wenig Text in der Druckvorschau und auf der ausgedruckten Seite die Zeilen immer in die Mitte der Seite zentriert werden.
Kann ich nicht nachvollziehen. Weder mein FF 1.5.0.7, noch mein IE 6 weisen dieses Verhalten auf. Bei mir sind die Seiteninhalte jeweils oben auf der Seite ausgerichtet.
Wie kriege ich es hin, dass der Text immer oben auf der Seite anfängt?
Liegt es evt. an einer entsprechenden Druckereinstellung bei dir (wie etwa "auf Seite zentrieren")?
Gibt es außerdem einen Trick, mit dem man in der Druckvorschau bzw. der ausgedruckten Seite die Kopf- und Fußzeilen wegbekommt oder zumindest soweit manipulieren kann, dass die URL nicht mehr angezeigt wird.
Ja! Gehe in deine Druckvorschau und konfiguriere deine Einstellungen für die Kopf- und Fußzeile entsprechend.
Das ist eine Konfigurationseinstellung, die jeder User lokal für sich selbst bestimmt (und das ist auch gut so).
So, und jetzt noch etwas zu unserer Design-Debatte:
Eine Frage habe ich aber doch:
Wieso findest du es "verwerflich", dieses Problem mit einer Tabelle zu lösen?» Weil das semantisch nicht korrekt ist. Das ist das alte Thema "Tabellen nicht zu layoutzwecken zu missbrauchen". Tabellen in HTML sind für tabellarische Daten da und sonst für nichts.
Ist das Vorschrift?
Was heisst "Vorschrift"? Es ist per Definition so.
Wenn ja, wo steht das? Mir klingt das nämlich sehr nach Kadavergehorsam.
U.a. hier. Und die "Anmerkung der Übersetzer:" kannst du gleich als Argument vergessen, da der Text von 1999 stammt, und die Anmerkung somit für die heutige Zeit nicht mehr zutreffend ist.
Ich habe schon viele Layout-Probleme mit Tabellen und transparenten Grafiken (mit WIDTH & HEIGHT-Angaben) gelöst; das hat den riesigen Vorteil, dass es einigermaßen unabhängig vom Browsertyp funktioniert.
» Das ist eins der Probleme: Es funktioniert.
Genau!! Das ist doch kein Problem, sondern gerade das Gute daran!
Nein, ist es nicht. Du verwendest 'Techniken' in einer nicht vorgesehenen Art & Weise. Das wird nicht dadurch "gut", nur weil es funktioniert.
» Nur ist es eben nicht im Sinne des Erfinders, der eine strikte Trennung von Inhalt und Design/Layout fordert.
Nochmal: Wer fordert das?
Das ist ja nun müsig zu diskutieren. Wenn du dich mal etwas eingehender mit dieser Frage beschäftigen möchtest, empfehle ich: http://www.google.de/search?q=trennung+von+Inhalt+und+Design
Zweifellos sind CSS und Javascript gute Add-Ons, um dem Design mehr Pfiff zu geben,
» Nein. CSS ist eine Auszeichnungssprache mit der du u.a. deinen HTML Seiten überhaupt erst ein Design gibst.Wie gesagt, das sehe ich anders: CSS ist eine feine Sache, um z.B. mehr als die 7 Schriftgrößen von HTML zu ermöglichen, oder um bei größeren Tabellen die in reinem HTML hinter jedem <TD> zu wiederholenden <FONT...>-Angaben nur einmal zentral festzulegen und noch viele schöne Dinge mehr.
Wenn du das so siehst, scheint mir, dass du den Sinn & Zweck von CSS nicht (richtig) verstanden hast.
Ich wende das auch gerne an - und doch bin ich der Meinung, dass Webseiten auch ohne CSS, Javascript und Frames (die ich ohnehin nur im äußersten Notfall verwende) funktionieren müssen und das Layout darf dann auch nicht zusammenklappen!
Das ist das Problem, welches aus_deinem_Verständnis von HTML und CSS resultiert. Ich sehe das so: kein CSS => kein Layout! In diesem Fall bekommt der Client eben nur das HTML-Dokument geliefert. Das ist übrigens der klassische Fall, wenn ein User einen Nur-Text Browser wie Lynx verwendet.
Du scheinst mir den typischen (Amateur-) Denkfehler zu machen, und davon auszugehen, dass sich jeder User deine Seiten auf einem Monitor mit einer Mindest-Viewportgröße von 1024px x 768px anschaut. Dem ist aber nicht so! Und hier haben wir wieder eins der Argumente für 1. die Trennung von Inhalt und Design/Layout und 2. die Verwendung von CSS für das Design/Layout. Denn durch die Verwendung verschiedener Stylesheets für unterschiedliche Ausgabemedien, kann man jedem User seine Inhalte in einer möglichst optimalen Form anbieten. Was meinst du, wie sich deine Webseite mit ihren wüsten Tabellenkonstrukten und irgendwelchen Blind-Gifs bei einer Sprachausgabe anhört (Stichwort: "barrierearmes Webdesign")?
aber ich habe mir zum Ziel gesetzt, dass meine Webseiten auch unter reinem HTML mit uralten Browsern funktionieren müssen
soweit vollkommen OK.
und ansehnlich sein sollen!
das ist für mich ein Widerspruch in sich (alter Browser = fehlende CSS-Unterstützung = fehlende Ansehnlichkeit).
» Diese Zielsetzung würde ich nochmal überdenken. Zwar sollten alle Inhalte für jeden Browser zugänglich sein, doch deshalb das Design auf die Möglichkeiten von Uralt-Browsern zu beschränken scheint mir nicht sinnvoll.
Das ist keine Beschränkung, sondern genau das Gegenteil, weil das nämlich überall funktioniert.
Nein, das zeigt lediglich, dass du nicht in der Lage bist, neuere 'Techniken' so zu verwenden, dass das Resultat dasselbe ist, nämlich dass es auch überall funktioniert.
(Ich teste alles mit Netscape 3.0, welches kein CSS versteht und viele neue Javascript-Befehle noch nicht kennt.)
» Wer ist denn bitte mit so alten Browsern im Web unterwegs?Wohl fast keiner mehr, aber darum geht es auch nicht, sondern das ist für mich das ideale Testmedium: Was mit Netscape 3.0 Javascript läuft, funktioniert auch auf allen anderen Browsern!
» Und selbst wenn, dann schließe diese Browser halt von deinem CSS aus (sofern sie es überhaupt verstehen) und liefere ihnen nur den reinen HTML Teil. Wer mit solch antiquierten Browsern surft, der darf eben auch keine Erwartungen an ein "super Design" haben. Und allen anderen bietest du ein schönes CSS Design an (was durch die Unzulänglichkeiten & Bugs der diversen Browser leider etwas umständlicher ist, als es eigentlich sein müsste).
Richtig, das ist nämlich das unangenehme an CSS, und genau darum setze ich das möglichst sparsam ein;
Ja, das Unangenehme an vielen 'Techniken' ist, dass man sie erstmal erlernen und sich damit auseinandersetzen muss.
dasselbe gilt auch für Javascript.
genau (s.o.)!
Selbstverständlich teste ich meine Seiten auch mit diversen modernen Browsern. Nur selten erlebe ich da böse Überraschungen, eben weil ich soweit wie möglich beim guten alten HTML bleibe.
Na dann ein "Hoch" auf die ewig Gestrigen. "Weg mit dem Fortschritt - gestern ging's ja auch ohne!"
Gruß Gunther
-
-
-
-