Drucken einer Seite

html.de-Forum HTML, XHTML & CSS
1

Hi!
Ich will gern meine Tabellen auf meiner Seite drucken.
doch ohne weiteres geht das ja nich, da sonst nur die Seite wie sie gerade angezeigt wird gedruckt wird!
Ich habe den aufbau wie folgt:

<table>
<tr>
      <td><div id="navigation">navigation</div></td>
      <td><div id="content">
                  <div id="topmenu">
                          Hier ist ein Menübereich
                  </div>
                  <div id="main">
                          Hier der Bereich welcher gedruck werden soll
                          Hier sind lange Tabellen.
                          Dieser Div ist daher mit Overflow: auto gestalltet
                          Doch beim Durcken soll dann nur dieser Div und zwar vollständig ausgegeben werden!
                   </div>
               </div>
        </tr>
<tr><td colspan="2"><div id="footer">Footerbereich</div></td></tr>
</table>

so in etwa sieh das ganze aus…

Div Content hat eine feste höhe von 600px wovon 150 vom topmenu und 440 vom main eingenommen werden.
Da der Inhalt im main zu gross ist wird dieser div dann scrollbar.
Beim Drucken sollen alle div’s bis auf main ausgeblendet werden und main soll vollständig sichtbar sein!

hier mein css:

@media print{ .content{ display: none; } .footer{ display: none; } .navigation{ display: none; } .Newsticker{ display: none; } .topmenu{ display: none; } .SitebarInfos{ display: none; } .main{ height: 100%; overflow: visible; display: block; } }

leider geht das so nich :<
wird bei der druckvorschau immer noch die seite so angezeigt wie ich sie gerade vor mir habe!

2

Probier mal so:

.main { width: 100%; margin:0; padding: 0;}
3

hat leider nicht geholfen:<

so hab ich die 2 css eingebunden:

<link rel="stylesheet" type="text/css" href="CSS/style.css"> <link rel="stylesheet" type="text/css" media="print" href="CSS/style_print.css">
und jetzt hab ich die style_print.css nochmal überarbeitet, sieht besser aus!
Denn jetzt wird garnix angezeigt XD
liegt das daran das ich den div, in dem mein main-div liegt ebenfalls ausblende? da so quasi das parentobjekt nicht sichtbar ist…

hier meine css:

#content,#footer,#navigation,#Newsticker,#topmenu,#SitebarInfos{ display: none;} #main{ height: 100%; overflow: visible; display: block; width: 100%; margin:0; padding: 0; }
weis einer wie und ob ich da was machen kann?? :<

4

Du hast ja auch #content ausgeblendet und darin liegt ja #main, also wie soll deine Tabelle gelesen werden?

blende #content #main wieder ein, dann sollte es gehen

5

nun ja, es hat geklappt!
jedoch nur soweit, das ich jetzt den mainbereich einzeln angezeigt bekomme, aber auch nur soviel wie ich vorher sehe!
also es ist nur der bereich sichtbar der auch auf der seite sichtbar ist!
Liegt das an der Tabelle mit der ich meine ausgabe foramtiere?
Diese hat keinen style, die soll sich ganz normal anpassen, keinen rahmen haben und so. das klappt ja auch.
nur der mainbereich wird wieder so klein angezeigt -.-

#footer,#navigation,#Newsticker,#topmenu,#SitebarInfos{ display: none;} #content{ height: 100%; overflow: visible; /*display: block;*/ width: 100%; margin:0; padding: 0; } #main{ height: 100%; overflow: visible; /*display: block;*/ width: 100%; margin:0; padding: 0; }
:<

6

hast du die seite irgendwo online?

dadurch wär es wesentlich leichter dir zu helfen, denn meist wird hier und da irgendwas weggelassen beim posten des codes weils für unwichtig gehalten wird.
Naja meist steckt der Fehler im detail

7

leider ist die seite nirgends online, da sie nur hier im intranet is…
Kann es sein, das bei dem Print teilweise css angaben von der Seite mit genutzt werden?
so kommt es mir vor!

8

ok, wenns nicht online ist, wär es sehr hilfreich den Gesamten code, inclusive doctype und die gesammte CSS mal zu posten.

Denn nur mit dem ganzen Code ergibt sich ein zusammenhängendes Bild indem wir nach den Fehlern suchen können, Codefragmente helfen hier kaum weiter

9

hi!
Ich habs hinbekommen!
war ein „simpler“ fehler -.-

<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css"> <link rel="stylesheet" type="text/css" media="print" href="CSS/style_print.css">

Bei dem ersten hat das media=„screen“ gefehlt! daran hats gelegen…
doof aber es geht jetzt :smiley:

10

nächstes Problem!
Unterm firefox wird die druckausgabe supi dargestellt, auf jeder Seite ist zuerst nochmal der tabellenkopf angefügt!
Genau so will ich das…
unterm IE fehlt dieser jedoch, da er nur auf der 1.seite ist:<
zudem werden im IE die untersten und obsteren Zeilen „zerschnitten“.
Im Firefox jedoch sieht alles spitze aus!;ugl

wie kann ich das jetzt noch für den IE so hinbekommen?? :<
leider wird dieser bevorzugt in unserem unternehmen eingesetzt

11

Das zerschneiden der Tabllenzeilen kannst du so verhindern:

tr {page-break-inside:avoid;}

mit den Tabellenköpfen weiß ich grad im Augenblick auch nicht weiter

12

table.tablesorter tr { page-break-inside:avoid; page-break-before:avoid; }

beides wird vom ie ignoriert!
-.-
und wie mach ich es das meine gesammte tabelle zum ausdruck gebracht wird? die is leider etwas seehr breit!
:<
kann ich da irgendwie einstellen, das sie automatisch auf die blattgröße scalliert werden soll??

13

Ja, indem du relative Angaben wie z. B. % benutzt.

14

geht es acuh irgendwie, das das was zuviel ist auf einem neuen blatt gedruckt wird?? weil ich grad festgestellt habe, das bei der skalierung kaum noch was zu lesen wäre XD