• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Absolute/Fixierte/Relative Psoitionierung und das Drucken

T

The Lee

New member
Hallo Community,

erst einmal ein Kompliment für das Forum...
Also:
Ich habe eine Seite, die im Browser schon sehr schön angezeigt wird. Nur das drucken macht noch Probleme.
Jetzt habe ich das Ganze auseinandergenommen und vereinfacht bis nur noch das hier da war:
Code: 
<?php echo '<?xml version="1.0" encoding="ISO-8859-1" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="keywords" content=""/>
	<link rel="stylesheet" type="text/css" href="" /> 
</head>
<body lang="de">
	<div id='website' style="position: fixed; left: 128px; right: 128px; width: 1024px; height: 770px; top: 0px; background-color: #FFFF55; z-index: 2; border-style: solid;">
	</div>
</body>
</html>
Das sieht so aus:
bild1.png


Wenn man das jetzt drucken will, ist der DIV-Container teilweise schon rechts aus dem Bild geschoben. Warum?

In der Druckvorschau (und auch gedruckt):
bild2.png


Ich habe zwar schon eine Menge recherchiert (und natürlich die SuFu benutzt ;), aber das hat leider nichts geholfen. Ich hoffe, ihr könnt das Ändern :grin:

Vielen Dank im Voraus,

Lee

PS: Kommentare zu der Seite braucht es nicht, die eigentliche Version ist schon ein paar Schritte weiter ;)
 
Zuletzt bearbeitet:
Vielen Dank für die schnelle Antwort erstmal.

Wenn Du damit meinst, dass ich einfach ein anderes Stylesheet für den Druck verwenden soll, ist das Problem noch nicht gelöst. Falls Du eine andere Idee hattest, hab ich sie dadurch nicht mitgekriegt (wenn ja, Asche über mein Haupt).

Die Seite wird mit Javascript an die Fenstergröße angepasst. Daher mache ich meine Styles mit dem style-Objekt, hier ist die Funktion mit dem trennen zwischen Druck und Screen nicht gegeben.
Und wenn, ist das dann einfach nicht unterstützt, oder habe ich einen Fehler gemacht?

Und: Falls jemand auf die Idee kommt das mit dem Javascript-Style sei Schwachsinn, darf er diese Meinung behalten ;)

MfG

Lee
 
Zuletzt bearbeitet:
Naja, die Anforderungen für ein Screenlayout sind eben andere als für ein Printlayout.
Ein Screenlayout wird nie 100%ig eine gute Druckausgabe haben, besonders in Deinem Fall.
Du solltest Dir also überlegen, wie Du die Prioritäten gesetzt haben willst.
Du siehst das ja am Besten bei Deinem Screenshot für die Druckausgabe...
 
Ja, da hast Du natürlich Recht.

Das selbe hatte ich mir auch schon überlegt und die Entscheidung fiel zugunsten des JS-Styles.
Jetzt will ich versuchen, das man das Ganze auch noch einigermaßen ansehlich auf ein Papier bekommt. Perfekt muss es ja nicht sein, aber so zerhexelt wie dann die Ganze Seite wird, kann man nichts mehr erkennen.
Heißt das, was Du geschrieben hast jetzt, dass die Absolute/Relative/Fixierte Positionierung zum Drucken Schlicht nicht unterstützt wird?

MfG

Lee
 
Für ein Printlayout sollte man rudimentärer denken.
Wichtig ist, dass alle gewünschten Inhalte später auf dem Papier sind.
Wenn Du nun also für media="screen" ein externes CSS hast, legst Du noch ein CSS für media="print" an.
Dort kannst Du nun für die einzelnen Elemente bestimmen, wie sie angeordnet werden müssen, damit sie auf das Papier passen (siehe erster Satz: rudimentär!).
Nähere Infos kannst Du meinem zuerst geposteten Link entnehmen.

Achja, vergleiche nicht das, was Du auf dem Monitor siehst mit dem, wie es auf dem Papier aussehen soll. Das sind zwei Paar Stiefel...
 
Zumindest der letzte Satz war hilfreich.

Noch mal zum veranschaulichen:
  • Das grundlegende Layout (daher Position, Weite, Höhe) basiert auf Javascript
  • Weitere Feinheiten (daher Zentrierung, Farbe usw.) sind in CSS

Code: 
<div id="website">
	Inhalt
</div>

Hierfür sieht das dann Beispielsweise so aus (Javascript-Code):

Code: 
// Website-DIV
	var element 			= document.getElementById("website").style;
	element.position 			= "fixed";
	element.left 			= Weite/100*10 + "px";
	element.right 			= Weite/100*10 + "px";
	element.width			= Weite/100*80 + "px";
	element.height 			= Hoehe/100*99 + "px";
	element.top				= "0px";
	element.bottom			= "0px";

MfG Lee
 
Erst einmal Entschuldigung falls ich Dich vorhin beleidigt haben sollte...

dkdenz schrieb:
Für ein Printlayout sollte man rudimentärer denken.
Wichtig ist, dass alle gewünschten Inhalte später auf dem Papier sind.
Zum Vergrößern anklicken....
Du hast recht, dass war auch hilfreich, obwohl das wohl bekannt sein dürfte.
dkdenz schrieb:
Wenn Du nun also für media="screen" ein externes CSS hast, legst Du noch ein CSS für media="print" an.
Dort kannst Du nun für die einzelnen Elemente bestimmen, wie sie angeordnet werden müssen, damit sie auf das Papier passen (siehe erster Satz: rudimentär!).
Zum Vergrößern anklicken....
Ich habe schon geschrieben, dass ich nicht mit verschiedenen Stylesheets für Screen und Print arbeiten kann, da ich das Layout mit Javascript erstelle. Ein Beispiel findest du in meiner letzten Antwort.
dkdenz schrieb:
Nähere Infos kannst Du meinem zuerst geposteten Link entnehmen.
Zum Vergrößern anklicken....
Ich wollte nur einmal klarstellen, dass mir diese Möglichkeiten durchaus bekannt sind. Leider sind sie aber in meinem Fall nicht hilfreich.
dkdenz schrieb:
Achja, vergleiche nicht das, was Du auf dem Monitor siehst mit dem, wie es auf dem Papier aussehen soll. Das sind zwei Paar Stiefel...
Zum Vergrößern anklicken....
Wie gesagt, der Satz könnte in einem Lehrbuch stehen ;)

Falls ich dich nicht verstanden habe und du eine Möglichkeit siehst, wie man verschiedene Layouts für Screen und Print in Javascript regeln kann, wäre ich dir wirklich sehr dankbar wenn du mir das noch einmal erklären könntest.

MfG
Lee
 
Kannst Du vielleicht kurz sagen, ob du die Lösung meines Problems kennst und ich einfach nur zu dumm bin, oder das es eben nicht so ist?

Wäre sehr dankbar,

Lee
 
Ok, vielleicht war ich wirklich etwas voreilig:

Kann es sein, dass ein @page Layout beim Druck auch über meinem JS-Layout steht (ist ja eigentlich Inline-Style)?

by Lee
 
OK, ich war nicht zu voreilig... hab das grade mit einem externen Stylesheet probiert (media="print"), aber das überschreibt leider die per js definierten größen nicht...
 
AW: Absolute/Fixierte/Relative Positionierung und das Drucken

Hallo Community,

habe die Lösung für das Problem:
Ich habe jetzt das Stylesheet per document.write() am Anfang der Datei drin, d.h. beispielsweise
Code: 
document.write("<style> .class {width: " + Width/100*5 + "px; }");
Jetzt, wo erst einmal allgemein ein nützlicher Druck rauskommt, arbeite ich natürlich auch mit media="print", dass war aber schon vorher bekannt.

Muss allgemein sagen, dass mir das hier leider nicht wirklich weitergeholfen hat, bedanke mich aber für die schnellen Antworten und an sich wohl gut gemeinten Ratschläge.

MfG Lee
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben