FrayedEnd
Aktives Mitglied
Thread Starter
- Dabei seit
- 13.11.2007
- Beiträge
- 178
- Reaktionspunkte
- 26
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:
Die Angaben der CSS Dateien beziehen sich auf die ID der Container in der *.htm Datei:
Die CSS Dateien (liegen im selben Verzeichniss wie die *.htm) schauen wie folgt aus (Als Beispiel die Bildschirm Ansicht):
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!!!"
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;
}
/* ********************************************************************************* */
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!!!"
Zuletzt bearbeitet: