Print-Layout Stern vs. #

[vit_o]

Hallo!
Ich wollte für meine Website das Layout zum Drucken anpassen, damit das Menü und andere Dinge nicht mitgedruckt werden. Ich hab also im Head-Bereich die Datei eingebunden mit:

<link rel="stylesheet" type="text/css" media="print" href="[URL="http://www.html.de/view-source:http://localhost/assets/print.css"]/assets/print.css[/URL]" />

In der Datei steht folgendes:

body *{
    display: none;
}

#content, #content *{
    display: block;
}

Ich wollte damit erreichen, dass alle Elemente außer das mit der ID content(inklusive Unterelemente) beim Drucken ausgeblendet werden. Leider wird dann alles ausgeblendet, obwohl # eine höhere Spezifität hat als *. Weiß jemand eine Lösung?

 

[Tar]

Probier mal:

#content, #content *{
    display: block !important;
}

 

[vit_o]

Funktioniert leider auch nicht.

 

[neuroleptika]

Das geht nicht.

#content, #content *{
    display: block !important;
}

Es sei denn #content würde direkter Nachfahre von body sein. Dann macht die Angabe aber keinen Sinn.
Zumal alle Elemente auf display: block; stehen würden.

 

[ZwoksKorbi]

Es wäre auch möglich, den Elementen die du nicht drucken willst, eine Klasse (z.B. noprint) zu geben.
Diese Klasse definierst du in deinem normalen CSS einfach nicht, im Print-Stylesheet gibst du an: display: none; damit sollte das Problem gelöst sein.

 

[vit_o]

Ah genau! Da liegt das Problem! #content war kein direkter Nachfolger von body, sodass das Eltern-Element von #content ausgeblendet war und #content damit auch!
Vielen Dank!

 

[bidu2004]

Frage: was hat das mit dem !important; auf sich. Ich weiss, dass es (wie alles andere eigentlich) englicsch ist, und Wichtig heisst. Was hat das allerdings mit CSS zu tun?

 

[lowsaxonian]

!important-Regel