div Container drucken

Zorro · #1 (**permalink**) 08.04.2004, 12:31

hi liebe leute:
bin mega neu hier und auf der Suche nach ner (wahrscheinlich einfachen) Lösung für mein Problem. In einer recht umfangreichen HTML Site (mit Frames) habe ich jeweils im "MainFrame" einen Div Layer und darin Text und Bilder, der so aussieht:

Code:

<div id="Layer1" style="position:absolute; left:29; top:25px; width:475px; height:500; layer-background-image:url(../Pix/layer_bg.jpg); z-index:1; background: url(../Pix/layer_bg.jpg); overflow: auto;">

Neben einem Standard CSS (gültig für alle Seiten) möchte ich es nun ermöglichen das der Inhalt des Layers komplett ausgedruckt werden kann (und nicht abgeschnitten, wie bisher. Ist ja 500 px fest in der Höhe und dan nach unten scrollbar.
Danke vorweg !

RoToRa · #2 (**permalink**) 08.04.2004, 13:16

Zunächst zwei rhetorische Fragen und eine Anmerkung zum Nachdenken:
- Brauchst Du wirklich Frames?
- Muß es im NS4 genau so wie in anderen Broswern aussehen?
- Layouts, die nur absolute Positionierung verwenden, brechen leicht auseinander.

Zitat:

Zitat von Zorro

Code:

<div id="Layer1" style="position:absolute; left:29; top:25px; width:475px; height:500; layer-background-image:url(../Pix/layer_bg.jpg); z-index:1; background: url(../Pix/layer_bg.jpg); overflow: auto;">

All erstes mußt du alle Fehler beheben, denn alle Maße müssen eine Einheit haben: left: 29px;

Dann, mußt Du die Styles aus dem style-Attruibut nehmen und in einen Stylesheet tun.

Zitat:

Neben einem Standard CSS (gültig für alle Seiten) möchte ich es nun ermöglichen das der Inhalt des Layers komplett ausgedruckt werden kann (und nicht abgeschnitten, wie bisher. Ist ja 500 px fest in der Höhe und dan nach unten scrollbar.
Danke vorweg !

Jetzt kannst Du einen Druck-Stylesheet definieren:

Code:

<link href="print.css" rel="stylesheet" media="print">

oder

Code:

<style type="text/css" media="print"></style>

Da drin kannst Du Regeln definieren, die zusätzlich für den Ausdruck gelten:

Code:

#Layer1 {
   height: auto;
   overflow: visible;
}

Zorro · #3 (**permalink**) 08.04.2004, 19:01

Danke für das Feedback !!!
- Frames: müssen sein !
- Netscape 4.0 ist uniteressant
- feste Größe muß sein

...leider funzt es noch nicht so ganz, denn der Frame, in dem der Layer sitzt darf NICHT scrollbar sein (nur der Layer mit fester Größe).

Muß ich in dem Layer selbsz noch nen "drucken" Aufruf reintun ?
(denn wenn ich über den Browser/drucken gehe, druckt er nach wie vor lediglich die 500 px (IE6.0).
Probiere noch ein bischen weiter, aber vielleicht hast du ja noch ne Idee.
(Seite ist noch nicht online, daher noch keine url).

Danke & frohe Ostereier !

RoToRa · #4 (**permalink**) 08.04.2004, 19:12

Zitat:

Zitat von Zorro

- Frames: müssen sein !

Glaube ich nicht.

Zitat:

- Netscape 4.0 ist uniteressant

Wieso benutzt du Dann die NS4 spezifische CSS-Eigenschaft layout-background-image?

Zitat:

- feste Größe muß sein

Absolute Positionierung hat nichts mit fester Größe zu tun. Man kann mit absoluter Positionierung auch flexibele Layouts erstellen und fest Layouts auch ohne absolute Positionierung.

Zitat:

...leider funzt es noch nicht so ganz, denn der Frame, in dem der Layer sitzt darf NICHT scrollbar sein (nur der Layer mit fester Größe).

Ei, ei, ei. Wieso denn? Sag jetzt nicht "Kunde will es so" :(

Zitat:

Muß ich in dem Layer selbsz noch nen "drucken" Aufruf reintun ?

Nein,

Zitat:

(denn wenn ich über den Browser/drucken gehe, druckt er nach wie vor lediglich die 500 px (IE6.0).

Der Druck Stylesheet muss nach dem normalen Stylesheet eingebunden werden. Ansonsten fällt mir spontan nichts ein. Meld Dich ambesten, wenn es eine URL gibt.

RoToRa · #5 (**permalink**) 08.04.2004, 19:26

Ok, gerade nochmal probiert. Folges funktioniert problemlos:

Code:

<html>
<head>
	<style type="text/css">
		#test {
			width: 10em;
			height: 10em;
			overflow: auto;
			border: 1px solid black;
		}
	</style>
	<style type="text/css" media="print">
		#test {
			height: auto;
			overflow: visible;
		}
	</style>
</head>

<body>

<div id="test">
Hier langen Text benutzen.
</div>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Img im div Container an größe anpassen...	Lilienfan	CSS	2	23.12.2011 23:13
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
div container verschachteln	blau	CSS	2	05.12.2006 19:44
2 div container, 2. orientiert sich am 1.	kemai	CSS	9	21.06.2005 14:28