Antworten auf deine Fragen:
Neues Thema erstellen

Layout Problem - Tabelle, Bild,drucken

milea

Noch nicht viel geschrieben

Hallo!

Ich habe ein Problem von dem ich dachte es wäre keins ;) - und ich hoffe ihr könnt mir helfen!

Folgendes:
Ich habe eine Tabelle in der ein Prozessablauf dargestellt und jeder einzelne Prozessteil näher beschrieben wird.
Das Problem besteht beim Ausdrucken. Ich öffne mittels javascript ein extra Fenster - in dem nur das DIv "inhalt" angezeigt wird. Die Anzeige stimmt auch. Doch in der Druckvorschau gibts Probleme.

Hm, anscheind weiß keiner ne Antwort... :)
ich auch noch nicht wirklich - Aber mir ist da ne Idee gekommen:

Es geht ja darum, dass ich ein Bild habe welches höher in der Auflösung ist als A4 und somit nicht auf eine Druckseite passt - und vorallem beim IE deshalb einfach abgeschnitten wird. Und neben dem Bild gibt es Tabellenzeilen die auf einer bestimmten höhe des Bildes sind. Diese Postion sollte sich auch nicht verschieben.- kein Problem wenn man hier eine td-Höhe angibt.

Meine Idee um die gesamte Tabelle (Bild + Beschreibungen) auf ein A4- Blatt zu bekommen (unabhängig von der Auflösung des Nutzers):

In meiner Druckansicht ändere ich sowohl die Tabellen-Höhe als auch die Höhe des Bildes auf 100%.
Fragen: Was muss ich da bei der Schrift beachten? Bis jetzt ist sie in pt angegeben. Skaliert sie sich mit?
Meint Ihr die Abstände bleiben in etwa gleich- ich arbeite nun ohne feste td-Höhe sondern mache das - ja nicht die feine englische Art ;) - mit <br>?

Ich kanns leider nicht genau testen, da ich an meine Vorlagen im Moment nicht ran komme. Hab aber mal versuchsweise was probiert und da sahs ganz gut aus. Wollte nun aber mal ne Fachman/frau - Meinung.

Hm, anscheind weiß keiner ne Antwort... :)
ich auch noch nicht wirklich - Aber mir ist da ne Idee gekommen:

Es geht ja darum, dass ich ein Bild habe welches höher in der Auflösung ist als A4 und somit nicht auf eine Druckseite passt - und vorallem beim IE deshalb einfach abgeschnitten wird. Und neben dem Bild gibt es Tabellenzeilen die auf einer bestimmten höhe des Bildes sind. Diese Postion sollte sich auch nicht verschieben.- kein Problem wenn man hier eine td-Höhe angibt.

Meine Idee um die gesamte Tabelle (Bild + Beschreibungen) auf ein A4- Blatt zu bekommen (unabhängig von der Auflösung des Nutzers):

In meiner Druckansicht ändere ich sowohl die Tabellen-Höhe als auch die Höhe des Bildes auf 100%.
Fragen: Was muss ich da bei der Schrift beachten? Bis jetzt ist sie in pt angegeben. Skaliert sie sich mit?
Meint Ihr die Abstände bleiben in etwa gleich- ich arbeite nun ohne feste td-Höhe sondern mache das - ja nicht die feine englische Art ;) - mit <br>?

Ich kanns leider nicht genau testen, da ich an meine Vorlagen im Moment nicht ran komme. Hab aber mal versuchsweise was probiert und da sahs ganz gut aus. Wollte nun aber mal ne Fachman/frau - Meinung.

Sowohl im FF 3.5 als auch im IE6 (andere wurden erstmal nicht getestet) wird das übergroße (also das Bild ist höher als eine A4 Seite) einfach nach einer Seite abgeschnitten und auf der anderen Seite nicht fortgesetzt.
In der IE6 Druckvorschau wird das Bild gar nicht angezeigt. Im IE wird mir auch kein Scrollbalken angezeigt in meinem Druckvorschaufenster.

Hat jemand vielleicht eine Lösung? Kann man eigentlich als Webentwickler Einfluß daruf nehmen, wie Bilder gedruckt werden oder ist das alles Einstellungssache des Users?
Wenn dem so ist, weiß ich nicht wie ich mein Problem sonst lösen soll. Hab schon überlegt mein Bild nach jedem Prozessschritt zu zerschneiden und für jeden Schritt eine extra <td> zu machen - also auf das rowspan zu verzichten. Dann wird nämlich alles ausgedruckt. Aber bis jetzt liegt halt alles in einem "hohen" Bild vor.

Ok, ich hoffe ihr versteht was ich meine - hier mal der Quellcode:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test3</title>
<meta name="generator" content="anagement">
<meta name="robots" content="noindex">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<style type="text/css">
<!--

body {
    margin: 0px;
    height: 100%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: gray;
}
#menu{
    position: fixed;
    border: 1px solid black;
    background-color: #FFA07A;
    left: 0px;
    top: 0px;
    width: 100%;
    height : 15%;
    color: white;
}
#inhalt{
    position: static;
    margin: 0px 0px 0px 0px;
    background-color: #B0C4DE;
    padding: 20px;
         width:100%;
         overflow:visible;
}

@media print
{
.noprint{display:none;}
}

<!--[if lt IE 7]>

html, body {
    padding: 0;
         overflow: visible;
         }
#container {
    height: 100%;
    width: 100%;
    overflow: auto;
}
#menu {
    z-index: 1;
    position: absolute;
}
<![endif]->
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function drucken() {

  var newcontent = document.getElementById('inhalt').innerHTML;

var druck=window.open("","");
druck.document.open();
druck.document.write('<html><style type="text/css">tbody{overflow:visible;} table{width:100%;height:1200px}</style><body style="overflow:visible;" onLoad="javascript:window.print();">');
druck.document.write(newcontent);
druck.document.write('</body></html>');
druck.document.close();
druck.focus();
}
// -->
</script>
</head>
<body>
<div id="menu" class="noprint">
    Menü<br><a href="javascript:drucken();">Drucken</a>
</div>
<div id="container">
<div id="inhalt">


<table width="800px" border="1">
<tr>
    <td valign="top" rowspan=4>
    <img src="testbild.jpg" width="400px" height="1200px">
    </td>

    <td valign="top">
         das ist ein test<br>
         </td>

         <td valign="top">
         das ist ein test2<br>
         </td>

</tr>
<tr>
    <td valign="top" height="400px">
         das ist ein test<br>
         </td>

         <td valign="top">
         das ist ein test2<br>
         </td>

</tr>
<tr>
    <td valign="top" height="400px">
         das ist ein test<br>
         </td>

         <td valign="top">
         das ist ein test2<br>
         </td>

</tr>
<tr>
    <td valign="top">
         das ist ein test<br>
         </td>

         <td valign="top">
         das ist ein test2<br>
         </td>

</tr>
</table>
</div>
</div>
</body>
</html>
Danke für eure Hilfe!

PS: nicht wundern, das CSS und Javascript wurde jetzt mal nicht in eine extra-Datei ausgelagert
 
Zuletzt bearbeitet von einem Moderator:

SineTempore

Nicht mehr ganz neu hier

AW: Layout Problem - Tabelle, Bild,drucken

man kann doch verschiedene css dateien einbinden (siehe ). dort kannst du in dem css fürs drucken einfach per img{ width: 1em; height: 1em } die größe der bilder bestimmen wobei 1em = 100% sind und 0.5em z.b. 50%
du könntest dort dann auch alle anderen elemente ausblenden, die nicht gedruckt werden sollen und dir so dann das Javascript sparen.
vielleicht funktionierts ;)
 
Zuletzt bearbeitet:

sokie

Mod | Web

AW: Layout Problem - Tabelle, Bild,drucken

Mit Tabellen zu arbeiten wenn man Bildinhalte darstellen will ist ohnehin eine Technik die eher für Probleme sorgt als sie zu lösen.
ohne Tabellen könntest du die Bilder zB exakt millimetergenau über die css für das Drucken positionieren. wichtig dabei ist, dass man in dieser css durchweg nicht in px sondern in cm oder mm (oder pt) bemasst also Einheiten, die nicht pixelbasiert sind.
Auf die Druckgestaltung an sich hättest du so die volle Kontrolle.
Was sich der Kontrolle entzieht ist die Frage, ob und wie der Benutzer das Ausdrucken von Bildern handled.
Javascripte sind dabei wenig hilfreich, sie fallen ja weg, wenn der User Javascript deaktiviert hat.
Wenn es um das Ausdrucken von Seiten geht, die auch Bildinformationen beinhalten, kann es hilfreich sein die Sache nochmal als PDF anzubieten.

PS: Die Bilder in einer Webseite verwendet werden,sind für den Ausdruck sehr wahrscheinlich ohnehin zu zu klein bzw haben im Effekt keine genügende Auflösung.
 
Zuletzt bearbeitet:

milea

Noch nicht viel geschrieben

AW: Layout Problem - Tabelle, Bild,drucken

danke für eure Antworten.
Ich werde jetzt tatsächlich von meiner Tabellendarstellung (geht am besten wegen der Beschriftung der einzelnen Prozessteile) ein pdf zum DRuck anbieten. Ich hab jetzt soviel rumprobiert und nix hat 100%ig so funktioniert wie ich es wollte.

Das hohe Bild zu teilen - also nach jedem Teilprozess - ist zu mühselig und es gibt häßliche - wenn auch kleine- Abstände zwischen den einzelnen Zeilen.

hab auch das mit height:100% versucht - aber das verschiebt sich mehr als ich dachte. Naja- wem noch was einfällt....
 

sokie

Mod | Web

AW: Layout Problem - Tabelle, Bild,drucken

Das hohe Bild zu teilen - also nach jedem Teilprozess - ist zu mühselig und es gibt häßliche - wenn auch kleine- Abstände zwischen den einzelnen Zeilen.
ob du's glaubst oder nicht - das sagt uns hier als Leser gar nichts, ein Link zu der Seite würde mehr sagen als 1000 Worte.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben