nicht angemeldet
Stylesheet abhängig von Fensterbreite
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
-
Das Prinzip sieht folgendermaßen aus:
[...]das prinzip ist gelinde gesagt dämlich und der redakteur der den artikel verfasst hat standrechtlich erschossen (nein, is nur spass)
css unterstütz medientypen (screen, handheld usw) damit deckst du kleine und grosse geräte ab
ansonsten nutze flexible layouts die sich der fensterbreite anpassn OHNE javascript
% ist hier das stichwort - das von dir verlinkte beispiel ist extrem simpel ohne diesem javascript schwachsinn nachbaubar
-
Hallo,
css unterstütz medientypen (screen, handheld usw) damit deckst du kleine und grosse geräte ab
Das hatte ich ganz übersehen. Danke für den Hinweis.
ansonsten nutze flexible layouts die sich der fensterbreite anpassn OHNE javascript
% ist hier das stichwort
%? Wieso dieses und inwiefern?
Grüße,
Nikolai-
%? Wieso dieses und inwiefern?
das seltsame beispiel im ausgangsposting ist extrem simpel umzusetzen, ist nur auf die schnelle zusammengeschustert und nur getestet unter firefox 2 - sollte aber bis auf den ie6 keine probleme machen (da sind leider ein paar hacks notwendig)
das ding ist natürlich nicht aus flexibles layout zu betrachten da es sich an der vorgabe des heise beispiels im ausgangsposting richtet:linke und rechte spalte sind fix breit, die mittlere flexibel bis zu einer minimalen und maximalen breite - wenn fenster zu schmal, dann rutscht die rechte spalte drunter - wenn noch schmaler die mittlere auch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titel</title> <style type="text/css"> #container { width: 100%; } #col0 { float: left; width: 200px; background: blue; } #col1 { float: left; width: 60%; min-width: 320px; max-width: 800px; background: green; } #col2 { float: left; width: 200px; background: yellow; } </style> </head> <body> <div id="container"> <div id="col0">blah<br />blah<br />blah<br />blah<br />blah<br />blah</div> <div id="col1">„Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> <div id="col2">blah<br />blah<br />blah<br />blah<br />blah</div> </div> </body> </html>-
Hallo,
das seltsame beispiel im ausgangsposting ist extrem simpel umzusetzen, ist nur auf die schnelle zusammengeschustert und nur getestet unter firefox 2 - sollte aber bis auf den ie6 keine probleme machen (da sind leider ein paar hacks notwendig)
Der IE raubt mir sowieso den letzten Nerv bei der Arbeit an dieser Website ...
das ding ist natürlich nicht aus flexibles layout zu betrachten da es sich an der vorgabe des heise beispiels im ausgangsposting richtet:
linke und rechte spalte sind fix breit, die mittlere flexibel bis zu einer minimalen und maximalen breite - wenn fenster zu schmal, dann rutscht die rechte spalte drunter - wenn noch schmaler die mittlere auch
Ich hatte mich bei dem Projekt etwas von dem Heise-Beispiel gelöst und eigentlich nur das Javascript-Prinzip kopiert. Mir ging es nun darum, die Elemente entsprechend nicht nur irgendwo drunterrutschen zu lassen, sondern z. B. die Navigation entweder links oder zwischen Kopfzeile und Inhalt zu positionieren. Und bei sehr großen Fensterbreiten noch so eine Art "Zierleiste" an den rechten Rand zu setzen.
Ich fürchte, daß solche Spielereien doch nur mit Javascript möglich sind (welches ich eigentlich auch vermeiden möchte).Muß ich das gaze Vorhaben noch einmal gründlich überdenken und noch etwas herumspielen.
Die Sache mit dem invaliden Code macht die Sache ja auch noch schlechter.Danke für Deine Arbeit mit dem Quellcode. Hilft mir schon etwas weiter, und hat vor allem meinem Verständnis auf die Beine geholfen.
Grüße,
Nikolai
-
-
-
-
Hallo,
Findet jemand den Fehler?
Optimist! Vielleicht sind es ja mehrere ;-)
Einer ist jedenfalls: Dein HTML ist ungültig.<head>
...
<style type="text/css"><!-- @import
url(./layout/formate.css); --></style>
<style type="text/css"><!-- @import
url(./layout/position3.css); --></style>
</head>Ab hier darf nämlich kein <style> Element mehr vorkommen.
Gruß, Don P
-
Hallo,
Einer ist jedenfalls: Dein HTML ist ungültig. [...]
Ab hier darf nämlich kein <style> Element mehr vorkommen.Als ich den Script-Vorschlag las, war ich auch etwas irritiert. Habe es dann vom W3C-Validator überprüfen lassen, der meine Dokument für valide erklärt. Nun das. Hmm.
Gruß,
Nikolai-
Hallo Nikolai,
Als ich den Script-Vorschlag las, war ich auch etwas irritiert. Habe es dann vom W3C-Validator überprüfen lassen, der meine Dokument für valide erklärt. Nun das. Hmm.
Der W3C-Validator führt kein Javascript aus.
Trotzdem produziert auch ein
document.write("<a hein blöd><b></c></d>");klar ungültigen code. Mann kann und sollte sich also nicht nur auf den Validator beschränken.Jonathan
-
-
-
Hallo Nikolai,
Mal abgesehen von dern anderen Kommentaren fügst du hier:
document.writeln('<style type="text/css"><!-- @import url(multidesign/' + stylesheet + '); --> </style>');
den pfad "Multidesign" hinzu. Ich bezweifele, dass das so gewünscht ist.
stylesheet = './layout/position1.css'
würde dann z.B. zu
url(multidesign/./layout/position1.css);
werden.
Jonathan
-
Hallo Jonathan,
Mal abgesehen von dern anderen Kommentaren fügst du hier:
document.writeln('<style type="text/css"><!-- @import url(multidesign/' + stylesheet + '); --> </style>');
den pfad "Multidesign" hinzu. Ich bezweifele, dass das so gewünscht ist.
Danke. Das war der gesuchte Fehler. Da hatte ich entweder etwas übersehen oder falsch verstanden. Jetzt funkioniert es im Prinzip.
Grüße,
Nikolai
-