Warum CSS nicht includen??
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angeben
aufwand
beispiel
code
datei
erstellen
externe datei
format
grund
http
impressum
karpfen
machen
minute
nachteil
schrift
sinn
verzeichnis
vorteil
weben
-
Hi,
ich war grad dabei eine externe CSS-Datei einzubinden, aber es hat irgendwie nicht richtig geklappt.
Das Menü wurde nicht dargestellt, wie ich es haben wollte.
Da hab ich den Code kopiert und includiert.
Dann hat es funktioniert.
Was ist denn überhaupt der Unterschied zwischen einer externen CSS-Datei und includieren?
Ergibt das irgendeinen Nachteil den CSS-Code zu includieren und nicht normal einzubinden
? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
-> Verschoben nach HTML & Javascript
Der Vorteil einer extermen CSS-Datei ist einfach, dass man den gleicen Code nicht in jede Seite nochmal schreiben muss (und dann überall ändern muss, wenn man was verändern will), sondern ihn in einer externen Datei hat, die einfach nur überall eingebunden wird. Ändert man dann was, wird es auf allen gleichermaßen verändert. -
Der Vorteil der CSS-Datei ist, dass man die Änderungen eigentlich nur in dieser Datei vornehmen muss, wenn man Formatierungen änder (z.B. Farbe, Schrift, etc...)
Hat man diese Sachen in den html-Dateien integriert, dann muss man dies auf jeder Seite tun.
Man sieht, durch die CSS-Datei hat man im Regelfall weniger Aufwand.
Folgende Probleme kenne ich im Bezug auf nicht richtig funktionierenden CSS-Dateien:
1.) Der Cache-Server hat sich noch nicht aktualisiert (deshalb nutze ich XAMPP lokal zum Testen)
2.) Der Pfad zur CSS-Datei wurde nicht korrekt angegeben (vielleicht mal den Code der html posten und sagen, in welchem Verzeichnis die html-Datei und die CSS-Datei ist)
3.) Der Browsercache ist nicht geleert, dann mal den Browsercache leeren -
Danke erstmal für die Antworten.
Ich mein ich hab die das CSS-Zeug in ner Datei und die includier ich dann auf alle Seiten, was doch den gleichen Effekt haben müsste wie das normale einbinden oder?
Also
<link rel="stylesheet" href="datei.css">
und
<?
include "datei.php";
?> -
Der Code bindet eine PHP-Datei ein:
<? include "datei.php"; ?>
Der Code bindet die CSS-Datei ein:
<link rel="stylesheet" href="datei.css">
Vielleicht gibst du uns mal nen Link zu der Seite, wo der Style nicht funktioniert!
Beitrag geändert: 28.11.2008 17:20:29 von karpfen -
Ja, ich hab halt <style>CSS-Codes</style> gemacht und dann in den Head includiert.
http://www.1ngo.de/web/tmenu.htm
Das ging iwie nicht. Wenn ich das so kopiere ja, aber nicht wenn ich das CSS wegnehm und mit dann wieder einbinde.
-
So langsam bezweifle ich, dass ich dich auch richtig verstehe.
Vielleicht solltest du dir das hier mal durchlesen:
http://www.web-toolbox.net/webtoolbox/css/css-extern.htm -
Also:
body{
background:URL(blabla.gif);
}
würde z.B. in meiner Css-Datei stehen.
Die binde ich normalerweise ja mit :
<link rel="stylesheet" href="datei.css">
Aber ich kann ja auch
<style>
body{
background:URL(blabla.gif);
}
</style>
mit PHP in den Head includieren.
Gibt es da Nachteile? -
<link rel="stylesheet" href="datei.css"> ist das gängige.
Ich sehe keinen Grund, eine PHP oder HTML-Datei mit diesem Code zu includieren, wenn man sowas auch mit oben genannter Variante lösen kann. -
Der Nachteil ist folgender:
Nehmen wir an, du hast 3 Seiten: die index.php (Home), die news.php 8Neuigkeiten) und die impressum.php 8Impressum).
Dazu kommt eine datei formate.css oder formate.php.
Wenn du die Datei formate.css nennst und über <link rel="stylesheet" href="formate.css"> einbindest, wird diese, wenn jemand sich alle deine 3 Seiten (Home, Neuigkeiten und Impressum), anschaut, nur einmal geladen.
Wenn du die datei aber formate.php nennst und über ein PHP-include einbindest, wird der Inhalt der datei als Besatndteil der 3 anderen datein auch 3 mal an den User gesendet.
Mit dem PHP-Include verursachst du also sowohl dem User als auch dem Serverbetreiber höheren Traffic. Dabei sollte das Ziel immer sein, Traffic zu verringern, weshalb das includen über <link rel="stylesheet" href="formate.css"> auf jeden Fall vorzuziehen ist.
-
Ok, dummerweise klappt das iwie nicht wenn ich das mit ner externen CSS-Datei versuche.
http://www.1ngo.de/web/tmenu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Dynamische Navigationsleiste</title> <style type="text/css"> div#Tmenu { font-size: 94%; width: 39.8em; padding: 0.8em; border: 1px solid white; background-color: #eee; } * html div#Tmenu { width: 41.4em; w\idth: 39.8em; /* IE 6 in standards-compliant mode */ } div#Tmenu div { clear: left; } ul#Navigation { margin: 0; padding: 0; text-align: center; } ul#Navigation li { list-style: none; float: left; position: relative; margin: 0.4em; padding: 0; } * html ul#Navigation li { margin-bottom: -0.4em; } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.8em; left: -0.4em; } * html ul#Navigation li ul { left: -1.5em; lef\t: -0.4em; } ul#Navigation li ul li { float: none; display: block; margin-top: 0.2em; margin-bottom: 0.2em; } ul#Navigation a, ul#Navigation span { display: block; width: 7em; font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif; text-decoration: none; font-weight: bold; padding: 0.23em 0.97em 0.17em 1.03em; border: 1px solid #600; border-left-color: #ea0; border-top-color: #ea0; color: white; background-color: #c00; } * html ul#Navigation a, * html ul#Navigation span { width: 9.2em; w\idth: 7em; /* IE 6 in standards-compliant mode */ } ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover { padding: 0.17em 1.03em 0.23em 0.97em; border-color: #ea0; border-left-color: #900; border-top-color: #900; background-color: #e00; } ul#Navigation li ul a:hover { border-color: #900; } li a#aktuell { border-right-color: #300; border-bottom-color: #300; background-color: #900; } ul#Navigation li ul span { border-right-color: #c96; border-bottom-color: #c96; color: #900; background-color: white; } ul#Navigation li a:active, ul#Navigation li:hover a:active { color: black; background-color: #f00; } /* dynamisches Ein-/Ausblenden */ ul#Navigation li ul { display: none; } ul#Navigation li:hover ul { display: block; background: #eee; } </style> <!--[if IE]> <script type="text/javascript"> // <![CDATA[ if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("Navigation").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); } function sucheUL(UL) { do { if(UL) UL = UL.nextSibling; if(UL && UL.nodeName == "UL") return UL; } while(UL); return false; } function einblenden() { var UL = sucheUL(this.firstChild); UL.style.display = "block"; UL.style.backgroundColor = "#eee"; } function ausblenden() { sucheUL(this.firstChild).style.display = "none"; } window.onload=hoverIE; } // ]]> </script> <![endif]--> </head> <body> <div id="Tmenu"> <ul id="Navigation"> <li><a id="aktuell" href="#Beispiel">Seite 1</a> <ul> <li><span>aktuelle Seite</span></li> <li><a href="#Beispiel">Seite 1b</a></li> <li><a href="#Beispiel">Seite 1c</a></li> <li><a href="#Beispiel">Seite 1d</a></li> </ul> </li> <li><a href="#Beispiel">Seite 2</a></li> <li><a href="#Beispiel">Seite 3</a> <ul> <li><a href="#Beispiel">Seite 3a</a></li> <li><a href="#Beispiel">Seite 3b</a></li> <li><a href="#Beispiel">Seite 3c</a></li> </ul> </li> <li><a href="#Beispiel">Seite 4</a></li> </ul> <div></div> </div> </body> </html>
-
Das, was zwischen <style> und </style> steht, packst du in eine datei namens formate.css .
(Die <style> und s/style> tags selber jedoch nicht), dann entfernst du den Kompletten <style> block aus der menu.html Datei und fügst im <head> noch <link rel="stylesheet" href="formate.css"> bzw, mit XHTML, <link rel="stylesheet" href="formate.css" /> ein.
-
Das hab ich schon getan, aber es ging aus irgendeinem Grund nicht.
Hast du es selber getestet?
-
Versuchs mal mit folgenden Varianten:
<link rel="stylesheet" href="formate.css">
<link rel="stylesheet" href="/formate.css">
<link rel="stylesheet" href="./formate.css">
<link rel="stylesheet" href="../formate.css">
Manchmal muss man da einfach bissel rumprobieren.
Aber du erklärst ja auch einfach nicht, in welchen Verzeichnissen irgendwelche Dateien sind und du magst ja auch nicht einen Link zur problematischen Seite zeigen ;)
EDIT:
Quelle: http://www.html-seminar.de/links-und-verzeichnisse.htm
Wenn Sie mit Verzeichnissen arbeiten, weil Ihre Struktur Ihrer Website sehr komplex wird, müssen Sie bei den Links die Verzeichnisse mit angeben. Zusätzlich können Sie auch über die Angabe ".verzeichnisseite.htm" angeben, dass er immer von dem Hauptverzeichnis ausgeht, auch wenn Sie den Link in einem Unterverzeichnis aufrufen. Empfehlenswert ist es eh nur bei komplexen Seiten (über 200 Seiten meiner Meinung nach). Verzeichnisse selber sind wichtig, um z.B. die Bilder unterzubringen.
UND WIE GESAGT:
Der Cache vom Browser sowie der Cache von Lima kann verhindern, dass deine Formatierung über CSS korrekt angezeigt wird. Dann dauert es halt ne ganze Weile. Den Browsercache deines Firefox oder Internet-Explorer kannst du selber leeren.
Beitrag geändert: 28.11.2008 19:56:34 von karpfen -
Denkt doch mal ein wenig abstrakter ;) Es macht Sinn für die Auslagerung von Styles, wenn zum Beispiel verschiedene oder gleiche Sytles für verschiedene Seiten benötigt werden. Auch macht es Sinn, ein css fürs Drucken zu deffinieren. Ob man das dann direkt in HTML schreibt oder als externe Datei auslagert bringt optisch gesehen das gleiche. Auch technisch macht das keinen relevanten Unterschied aus. Interessant wird das erst, wenn man wirklich große CSS-Dateien hat, dann gewährleisten mehrere kleinere Dateien einen besseren Workflow. Auch wenn man im Team arbeitet, kann (meistens) immer nur eine Datei von einer Person bearbeitet werden, das wird dann ein Konflikt, wenn zB einer an der HTML arbeitet und der andere gleichzeitig das CSS bearbeiten will.
Ich persönlich schreibe CSS erst direkt in die Tags. Sobald ich verschachteln muss, nehm ich mir fünf Minuten und setze das CSS in den Header. Wird diese zu groß bzw. gibt es für verschiedene Gebiete (zB Druckansicht, Style-Auswähler, ...) verschiedene Designvorlagen lagere ich sie in einzelnen Dateien aus. -
trueweb schrieb:
Ich persönlich schreibe CSS erst direkt in die Tags. Sobald ich verschachteln muss, nehm ich mir fünf Minuten und setze das CSS in den Header. Wird diese zu groß bzw. gibt es für verschiedene Gebiete (zB Druckansicht, Style-Auswähler, ...) verschiedene Designvorlagen lagere ich sie in einzelnen Dateien aus.
Ist das nicht irgendwie umständlich? Zumindest das mit dem CSS in die Tags schreiben kann ich nicht nachvollziehen, hätte gedacht, dass erhöht den Aufwand. Also gerade sowas wie Klassen oder Überschriften hat man doch schneller in den style- Tags geschrieben oder eben in eine externe Datei?! Oder war das jetzt nur zum Beispiel auf das Erstellen von einem Grundgerüst mit Divs bezogen? Gruß -
Ist das nicht irgendwie umständlich? Zumindest das mit dem CSS in die Tags schreiben kann ich nicht nachvollziehen, hätte gedacht, dass erhöht den Aufwand. Also gerade sowas wie Klassen oder Überschriften hat man doch schneller in den style- Tags geschrieben oder eben in eine externe Datei?! Oder war das jetzt nur zum Beispiel auf das Erstellen von einem Grundgerüst mit Divs bezogen? Gruß
Bei kleineren Sachen mache ich das genauso, ist aber nicht unbedingt sinnvoll, wie ich selber feststellen musste.
Wenn du nämlich den Style deiner Seite mal komplett änderst:
(weiße Schrift auf schwarzem Hintergrund) -> (schwarze Schrift auf weißem Hintergrund)
Jetzt hast du soetwas in der Überschrift stehen: style="color:#FFFFF0;" vorher war das ganz normal und gut lesbar.
Jetzt aber ist das fast weiß auf weiß.
Gruß, Prog
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
