Bestimmten Bereich der Seite drucken - 1. Seite weiß

DavidWagner

Grünschnabel
Hallo,

ich hoffe mir kann wer bei meinem Problem helfen.
Ich möchte auf meiner Seite Beste Fleisch- und Wurstqualität aus der Region (aktuell noch nicht in "offiziellem" Betrieb) unten bei "Tagesmenü" einen Button zum Drucken einbauen. Den Button einbauen ist auch nicht das Problem.

Aber: ich habe bereits alle Bereiche, die ich nicht drucken möchte mittels CSS ausgeblendet. Grundsätzlich hat das auch gut geklappt. Wenn ich im Browser auf Drucken gehe, habe ich allerdings das Problem, das zuerst eine leere weiße Seite angezeigt wird und dann erst auf der zweiten Seite der Inhalt den ich drucken möchte.

Leider komme ich nicht drauf, welcher Bereich noch ausgeblendet werden muss, damit die weiße Seite verschwindet.
Bin Grafiker und beim Coden nicht gerade ein Genie, vll. kann mir jemand behilflich sein.

Habe auch schon probiert den kompletten body auszublenden und nur den einen Teil einzublenden (mit "display:block"). Hat leider auch nicht funktioniert, bin schon etwas ratlos ...

Würde mich über Inputs freuen.

Danke, Lg
David
 
Was Du da beschreibst mit der leeren Seite lässt vermuten, dass Du die Elemente mit visibility:hidden ausgeblendet hast. In dem Fall sind sie zwar unsichtbar, nehmen aber trotzdem ihren Platz ein. Damit sie ganz verschwinden, musst Du z. B. display:none verwenden.
Wenn es daran nicht liegt, müsste man den Code sehen um den Fehler zu finden. Poste am besten die URL.
 
David hat die URL doch gepostet.

Zunächst: Im Firefox wird wie beschrieben eine Seite gedruckt. Chrome will zwei leere Seiten drucken.

Der Quelltext ist wohl mehr oder weniger automatisch mit Jimdo erstellt worden. Damit leider total unübersichtlich, durch die Strukturierung und die div-Suppe manuell kaum nachvollziehbar.

Die leere Seite im Firefox entsteht durch das wechselnde Hintergrundbild mit dem Herrn hinter der Theke. Hintergrundbilder werden standardmäßig nicht ausgedruckt. Offensichtlich wurde nur der Text vor dem Hintergrundbild durch das CSS entfernt. Nicht aber der Container, der das Hintergrundbild enthält.

Du musst also den äußersten Container für das Hintergrundbild finden und den mit "display: none;" ausblenden.

Soweit ich das nachvollziehen kann ist das ein div mit der Klasse: matrix-hero

Mit dem Chrome habe ich mich nicht weiter beschäftigt. Auch andere gebräuchliche Browser wie Edge und Safari solltest du testen.
 
Zuletzt bearbeitet:
Vielen Dank für eure Rückmeldungen.
Bei mir wird sowohl im Firefox, als auch im Chrome die erste Seite weiß, die zweite Seite mit dem "Tagesteller" angezeigt. Ja, da hast du recht MrMurphy, ist im Jimdo-Quelltext leider schwer nachzuvollziehen.

Matrix-Hero hatte ich eigentlich auch im Verdacht und war schon ausgeblendet, leider auch kein Erfolg.
Ja, es ist definitv das Hintergrundbild, welches Probleme macht. Auf den anderen Unterseiten der Website habe ich es auch ausprobiert, da klappt es problemlos.

Folgende Elemente habe ich ausgeblendet:

CSS:
div#cc-m-13782505490 {display:none;}
div#cc-m-13782305390 {display:none;}
div#cc-m-13751212590 {display:none;}
div#cc-m-13782337190 {display:none;}
div#cc-m-13758659490 {display:none;}
div#cc-m-13753498890 {display:none;}
div#cc-m-13753516390 {display:none;}
div#cc-m-13753493990 {display:none;}
div#cc-m-13753473190 {display:none;}
div#cc-m-13753516890 {display:none;}

div#cc-m-13750834490  {display:none;}
div#cc-m-13750658790  {display:none;}
div#cc-m-13753499590  {display:none;}
div#cc-m-13753499190  {display:none;}
div#cc-m-13753516790 {display:none;}
div#cc-m-13753461990 {display:none;}
div#cc-m-13782489790 {display:none;}
div#cc-m-13751099390 {display:none;}
div#cc-m-13750658790 {display:none;}
div#cc-m-13754487290 {display:none;}
div#cc-m-13750833790 {display:none;}

.hs-footer {display:none;}
.footer-btm {display:none;}
.matrix-hero {display:none;}
.hs-overlay {display:none;}

Gibt es vielleicht eine Option den kompletten body-Bereich auszublenden, außer dem bestimmten Element, dass eingeblendet werden soll? Habe gegooglet und auch etwas dazu gefunden, allerdings erfolglos probiert. Also mit den body-Bereich komplett mit display:none ausgeblendet und mein gewünschtes div mit display:block eingeblendet. Das funkt leider nicht, hab ich aber auch nicht erwartet :)

Vll. hat noch jemand eine Idee.

Danke und LG
David
 
Alternativ könntest Du zwei Container anlegen: Einen für den normalen, sichtbaren Bereich und einen zweiten für das, was gedruckt werden soll. Dann kannst Du mit wenigen CSS-Anweisungen jeweils den richtigen sichtbar und den anderen unsichtbar machen. Erst Mal so testen und wenn es funktioniert, den Container für den Druck mit Javascript duplizieren, um doppelten Inhalt zu vermeiden.
 
Zurück