Frage zu CSS Auslagerung

FrayedEnd · 20.02.2008

Hallo!

Ich habe vor 5 Tagen angefangen mich in CSS einzuarbeiten. Klappt bislang ganz gut, ich hatte jedoch noch nicht versucht die CSS Befehle auszulagern ( HTML Gewohnheit, "was da ist ist da!"

).
Heute habe ich versucht eine Druckvorschau zu realisieren, und da wurde es dann nötig.
Ich habe also 2 externe Stylesheets angelegt und folgendermaßen im Kopf der *.htm Datei verlinkt:

Code:

<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="print" href="druck.css">

Die Angaben der CSS Dateien beziehen sich auf die ID der Container in der *.htm Datei:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	
 	<title>Startseite - ************</title> 	
	
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
 	<link rel="stylesheet" type="text/css" media="print" href="druck.css">
		
	</head>
	<body>	
	
	<!--HEADER --> 	<!--HEADER --> <!--HEADER --> <!--HEADER --> <!--HEADER --> <!--HEADER --> <!--HEADER --> <!--HEADER --> 
	<div id="header">

		<!--KOPF Menü--> <!--KOPF Menü--> <!--KOPF Menü--> <!--KOPF Menü--> <!--KOPF Menü-->
		
		
		
		<div id="seite">
		
		
		
			<!--Drucken Archiv beenden Impressum Kontakt--> <!--Drucken Archiv beenden Impressum Kontakt-->
			
			<div id="container">
			<span class="small">
	
			
			<a href="javascript:printPage()">Drucken</a>
	
	
			*
			<a href="javascript:void(0);" onClick="fullScreen('startseite.htm');">
			Vollbild
			</a>
	
	
			*
			<a href="javascript:window.close();"> Archiv beenden</a>
	
			*
			<a href="impressum.html">Impressum</a>
	
			*
			<a href="kontakt.html">Kontakt</a> * 
			</span>
			
			
			
			
			<!-- SUCHE --><!-- SUCHE --><!-- SUCHE --><!-- SUCHE --><!-- SUCHE --><!-- SUCHE --><!-- SUCHE --><!-- SUCHE -->
			<div id="suche">

	
			<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)"> <p> <input name="q" type="hidden" /> <input name="qfront" type="text" style="width: 200px" />*<input type="submit" value="Suchen" /></p></form> 
	
	
	
			</div>

			</div>
		
		</div>
	
	</div>
	
	
	<!--TRENNLINIE --> 	
	
	<div id="trennlinie" style="position:absolute; float:left; height:1px; width:100%; z-index:1;  left: 0px; top: 100px; border-bottom:1px solid #DDDDDD;">
	</div>
	
	
	
	<!--ARCHIV --><!--ARCHIV --> <!--ARCHIV --> <!--ARCHIV --> <!--ARCHIV --> <!--ARCHIV --> <!--ARCHIV --> <!--ARCHIV --> 
	
	<div id="archiv">
	<span class="navigation"> 
	
	
	* ARCHIV  *
	<a href="startseite.html">Navigationspunkt 1</a>  *
	<a href="startseite.html">Navigationspunkt 2</a>  *
	<a href="startseite.html">Navigationspunkt 3</a>  *
	<a href="startseite.html" rel="dropmenu1">LINKS</a>  *

	</span>
	</div>

	<!--INHALT --><!--INHALT --><!--INHALT --><!--INHALT --><!--INHALT --><!--INHALT --><!--INHALT --><!--INHALT --><!--INHALT -->
	
	<div id="inhalt">
	
		<!--PFAD --><!--PFAD --> <!--PFAD --> <!--PFAD --> <!--PFAD --> <!--PFAD --> <!--PFAD --> <!--PFAD --> <!--PFAD --> 
	
		<div id="pfad">
		<span class="small">
	
	
		*
		PFAD
	
		*
		<a href="startseite.html">STARTSEITE</a>  »
		<a href="startseite.html">Unterseite</a>  »
		<a href="startseite.html">Unterpunkt</a>  

		</span>
		</div>


	<span class="headline"> 
	 Überschrift <br> </span>
	
	<span class="content"> 
	
	F*****************Text**********************<br><br><br> 
	
	<span class="subheadline"> Überschrift</span><br>
	Mit der Navigationsleiste des Archivs oben links können sie sich durch die einzelnen Inhalte des Archivs bewegen. Das Menü auf der rechten Seite bietet 	einige Einstellungsmöglichkeiten die das Arbeiten mit dem Archiv erleichtern. Sie können das Archiv im Vollbildmodus öffnen, den Vollbildmodus mittels 	"Archiv schliessen" wieder beenden, das Archiv durchsuchen, und drucken...... usw. (zu viele Zeichen im Post)

Die CSS Dateien (liegen im selben Verzeichniss wie die *.htm) schauen wie folgt aus (Als Beispiel die Bildschirm Ansicht):

Code:

/* ********************************************************************************* */

/* Basis Stylesheet Datei fuer Stolpersteine-Remscheid.de                            */

/* Datei: screen.css                                                                 */

/* ----------------------------------------------------------------------------------*/

/* ********************************************************************************* */



/* Formatierungen TEXT                                     */



a:hover {

	text-shadow: 1px 1px 2px #bfbfbf;

	font-family: Helvetica, Verdana, Arial, sans-serif;

	color: #000000;

	background-image:url(bilder/a_hover_10.gif);

	background-repeat:no-repeat; }

	

a {

	text-decoration: none;

	font-family: Helvetica, Verdana, Arial, sans-serif;

	color: #1d1d1c;

	background-image: url(bilder/a_10.gif);

	background-repeat:no-repeat;

	height:10px;

	padding-left:12px; }

	

.content {

	line-height: 150%;

	word-wrap: normal;

	word-break: normal;

	color: #4e4e4e;

	font-size: 12px;

	font-family: Helvetica, Verdana, Arial, sans-serif;}

	

.small {

	line-height: 0.20;

	letter-spacing: 1px;

	color: black;

	font-size: 10.3px;

	font-family: Helvetica, Verdana, Arial, sans-serif;}

	

.headline {

	line-height: 200%;

	background-color: white;

	background-repeat: no-repeat;

	font-weight: bold;

	color: #3a3839;

	font-size: 14px;

	font-family: Helvetica, Verdana, Arial, sans-serif;}

	

.subheadline {

	font-weight: bold;

	line-height: 150%;

	background-repeat: no-repeat;

	color: #454344;

	font-size: 12px;

	font-family: Helvetica, Verdana, Arial, sans-serif;}

	

.navigation {

	letter-spacing: 1.3px;

	color: black;

	font-size: 12px;

	font-family: Helvetica, Verdana, Arial, sans-serif;}

	

	

/* ********************************************************************************* */

/* Formatierungen fuer den HEADER                                           */

#header {

position:absolute; 

float:left; 

height:100px; 

width:100%; 

z-index:1; 

background-image: url(bilder/kopf_neu.gif); 

background-repeat:no-repeat; 

left: 0px; 

right: 0px; 

top: 0px; 

border-bottom:1px solid #FFFFFF;

}



/* ********************************************************************************* */

/* Formatierungen fuer die SEITE                                       */

#seite {

position: right;

float: right;

height: 100px;

z-index:2;

padding: 1px;

}

/* ********************************************************************************* */

/* Formatierungen fuer die SUCHE                                            */

#suche {

position: absolute; 

top: 60px; 

z-index:1; 

padding: 1px;

}

/* ********************************************************************************* */

/* Formatierungen fuer die CONTAINER                                          */

#container {

position: top; 

float:top; 

z-index:1; 

padding: 8px;

}

/* ********************************************************************************* */

/* Formatierungen fuer das ARCHIV                                         */

#archiv {

position:absolute; 

float:left; 

padding: 1px; 

background-color: #FFFFFF; 

z-index:1; 

top: 102px; 

left:8px; 

border-bottom:1px solid #BBBBBB; 

border-right:1px solid #BBBBBB; 

border-left:1px solid #BBBBBB;

}

/* ********************************************************************************* */

/* Formatierungen fuer die TRENNLINIE                                 */

#trennlinie {

position:absolute; 

float:left; 

height:1px; 

width:100%; 

z-index:1;  

left: 0px; 

top: 100px; 

border-bottom:1px solid #DDDDDD;

}

/* ********************************************************************************* */

/* Formatierungen fuer PFAD                                */

#pfad {

position:right; 

float:right; 

padding: 1px; 

z-index:2; 

height: 10px; 

top: 2px; 

right:0px; 

background-color: #F8F8F8; 

border-bottom:1px solid #F0F0F0; 

border-left:1px solid #F0F0F0;

}

/* ********************************************************************************* */



/* Formatierungen fuer DEN INHALT                              */

#inhalt {

position:absolute;

z-index: 1; 

padding: 5px; 

background-color: #F9F9F9; 

right: 8px; 

left: 8px; 

top: 134px; 

border:	1px solid #DDDDDD;

}

/* ********************************************************************************* */

Im Browser OPERA funktioniert die Seite, in allen anderen (Safari, IE, Firefox...) wird die Seite unformatiert ausgegeben.
Ich habe leider überhaupt keinen Blick für CSS-Fehler weil ich überhaupt keine Erfahrung darin habe (Ich habe zwar zig Tutorials gelesen und das Forum durchsucht, aber das schafft keine Erfahrung). Da die Seite in Opera ja schonmal funktioniert gehe ich von einem Flüchtigkeitsfehler aus, vielleicht findet den Jemand von euch?
Wäre für Hilfe dankbar.
Gruß
FrayedEnd

LÖSUNG GEFUNDEN:

"Da es erkennt das es eine CSS Datei ist und es automatisch mit dem CSS Editor öffnet müsste man ja meinen es formatiert den Text auch richtig.
Ich werds mal per Taco und Cyberduck versuchen (Jedes mal wenn ich einen Schritt vom komplett von Hand coden zum automatisieren mache klappt was nicht Oo).

EDIT: Ich glaube ich habs. Wenn ichs per Taco im Unicode speichere klappts. Ich wußte es würde was blödes sein -.-
Vielen vielen Dank an alle!!!"

thebug · 20.02.2008

mal so versucht?

Code:

<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, [B]embossed[/B]" href="druck.css">

oder so?

Code:

<style type="text/css">
@import url("druck.css") print, embossed;
@import url("normal.css") screen;
</style>

lg

leon

FrayedEnd · 20.02.2008

Nein, aber jetzt. Dann klappts auch in Opera nicht mehr

miss.moxy · 20.02.2008

Hm, hab mal Testweise das von dir c/p und lokal ausprobiert,
bei mir spricht das CSS im Safari an :kopfkratz:

Auf den ersten, flüchtigen Blick finde ich nichts, es müsste eigentlich
so klappen :noplan:

Cashe gelöscht?

FrayedEnd · 20.02.2008

Ja mehrfach :/
Die Preview von CODA stellt es auch unformatiert dar. Nur Opera schluckt den Code. Das ist bestimmt irgendwas total dämliches.

EDIT: Falls es Jemandem was bringt das ganze Live zu sehen würde ich per PN natürlich auch die URL verschicken. Da es sich auf einem privaten Server von mir befindet würde ich nur gern vermeiden die URL ins Forum zu packen.

EDIT2: Korrigiere: The Bugs Version klappt in Opera, aber in den anderen Browsern wieder nicht. Der Fehler scheint also nicht an der Verinkung des CSS Files zu liegen sondern an etwas anderem, oder?
Kann ich das CSS File irgendwie falsch formatiert haben?
Oder Klappt das ganze nur per xml und nicht htm? herje, hilfe -.-

joachim14 · 20.02.2008

Du könntest zur Fehlereingrenzung das druck.css statt des screen.css für die Monitordarstellung nehmen und sehen, ob die Browser auch dann stolpern.

miss.moxy · 20.02.2008

PN mir mal die URL

FrayedEnd · 20.02.2008

joachim14 schrieb:
Du könntest zur Fehlereingrenzung das druck.css statt des screen.css für die Monitordarstellung nehmen und sehen, ob die Browser auch dann stolpern.

Sehr gute Idee, hätte ich vorher drauf kommen können.

Ergebniss:
Opera zeigt die Druckansicht richtig an.
Alle anderen Browser zeigen den Code unformatiert an.

msslovi0 · 20.02.2008

Ich nehm die URL auch per PN

miss.moxy · 20.02.2008

Ich kapier es nicht. Ich hab HTML & CSS c/p und bei mir auf
meinen Webspace gelegt und es wird komplett angezeigt.*
Stimmen vielleicht die Rechte der CSS-Dateien auf dem Webspace
nicht? Aber dann dürfte Opera es ja auch nicht anzeigen :noplan:

*URL ging per PN an dich.

FrayedEnd · 20.02.2008

Hmm bei deinem Link bleibt es in allen Browsern unformatiert. Ich bin etwas verwirrt.

miss.moxy · 20.02.2008

Gugg nochmal, Erklärung in der PN…
Ich bin auch verwirrt

G5G · 20.02.2008

Hätte auch mal gerne die URL, vielleicht kann ich etwas beisteuern.

miss.moxy · 20.02.2008

Wir sind inzwischen in diesem Stadium:
Auf 2 von meinen Webspaces funktioniert es problemlos,
auf seinen 2 nicht

msslovi0 · 20.02.2008

Opera funktioniert prima, schaue ich mir im Firebug den Output der direkt von deinem Server eingebundenen CSS-Datei an, kommt das bei raus:

Stell mal sicher, dass die CSS als ASCII hochgeladen wird und dass die Kodierung der Datei korrekt ist.

FrayedEnd · 20.02.2008

Und zwar funktioniert es bei mir af zwei verschiedene Arten nicht, da lege ich Wert drauf!

Und die verschiedenen Browser sind da nichtmal eingerechnet -.-

miss.moxy · 20.02.2008

Das könnte natürlich sein, dass du deine Dateien unter der
falschen Kodierung hochgeladen hast. Das würde zumindest
erklären, warum es bei mir geht :hum:

FrayedEnd · 20.02.2008

msslovi0 schrieb:
Opera funktioniert prima, schaue ich mir im Firebug den Output der direkt von deinem Server eingebundenen CSS-Datei an, kommt das bei raus:

Stell mal sicher, dass die CSS als ASCII hochgeladen wird und dass die Kodierung der Datei korrekt ist.

Hmm, ich arbeite mit CODA. Wie gesagt erst seit kurzem mit CSS. Hab die CSS Datei gad mal nach (WEstern ASCII) konvertiert. Hat aber nix gebracht. Mache ich da vielleicht was falsch? Vielleicht auch das Doctype der HTM?

msslovi0 · 20.02.2008

Eher nicht. Wie überträgst du die denn per FTP? ASCII, Binär oder automatisch? Und was passiert, wenn du die CSS-Dateien von miss.moxy einbindest? Dann sollte es nämlich auch bei dir funktionieren.

FrayedEnd · 20.02.2008

Naja mit CODA stellt er die Verbindung zum Server ja automatisch her, ich drücke halt nur noch auf upload

Anscheinend muss ich da was nacharbeiten. In welcher Form muss die CSS Datei denn genau vorliegen? Dann lese ich mich da ein bevor ich euch hier noch weiter in den Wahnsinn treibe.

Frage zu CSS Auslagerung

FrayedEnd

Aktives Mitglied

thebug

Aktives Mitglied

FrayedEnd

Aktives Mitglied

miss.moxy

Aktives Mitglied

FrayedEnd

Aktives Mitglied

joachim14

Aktives Mitglied

miss.moxy

Aktives Mitglied

FrayedEnd

Aktives Mitglied

msslovi0

Aktives Mitglied

miss.moxy

Aktives Mitglied

FrayedEnd

Aktives Mitglied

miss.moxy

Aktives Mitglied

G5G

Aktives Mitglied

miss.moxy

Aktives Mitglied

msslovi0

Aktives Mitglied

Anhänge

FrayedEnd

Aktives Mitglied

miss.moxy

Aktives Mitglied

FrayedEnd

Aktives Mitglied

msslovi0

Aktives Mitglied

FrayedEnd

Aktives Mitglied