Verwende mal diese Reihenfolge zum Einbinden des Stylesheets:

HTML-Code:

<style type="text/css" title="currentStyle" media="screen">
@import "layout.css";
</style>

<script language="JavaScript" type="text/javascript">
if (screen.width <= 800)
document.write("<link href='800.css' rel='styleSheet' type='text/css'>");

if (screen.width > 800)
document.write("<link href='layout.css' rel='styleSheet' type='text/css'>");
</script>

Ist Javascript im Browser aktiviert, wird das zunächst geladene Stylesheet vom Script überschrieben und die entsprechende CSS-Datei in das Dokument geladen.

Ist Javascript deaktiviert, wird lediglich die layout.css über das style-Element in das Dokument eingebunden, und gut ist.

Hallo Maik,

diesen Ansatz hatte ich auch, doch er führt leider nicht zum gewünschten Ergebnis.

Kommt jemand mit 800*600 Pixel auf die Homepage, wird erst „layout.css“ geladen und anschließend durch „800.css“ ersetzt. Soweit so gut, doch die Vorgaben bzw. IDs, welche in der layout.css hinterlegt sind aber in der 800.css nicht existent sind, bleiben bestehen und führen dann bei 800*600 Pixel punktuell zu einer falschen Darstellung.

VG

Und was ist, wenn der User mit 800*600px und deaktiviertem Javascript auf deine Seite kommt?

Dann müssen die Vorgaben bzw. IDs aus der layout.css doch auch für das Dokument passen.

Da hast Du natürlich recht! Das ist auch der einzigste Wehrmutstropfen bei der Sache. Dort passt es eben nicht mehr 100%ig. Doch ich wäre bereit, diesen Kompromiss zu gehen. 800*600 Pixel Besucher sind schon jetzt äußerst selten, doch dass diese wenigen Besucher auch noch Javascript deaktivert haben, dass kam bislang eigentlich nicht vor (habe GoogleAnalytics im Einsatz). Na ja, sollten die Seiten auf diesem Wege nicht valide zu bekommen sein, muss ich wohl nach einem anderen Weg suchen. Doch vielleicht hast Du oder jemand anderes noch einen weiteren Tipp.

Viele Grüße

Wenn da etwas nicht 100%ig passt, dann stimmt wohl eher mit deinen CSS-Dateien etwas nicht.

O.K., nach Deiner leisen Kritik am Aufbau meiner CSS Dateien , habe ich die 800.css noch einmal geprüft und konnte die Datei dahin gehend bearbeiten, dass ich den zu Anfangs beschriebenen Lösungsansatz jetzt verwenden kann.

Abschließend hierzu habe ich jedoch noch eine Frage: Reicht es bei dieser Variante nicht sogar aus, auf die zweite IF Anweisung ganz zu verzichten? Immerhin wurde ja bereits im Vorfeld die layout.css geladen!?

Habe ich hier einen Denkfehler oder müsste es auch so gehen

<style type="text/css" title="currentStyle" media="screen">
@import "layout.css";
</style>

<script language="JavaScript" type="text/javascript">
if (screen.width <= 800)
document.write("<link href='800.css' rel='styleSheet' type='text/css'>");
</script>

Viele Grüße und besten Dank für Deine Geduld

Meines Erachtens kannst du es dabei belassen

Super, jetzt passt alles und die Dokumente sind valide

Ich "schließe" diesen Thread zugleich.

VG und nochmals besten Dank