nicht angemeldet
CSS ausgliedern funktioniert nicht.
hallo an euch,
hab da wieder ein, für euch, kleines problem.
mein ausgangsscript ist eine *.hta-datei, wo das hauptscript ausgeführt wird. das ausgeben auf dem bildschirm bzw papier wird mittels einem neuen fenster gemacht. also alles das was er findet/sucht/speichert/ausdruckt erfölgt über das öffnen eines fensters ( document.open() ).
das aussehen erstelle ich mittels css und sieht da wie folgt aus:
fenster.document.open();
fenster.document.write( "<html><head><title>Druckfenster</title>" );
fenster.document.write( "<style type='text/css'>" );
fenster.document.write( "body { margin:5px }" );
fenster.document.write( "@media screen { table.print { display:none } table.screen { width:700px; height:735px; border:2px; border-style: outset; margin:0px; border-spacing:0; border-collapse:collapse } .screen-3-spaltig-1 { vertical-align:top } .screen-3-spaltig-2 { vertical-align:top; padding-left: 40px } .screen-3-spaltig-3 { vertical-align:top } }" );
fenster.document.write( "@media print { @page { size:21.0cm 29.7cm; margin:2cm 1.5cm 1.5cm 2cm; } table.screen { display:none } table.print { width:17cm; height:27cm; margin:0px; border-spacing:0; border-collapse:collapse } .print-2-spaltig-1 { vertical-align:top } .print-2-spaltig-2 { vertical-align:top } .print-3-spaltig-1 { vertical-align:top } .print-3-spaltig-2 { vertical-align:top; padding-left: 15px } .print-3-spaltig-3 { vertical-align:top } .print-3-spaltig-Seite1-1 { vertical-align:top } .print-3-spaltig-Seite1-2 { vertical-align:top; padding-left: 15px } .print-3-spaltig-Seite1-3 { vertical-align:top } .print-2-spaltig-Seite2-1 { vertical-align:top } .print-2-spaltig-Seite2-2 { vertical-align:top } .print-3-spaltig-Seite2-1 { vertical-align:top } .print-3-spaltig-Seite2-2 { vertical-align:top; padding-left: 15px } .print-3-spaltig-Seite2-3 { vertical-align:top } div.screen { display:none } }" );
fenster.document.write( "</style>" );
fenster.document.write( "</head><body>" );
//------------------------------------------//
//-- 3-Spaltrige Seite für den Bildschirm --//
//------------------------------------------//
fenster.document.write( "<table class='screen'>" );
fenster.document.write( "<tr height=25><td colspan=3 align='right'>" + Datum + "</td></tr>" );
fenster.document.write( "<tr height=50><td width='29%' align='left' style='font-size:14pt'><b>Schnittteilliste</b></td><td width='39%' align='center' style='font-size:14pt'><b>" + Druckname + "</b></td><td width='32%' align='right'><input type='button' id='STL_drucken' value='Drucken' onclick='print()'></input></td></tr>" );
fenster.document.write( "<tr><td align='left' id='screen-3-spaltig-1' class='screen-3-spaltig-1'></td><td id='screen-3-spaltig-2' class='screen-3-spaltig-2'></td><td id='screen-3-spaltig-3' class='screen-3-spaltig-3'></td></tr>" );
fenster.document.write( "</table>" );
//----------------------------------------//
//-- n-Spaltrige Seite für den Ausdruck --//
//----------------------------------------//
fenster.document.write( "<table class='print'>" );
//--------------------------------------//
//-- 2-Spaltrige Seite zum Ausdrucken --//
//--------------------------------------//
fenster.document.write( "<tr id='2-spaltig-Datum' height=25><td colspan=4 align='right'>" + Datum + "</td></tr>" );
...
fenster.document.write( "</table>" );
fenster.document.write( "<div class='screen'><i><center>Diese Darstellung spiegelt nicht die Ausgabe auf dem Papier wieder. Es dient lediglich nur zur Kontrolle.<br>Wenn Sie die Stückliste als Schnittteilliste ausdrucken wollen, betätigen Sie oben rechts den Button.</center></i></div>" );
nun habe ich versucht, das was ich als css-style definiert habe, in eine extra datei zu speichern und sie dann statt mittels document.write() in das neue fenster zu schreiben, einfach über src="datei.css" zu öffnen.
die separate datei sieht da wie folgt aus:
@media screen {
table.print { display:none }
table.screen { width:700px; height:735px; border:2px; border-style: outset; margin:0px; border-spacing:0; border-collapse:collapse }
.screen-3-spaltig-1 { vertical-align:top }
.screen-3-spaltig-2 { vertical-align:top; padding-left: 40px }
.screen-3-spaltig-3 { vertical-align:top }
}
@media print {
@page { size:21.0cm 29.7cm; margin:2cm 1.5cm 1.5cm 2cm }
table.screen { display:none }
table.print { width:17cm; height:27cm; margin:0px; border-spacing:0; border-collapse:collapse }
div.screen { display:none }
.print-2-spaltig-1 { vertical-align:top }
.print-2-spaltig-2 { vertical-align:top }
.print-3-spaltig-1 { vertical-align:top }
.print-3-spaltig-2 { vertical-align:top; padding-left: 15px }
.print-3-spaltig-3 { vertical-align:top }
.print-3-spaltig-Seite1-1 { vertical-align:top }
.print-3-spaltig-Seite1-2 { vertical-align:top; padding-left: 15px }
.print-3-spaltig-Seite1-3 { vertical-align:top }
.print-2-spaltig-Seite2-1 { vertical-align:top }
.print-2-spaltig-Seite2-2 { vertical-align:top }
.print-3-spaltig-Seite2-1 { vertical-align:top }
.print-3-spaltig-Seite2-2 { vertical-align:top; padding-left: 15px }
.print-3-spaltig-Seite2-3 { vertical-align:top }
}
aber wenn ich diesen weg gehe, dann wird das nich so dargestellt wie ich es in der ausgangssituation habe. also über den weg des document.write()
ich wollte diese style's separat speichern damit ich eine bessere übersicht habe und ich das nich jedesmal neu schreiben muss.
wie bewirke ich also nun das das resultat genauso ist wie ohne das ausklammern in eine extra datei?hab schon versucht mittels fenster.print-3-spaltig-Seite2-1, ... zu machen aber auch da selbe effekt wie das ausklammern in eine extra datei.
was mache ich falsch bzw wo liegt da mein fehler?
lg romero
-
Hi,
nun habe ich versucht, das was ich als css-style definiert habe, in eine extra datei zu speichern und sie dann statt mittels
document.write()in das neue fenster zu schreiben, einfach über src="datei.css" zu öffnen.An genau dieser entscheidenden Stelle beschreibst du nicht, was du genau gemacht hast *seufz* - aber es klint auf jeden Fall falsch.
Falls du die Einbindung über ein link-Element meinst - das hat kein src-Attribut, sondern href.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
nun habe ich versucht, das was ich als css-style definiert habe, in eine extra datei zu speichern und sie dann statt mittels
document.write()in das neue fenster zu schreiben, einfach über src="datei.css" zu öffnen.An genau dieser entscheidenden Stelle beschreibst du nicht, was du genau gemacht hast *seufz* - aber es klint auf jeden Fall falsch.
Falls du die Einbindung über ein link-Element meinst - das hat kein src-Attribut, sondern href.
MfG ChrisB
also du hast ja gesehen wie ich die css-style's sonst erstellt hab. da klappt das so wie ich es will. hab das nun wie beschrieben in eine externe datei gespeichert.
einbinden möchte ich diese datei.css wie folgt:
fenster.document.write( "<style type='text/css' src='datei.css'></style>" );
und den rest was vorher definiert wurde rausgenommen.sieht nun (testweise) so aus:
fenster.document.write( "<style type='text/css' src='datei.css'>" ); fenster.document.write( "body { margin:5px }" ); //fenster.document.write( "@media screen { table.print { display:none } table.screen { width:700px; height:735px; border:2px; border-style: outset; margin:0px; border-spacing:0; border-collapse:collapse } .screen-3-spaltig-1 { vertical-align:top } .screen-3-spaltig-2 { vertical-align:top; padding-left: 40px } .screen-3-spaltig-3 { vertical-align:top } }" ); //fenster.document.write( "@media print { @page { size:21.0cm 29.7cm; margin:2cm 1.5cm 1.5cm 2cm; } table.screen { display:none } table.print { width:17cm; height:27cm; margin:0px; border-spacing:0; border-collapse:collapse } .print-2-spaltig-1 { vertical-align:top } .print-2-spaltig-2 { vertical-align:top } .print-3-spaltig-1 { vertical-align:top } .print-3-spaltig-2 { vertical-align:top; padding-left: 15px } .print-3-spaltig-3 { vertical-align:top } .print-3-spaltig-Seite1-1 { vertical-align:top } .print-3-spaltig-Seite1-2 { vertical-align:top; padding-left: 15px } .print-3-spaltig-Seite1-3 { vertical-align:top } .print-2-spaltig-Seite2-1 { vertical-align:top } .print-2-spaltig-Seite2-2 { vertical-align:top } .print-3-spaltig-Seite2-1 { vertical-align:top } .print-3-spaltig-Seite2-2 { vertical-align:top; padding-left: 15px } .print-3-spaltig-Seite2-3 { vertical-align:top } div.screen { display:none } }" ); fenster.document.write( "</style>" );so wie ich vorher auch die datei.js's-dateien eingebunden hab.
-
Hi,
einbinden möchte ich diese datei.css wie folgt:
fenster.document.write( "<style type='text/css' src='datei.css'></style>" );
Das ist aber von dir selbst ausgedachte Phantasie-Syntax.
RTFM: http://de.selfhtml.org/css/formate/einbinden.htm#separat
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
einbinden möchte ich diese datei.css wie folgt:
fenster.document.write( "<style type='text/css' src='datei.css'></style>" );
Das ist aber von dir selbst ausgedachte Phantasie-Syntax.
RTFM: http://de.selfhtml.org/css/formate/einbinden.htm#separat
MfG ChrisB
vielen lieben dank.dachte das ging genauso wie mittels src.alles klar jetzt klappt es
-
-
-