# Bestimmten Bereich der Seite drucken - 1. Seite weiß



## DavidWagner (1. April 2021)

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


----------



## Sempervivum (1. April 2021)

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.


----------



## MrMurphy (1. April 2021)

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.


----------



## DavidWagner (2. April 2021)

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:


```
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


----------



## Sempervivum (2. April 2021)

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.


----------



## DavidWagner (2. April 2021)

Danke euch für die Inputs. Es war eine Kleinigkeit 
Die Lösung brachte .matrix-hero {dsiplay:none*!important*;}


----------



## MrMurphy (2. April 2021)

Noch ein Hinweis für alle, die es interessiert: Bei CSS-Anweisungen muss die Spezifität (engl. specificity) beachtet werden. Die hat David mit !important ausgehebelt. Solange das funktioniert ist es auch in Ordnung. Bei Beachtung der Spezifität kann auf !important verzichtet werden.

Infos dazu zum Beispiel unter

6.5 Spezifität: das Punktesystem für Selektoren - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)


----------

