nicht angemeldet
Hallo zusammen,
angeregt durch den Artikel "Multiples Webdesign" von PISKE & BRAUN in c't 1/2006 und der entsprechenden Demonstrationsseite
http://www.heise.de/ct/Redaktion/heb/multidesign.html
habe ich versucht, so etwas für die Website unseres DRK-Ortsvereins zu erreichen.
Das Prinzip sieht folgendermaßen aus:
Ein zentrales Stylesheet regelt die Formatierung, fünf weitere Stylesheets die Positionierung einzelner Elemente je nach Fensterbreite des Browsers. Für Besucher ohne aktiviertes Javascript ist ein Standard-Positionierungs-Stylesheet vorgesehen; bei Besuchern mit aktiviertem Javascript fragt ein Script die Fensterbreite ab:
<head>
...
<style type="text/css"><!-- @import
url(./layout/formate.css); --></style>
<style type="text/css"><!-- @import
url(./layout/position3.css); --></style>
</head>
<body>
<script type="text/javascript"
src="./layout/multidesign.js"></script>
...
Das Script multidesign.js sieht nun so aus:
var stylesheet, breite;
if (window.innerWidth) {
breite = window.innerWidth;
} else {
breite = document.body.clientWidth;
}
if (breite<=608) {
stylesheet = 'position1.css'
}
else if (breite<=760) {
stylesheet = 'position2.css';
}
else if (breite <=960) {
stylesheet = 'position3.css';
}
else if (breite <=1200) {
stylesheet = 'position4.css';
}
else {
stylesheet = 'position5.css';
}
document.writeln('<style type="text/css"><!-- @import url(multidesign/' + stylesheet + '); --> </style>');
// Zum Umschalten per Link
function demo(x, y) {
window.resizeTo(x, y);
location.reload();
}
Mein Fehler bei der ganzen Chose: Ich habe von Javascript so ziemlich gar keine Ahnung und habe das aus dem Artikel und von der Multidesign-Seite abgeguckt. Rächt sich prompt durch Nichtfunktionieren. Es wird immer auf das Standard-Positionierungs-Styesheet position3.css zurückgegriffen, nicht entsprechend der Fensterbreite ggf. auf eines der anderen.
Getestet sowohl online als auch offline auf drei verschiedenen Windows-Systemen (2000, XP, Vista) und mit verschiedenen Browsern (IE 5, 6 u. 7, Opera 9.27, Firefox 1.5 u. 2, Netscape 4.75 u. 9).
So, wie ich die Javascript-Einführung in SELFHTML verstehe, ist JS eine Browserangelegenheit, also auch nicht davon abhängig, daß serverseitig JS unterstützt wird.
Findet jemand den Fehler? Ich bin überfragt; und die Idee, im JS den Pfad für die Stylesheets zu konkretisieren, hatte ich auch schon, ohne Erfolg.
(Also so:
if (breite<=608) {
stylesheet = './layout/position1.css'
}
usw.)
Die online-Variante meines Versuchs findet sich derzeit unter
http://www.drk-linz.de/test/
(nur für die ersten drei Seiten sind auch schon die Bilder hochgeladen).
Freundliche Grüße,
Nikolai