CSS Website auf DIN A4 größe zum Drucken

Olunixus · 20. Mai 2012

Hi,
ich möchte eine Website erstellen die exakt DIN A4 größe hat, um den Inhalt mit CSS so platzieren zu können dass Texte an der exakt richtigen Stelle auf dem Papier gedruckt werden (habe ein paar ausdrucke in DIN A4 wo ich lücken, teilweise mit daten aus einer mysql-datenbank gezielt füllen möchte; sonst könnt ich ja auch word verwenden). Habe jetzt folgendes:

HTML:

<body>
<div id="papierformat">

Druckseite

</div>
</body>

Code:

#papierformat {
    height: 257mm;
    width: 170mm;
  /*  background-color: #FF0000; */
    margin: 20mm;
    border-color: #000000;
    border-style: solid;
}

Rahmen und Hintergrund verschwinden nachher, dient im moment nur zum testen.
Wenn ich die Seite nun mit Firefox drucken möchte habe ich bei 100% skalierung links und oben einen wesentlich dickeren Rand als rechts; unten ist fast garkein rand mehr. Habe in Firefox beim drucken die Ränder auf 0.0mm gesetzt und alle Fuß- und Kopfzeilen rausgemacht, mit dem eben beschriebenen ergebnis.
innerhalb vom #papierformat-div möchte ich mit weiteren divs arbeiten um meinen text an den richtigen stellen zu platzieren.
mache ich jetzt in der bedienung vom ff was falsch, oder wie muss ich den css code abändern, dass es klappt?

danke für hilfe
Olunixus

Cool Master · 20. Mai 2012

Ohne Javascript wird das nichts.

Du musst abfragen welche Auflösung die User und vorallem welche DPI die User nutzen.

kaikuwe · 20. Mai 2012

Das fällt mir dazu ein:
http://aktuell.de.selfhtml.org/artikel/css/drucklayout/

Tarnatos · 20. Mai 2012

Und denk dran, dass jeder Drucker mit anderen Druckränder arbeitet.

Nur weil es dann auf einem z.B. HP passt kann es auf einem Kyocera schon wieder ganz anders aussehen.

Olunixus · 20. Mai 2012

das mit den druckrändern hab ich mir auch schon überlegt, deshalb hatte ich überall 20mm rand vorgesehen. es wird allerdings nur mit 1 drucker gedruckt werden. das bei selfhtml finde ich nur bedingt hilfreich; ich baue diese seite eh nur zum ausdrucken, wie die auf dem bildschirm aussieht ist egal, solange man halbwegs was sieht und in eingabefeldern eingaben tätigen kann (was ja der fall sein sollte).

Gamer Xy1 · 21. Mai 2012

Im FF gibt es bei mir unter Datei - Seite einrichten... einen Reiter "Kopf- & Fußzeilen", dort mal alle Werte auf 0 setzen und in den Dropdown-Feldern "--leer--" angeben...
Das sollte alle unerwünschten Ränder auf der Druckseite entfernen...
Ansonsten: Hast du alle margin-Angaben überprüft?
Ist das der komplette CSS-Code?

Olunixus · 21. Mai 2012

@gamerxy1
genau diese einstellungen hab ich im FF ausgewählt. und jo, das ist alles an css. habe mit margin 20mm einen eigenen rand einstellen wollen (weil ich ja im FF 0mm überall eingestellt habe). habe dann dementsprechend die größe des div-containers verkleinert um wieder auf 297x210mm zu kommen.
die druckvorschau sieht bei mir jetzt so aus:

habe wie gesagt die ränder beim drucken im ff auf 0,0mm ...

Cool Master · 21. Mai 2012

Arbeite doch mit pixel statt mm das ist 100 mal einfacher schreibe ein kleies Javascript das die dpi abfrägt und zack wird es angepasst. Eine sache von max. 30 Min.

Olunixus · 21. Mai 2012

da ich nicht wirklich mit javascript zu tun habe (und es eigentlich auch nicht vor hatte) ist es für mich wohl fast einfacher solange rumzuprobieren, bis die divs für die eingaben passen, obwohl die ränder vorne und hinten nicht stimmen xD
kann doch eig. nicht so schwer sein eine website in DIN A4 zu erstellen und entsprechend auszudrucken ... :/

EDIT: 24.05.2012

hab jetzt 4 farbig hinterlegte divs erstellt und diese mit

Code:

    height: 24mm;
    width: 160mm;

    margin-top: 113mm;
    margin-bottom: ;
    margin-left: 20mm;
    margin-right: ;

solange hin und hergerückt bis es bei meinem drucker mit meinen einstellungen im FF in den richtigen bereich druckt.

jetzt muss nurnoch der text innerhalb vom div vertikal zentriert werden. ich probiers schon mit verschiedensten ideen die mir google ausspuckt, aber keine will bei mir klappen:
- vertical-align: middle; -> hat keine wirkung auf den text?!
- div im div vertikal zentrieren -> bekomme es einfach nicht hin

- display: table-cell; vertical-align: middle; -> macht mir meine schön positionierten container an den oberen rand, wo ich sie nichtmehr runter bekomme ...

habe in verschiedenen foren gelesen, dass es in CSS2 nicht möglich ist text direkt vertikal auszurichten. woher weiss ich eig. welche css-version ich nutze?! habe im html nur den doctype angegeben:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

danke
Olu

Daaron · 24. Mai 2012

Die CSS-Version ist nirgendwo festgeschrieben, anders als beim HTML-Doctype. Manche Selektoren und Optionen sind eben erst ab Version X überhaupt möglich.

vertical-align ist schon der richtige Ansatz, ist aber ein irgendwie eigenartiger Parameter. In erster Linie wirkt er nur auf Inline-Elemente. Ein div.klasse{vertical-align:top} wird nie was bringen, außer das div.klasse hätte auch noch n display auf inline oder inline-block. Kapsel testweise den Text mal in ein Span, das könnte klappen.

dcobra · 24. Mai 2012

Das geht mit CSS eigentlich schon sehr gut. Hier etwas zum lesen:

http://css-discuss.incutio.com/wiki/Print_Stylesheets
http://www.alistapart.com/articles/goingtoprint/
http://meyerweb.com/eric/articles/webrev/200001.html

Olunixus · 25. Mai 2012

habs jetzt mal so probiert:

PHP:

<div id='name'><span style='color: red; vertical-align: middle;'>" .$VariableMitText. "</span></div>

dem div #name habe ich in css folgende attribute verpasst:

Code:

#name {
    font-weight: bold;
    font-size: large;
    font-style: normal;
    font-family: Comic;

 /*   display: table-cell;
    vertical-align: middle;  */

    text-align: center;
    vertical-align: middle;

    height: 24mm;
    width: 160mm;

    background-color: #00FF00;

    margin-top: 113mm;
    margin-bottom: ;
    margin-left: 20mm;
    margin-right: ;
}

insgesamt hat sich jetzt aber nur die farbe geändert (so wie es im span steht) - das vertical-align: middle; wird irgendwie immer ignoriert, egal wie ich es auch probiere

Suche

CSS Website auf DIN A4 größe zum Drucken

Olunixus

Commodore

Cool Master

Fleet Admiral

kaikuwe

Lieutenant

Tarnatos

Lt. Commander

Olunixus

Commodore

Gamer Xy1

Cadet 3rd Year

Olunixus

Commodore

Cool Master

Fleet Admiral

Olunixus

Commodore

Daaron

Fleet Admiral

dcobra

Lt. Junior Grade

Olunixus

Commodore

Ähnliche Themen