CSS display:none/block bei Kinderelementen

[Kralle]

Hallo zusammen. Stehe vor einem CSS-Problem.

Es geht um die Druckvariante einer Website (definiert in print.css), wo ich gerne den ganzen Layout-Krimskrams mit Header, Menü, etc. über display:none ausblenden möchte.

Vom Prinzip besteht die Seite aus nem Rahmen-DIV, der alle möglichen DIVs enthält inkl. dem Content-DIV (der ausgedruckt werden soll).

Ich hätte das gerne so gelöst, daß ich den Rahmen-DIV "unsichtbar" mache, und dann nur den Content-DIV "sichtbar" mache.

Mit visibility:none und anschließendem visibility:visible funktioniert das auch, allerdings werden da ja Platzhalter gelassen die ich vermeiden möchte (sonst kommen am Ende noch 2 leere weiße Blätter mit raus).

display:none und display:block funktioniert aber leider nicht. Hat hier das Elternelement Priorität? Gibt's ne alternative Möglichkeit?

Kurz der Code:

Code: Alles auswählen

#frame {
	display:none;
}
#content {
	display:block;
}

[haha]

Vom Prinzip besteht die Seite aus nem Rahmen-DIV, der alle möglichen DIVs enthält inkl. dem Content-DIV (der ausgedruckt werden soll).

Ich hätte das gerne so gelöst, daß ich den Rahmen-DIV "unsichtbar" mache, und dann nur den Content-DIV "sichtbar" mache.
[…]
display:none und display:block funktioniert aber leider nicht. Hat hier das Elternelement Priorität?

Ja, zwingend, weil mit display:none das betreffende Element komplett aus dem Layoutprozess verschwindet, das Layout seiner Unterelemente aber vom Layout dieses Elements abhängig ist.

Gibt's ne alternative Möglichkeit?

IMHO nur, den HTML-Code geschickter aufzuteilen oder jedem auszublendenden Unterelement einzeln ein display:none zu verpassen.

[Kralle]

@haha:

Danke! Schade, dann muß ich wohl alle Unterelemente einzeln ausblenden, da ich den Rahmen für floatende DIVs und die Zentrierung benötige.

[Graccem]

Code: Alles auswählen

#frame {
	display:none;
}
#content {
	display:block;
}

Hast du es schon mal mit !important für #content ausprobiert? !important überschreibt nämlich die Einstellungen des Elternelementes. Ansonsten wie haha schrieb, den Code besser aufteilen.

[haha]

!important überschreibt nämlich die Einstellungen des Elternelementes.

!important ist eigentlich dazu gedacht, dem Browserbesitzer die Möglichkeit zu geben, CSS-Angaben in Webseiten zu überschreiben (die normale Reihenfolge ist andersrum, Webseiten-CSS überschreibt Nutzer-CSS).

[Kralle]

!important kannte ich ja noch gar nicht
Aber funzt in dem Fall leider auch nicht. Hab's jetzt über die "umständlichere" Variante gelöst.