Ok, ich trau mich mal... (HP)

[syronth]

Wer mal CSS in Action sehen möchte und einen Netscape 6.2, Mozilla oder Opera 6 hat, kann mal einen Blick auf http://www.giersche.com/ werfen. Auf dem IE (auch 6) sieht die Seite wegen kränkelnder CSS-Implentierung scheiße aus, sorry, ich arbeite dran.

Es stehen dort 3 CSS-Designs zur Wahl, die über Links ausgwählt werden können und das Layout der HP _komplett_ ändern...

Falls der Browser Cookie meldet, annehmen, sonst kann keine Variable übergeben werden und der Layoutwechsel scheitert. Beim Opera funzte das Umschalten beim Testen nicht - wenn das bei wem mit Opera 6 doch klappen sollte, bitte posten :-).

Sektion "Stories" ist noch nicht online, ansonsten darf sich über meine Artikel und anderes aufgeregt werden, was ich dort anbiete ;-). Ich erkläre dort auch das CSS der HP.

viel Spaß und ich freu mich auf Comments/Kritik.

[Lor]

Hascht Recht, auf dem IE sind n Haufen Buttoms quer über den Bilschirm verteilt, mit Opera siehts normal aus.

[outlaw_wolf]

Nicht schlecht......
Sehr gelungenes Design!!
Wie kann ich das Layout über einen Link wechseln?

[syronth]

Thx - welches Design meinst du ;-)

Bezieht sich die Frage auf die technische Lösung oder klappte es bei dir nicht?

Die technische Lösung ist etwas tricky:

Die Links setzen erst einmal mit OnClick="JavaScript:document.cookie='style=xxx'"> einen Cookie und laden die Seite neu (durch Verweis auf die eigene Seite).

Im Head jeder Seite wird ein JavaScript geladen, das diesen Cookie abfragt.

If (document.cookie=="style=xxx") {
CSSFile="xxx.css" }

(xxx einfach rauszufiltern und ein ".css" dranzuhängen würde es verlängern, auch wenn es 'eleganter' wäre.)

Dann:

load="<LINK REL=\"STYLESHEET\" HREF=\""+CSSFile+"\" TYPE=\"text/css\">";

document.write(load);

Der <LINK...> wird so ins Dokument geschrieben und prompt aufgerufen.

[outlaw_wolf]

gelungen sind alle designs,
aber das 2. gefäfft mir am besten.

danke für die erklärung.
ich werde mich gleich mal ans basteln machen.

[Susi]

Yepp find auch super besonders des im Opera !!!
Ne Frage hier zum IE, kann des sein, dass die z-Koordinate für den Layer oben net stimmen ? des isch ja hintendran ;)

[Harakiri]

Default Design sieht cool aus - switchen der designs klappt aber unter Opera / WinXP

[outlaw_wolf]

Ich hab noch zu wenig Ahnung von dem Ganzen....
Ich bekomme nur Fehlermeldungen vom Javascript.
Lieder funktioniert nichts..

Mein script sieht so aus:
If (document.cookie=="style=layout"){CSSFile="layout.css"}
If (document.cookie=="style=layout2"){CSSFile="layout2.css"}
load="<LINK REL=\"STYLESHEET\" HREF=\""+CSSFile+"\" TYPE=\"text/css\">";
document.write(load);

[syronth]

@Susi

Schalte die Erkennung deines Opera mal auf "OPERA" ein :-) Das steht eigentlich auch auf der Seite im 2.Absatz und ist wichtig für die richtige Darstellung.
Deiner gibt sich als IExplorer aus und dadurch wird auch das CSS des IE geladen, das an den IE angepaßt ist (und auch noch überarbeitet werden muß, bzw. ich werde es wohl rausnehmen).

Was du gesehen hast, war, wie die Seite momentan auf dem Internetexplorer aussieht ;-)

@Outlaw

Einmal:

var load, CSSFile;

sollte am Anfang des Skripts stehen (die Variablen werden so als existent definiert ;-)

Und hinter ... CSSFile="xxx.css"; <- Semikolon jeweils dahinter. Also
{ CSSFile="xxx.css"; }. JS macht gern Zicken, wenn mal ein Semikolon fehlt, leider machte ich beim Tippen des Posts denselben Fehler ;-)

Das sollte es sein, denn sonst sehe ich an sich keinen Fehler. Vielleicht schaust du dir noch einmal OnClick="JavaScript:document.cookie='style=xxx'"> an, wichtig ist, daß alle Anführungszeichen ( " ' ' " ) da sind, übersieht man schnell.

[syronth]

Hmm, in der Hitstatistik führt IE 5.0 vor allen anderen -> viele "getarnte" Operas. Ich werde mal mein Loadskript anpassen, damit es bei "IE5" gleich Opera-CSS lädt...

Edit:
UPDATE: Operas brauchen die Kennung nicht mehr zu ändern, sie werden nun über UserAgent entlarvt, egal wie sie sich "tarnen".

[Susi]

Originally posted by syronth
@Susi

Schalte die Erkennung deines Opera mal auf "OPERA" ein :-) Das steht eigentlich auch auf der Seite im 2.Absatz und ist wichtig für die richtige Darstellung.
Deiner gibt sich als IExplorer aus und dadurch wird auch das CSS des IE geladen, das an den IE angepaßt ist (und auch noch überarbeitet werden muß, bzw. ich werde es wohl rausnehmen).

Was du gesehen hast, war, wie die Seite momentan auf dem Internetexplorer aussieht ;-)



Wie kommste denn dadrauf ?

[syronth]

Ähem, vielleicht habe ich die Website erstellt und anhand deines Screenshots erkannt, daß es das IE-Layout war?

Außerdem hat sich die Angelegenheit erübrigt - wie ich schrieb. Du scheinst nicht zu wissen, wie dein Opera funktioniert und was es mit der Erkennung auf sich hat?

[outlaw_wolf]

Mit
<script language="javascript" type="text/javascript" src="layout.js"></script>
lade ich mein javascript.

In dem Javascript steht folgendes:
var load, CSSFile;
If (document.cookie=="style=layout") { CSSFile="layout.css"; };
If (document.cookie=="style=layout2") { CSSFile="layout2.css"; };
load="<LINK REL=\"STYLESHEET\" HREF=\""+CSSFile+"\" TYPE=\"text/css\">";
document.write(load);

Und die Links sehen wie so aus:
<a href="index.html" OnClick="JavaScript:document.cookie='style=layout'">Layout 1</a>
<a href="index.html" OnClick="JavaScript:document.cookie='style=layout2'">Layout 2</a>


Die Links setzen doch das Cookie, welches das script abfragt, oder?
Allerdings geht bei mir garnichts. :-(

Leider muß ich zugeben, daß ich keine von Java habe.....

[Susi]

Originally posted by syronth
Ähem, vielleicht habe ich die Website erstellt und anhand deines Screenshots erkannt, daß es das IE-Layout war?

Außerdem hat sich die Angelegenheit erübrigt - wie ich schrieb. Du scheinst nicht zu wissen, wie dein Opera funktioniert und was es mit der Erkennung auf sich hat?

Könntest du mir vielleciht mal erklären von was du redest ?
Der Screenshot stammte nicht vom Opera.

[syronth]

@Susi

Sorry, ich hab eine Kleinigkeit in deinem Ursprungspost überlesen. Der IE zeigt nun nur noch "cacao" an, mehr kann er CSS-mäßig eh nicht, Anpassungen waren müßig. Aber ich schrieb ursprünglich auch, das der IE nie in der Lage war, sie vernünftig anzuzeigen...

@Outlaw

If (document.cookie=="style=layout") { CSSFile="layout.css"; }
If (document.cookie=="style=layout2") { CSSFile="layout2.css"; }

Hinter geschweiften Klammern keine Semikolons, nur hinter Anweisungen.

<a href="index.html" OnClick="JavaScript:document.cookie='style=layout'">Layout 1</a>

"JavaScript" zusammenschreiben.
EDIT: Oder ist das Forum an der Schreibweise schuld? Seltsam.

Es wäre gut, wenn du dir SelfHTML und speziell die generelle Syntax von JS anschaust...
( http://selfthtml.teamone.de/ )

[Susi]

Originally posted by syronth
@Susi

Sorry, ich hab eine Kleinigkeit in deinem Ursprungspost überlesen. Der IE zeigt nun nur noch "cacao" an, mehr kann er CSS-mäßig eh nicht, Anpassungen waren müßig. Aber ich schrieb ursprünglich auch, das der IE nie in der Lage war, sie vernünftig anzuzeigen...



Hab ich mir doch fast denkt, so aneinander kann man garnet vorbeireden. ;)

[Liszca]

monsterposting!

[Leonidas]

Ganz ehrlich: Was soll es super ambitioniertes HTML-Projekt, wenn es dann letztlich auf Javascript aufsetzt. Streich doch erst einmal Javascript aus Deinem Wortschatz, eh Du den TABLE-Befehl streichst.

[syronth]

Ähem, wieso? Weil du einen Browser benutzt, der mit JS nicht vernünftig umgehen kann, sodaß du es ausschalten mußt?

Falls es dir nicht aufgegangen ist: JavaScript ist für die Idee der Website unabdingbar und auch genau für solche nützlichen Dinge da. Tables waren dagegen nie dazu gedacht, es als gestalterisches Element zu benutzen. Font-Tags sind offiziell aus HTML rausgeflogen. JavaScript nicht.

Zum Thema "superambitioniert": was ist dir eigentlich über die Leber gelaufen?
Nach einer mehr oder weniger heftigen Diskussion über Websiten (im besonderen über Frames und Tabellen) hab ich's einfach mal wissen wollen, was mit CSS möglich ist. Da ich positiv überrascht war und es für eine ausgezeichnete Sache halte, betone ich es halt ein wenig, um andere dafür zu interessieren. Finito.

[Leonidas]

Ähem, wieso? Weil du einen Browser benutzt, der mit JS nicht vernünftig umgehen kann, sodaß du es ausschalten mußt?

Nein. Weil es Leute gibt, die so etwas bewußt ausschalten.



Falls es dir nicht aufgegangen ist: JavaScript ist für die Idee der Website unabdingbar und auch genau für solche nützlichen Dinge da. Tables waren dagegen nie dazu gedacht, es als gestalterisches Element zu benutzen. Font-Tags sind offiziell aus HTML rausgeflogen. JavaScript nicht.

Ich benutze auch keine Fonts, sondern dafür CSS. Aber nicht als Ersatz Javascript.




Zum Thema "superambitioniert": was ist dir eigentlich über die Leber gelaufen?
Nach einer mehr oder weniger heftigen Diskussion über Websiten (im besonderen über Frames und Tabellen) hab ich's einfach mal wissen wollen, was mit CSS möglich ist. Da ich positiv überrascht war und es für eine ausgezeichnete Sache halte, betone ich es halt ein wenig, um andere dafür zu interessieren. Finito.

Ich meinte das anders: Wenn man schon einmal ein neues Projekt anfängt, ohne jegliche Altlasten, dann kann man es doch gleich richtig machen, oder? Dazu gehört natürlich der Verzicht auf den Fonts-Befehl - aber auch der Verzicht auf sämtliche aktiven Inhalte (meine Meinung).

[syronth]

>Nein. Weil es Leute gibt, die so etwas bewußt ausschalten.<

Und warum?
Der Großteil davon wegen unerwünschter PopUps (einem Thread im SelfHTML-Forum nach). Außer im IE kann man afaik das in jedem anderen Browser unterbinden, ohne JS ausschalten zu müssen.
Davon abgesehen, daß JS trotz alle dem meist aktiviviert ist,

>Ich benutze auch keine Fonts, sondern dafür CSS. Aber nicht als Ersatz Javascript.<

Ersatz wofür? Ich verstehe den Zusammenhang nicht. Das Script ist erstens eine Browserweiche und lädt zweitens auf Wunsch alternatives CSS. Mehr nicht, kein Button-Script, noch sonst irgendwas. Die "Buttons" werden ebenfalls über CSS realisiert, in jedem der 3 Layouts ohne ein Fitzelchen JS, weil obsolet.

Du hast deine Meinung zu JS, absolut legithim. Aber JS ist weder vom W3C ausrangiert, noch irgendwie überholt. Es hat durch IE und durch Nerv-PopUps einen schlechten Ruf, aber neuere Browser haben sich dem angenommen.
Es ist nicht ambitinioniert oder fortschrittlich oder sonstwas, auf JS zu verzichten (es sei denn, man kann es serverseitig lösen, ging bei mir nur eben nicht, sonst hätte ich es tatsächlich serverseitig gelöst). Es ist Ansichtssache und abhängig von dem Ziel der Website. Meine Website funktioniert nebenbei auch ohne JS, es hat dann zwar kein Layout mehr, aber sie funktioniert einwandfrei und ist lesbar.

[barracuda]

Ich bemängele an JS daß kein Browser ein und dasselbe Script wie der andere ausführt. Öffne ich mit dem Opera eine Seite und es tut sich gar nichts oder der Seitenaufbau ist fehlerhaft, schaue ich mal in den Quelltext, und meistens ist das Script entweder für den IE oder NC geschrieben und ja nach Browsertyp der eine oder der andere Teil davon ausgeführt. Mit dem Opera schaut man sprichwörtlich in die Röhre. Solange es keinen verbindlichen Standard für JS gibt, halte ich es für großen Mist der die Besucher der Site verärgert.

[Leonidas]

Originally posted by syronth
Es ist nicht ambitinioniert oder fortschrittlich oder sonstwas, auf JS zu verzichten (es sei denn, man kann es serverseitig lösen, ging bei mir nur eben nicht, sonst hätte ich es tatsächlich serverseitig gelöst). Es ist Ansichtssache und abhängig von dem Ziel der Website. Meine Website funktioniert nebenbei auch ohne JS, es hat dann zwar kein Layout mehr, aber sie funktioniert einwandfrei und ist lesbar.


Ich sehe das anders, und nicht nur wegen der Popups. Ich lehne aktive Inhalte pinzipiell ab.

[syronth]

@Leonidas
Ist dein gutes Recht, aber da prallen eben Ansichten aufeinander. ;-) Ich habe keine Scheu vor JS, ganz recht, aber es ist auch nicht so, daß ich davon besessen bin.

@barracuda
Es gibt einen Standard, allerdings konnte es sich MS nicht nehmen lassen, tlw. ein eigenes Süppchen zu kochen. Wer darauf setzt, muß sich nicht wundern - wobei es oft auch ahnunglos gemacht wird. Der Opera ist besser, als es scheint, es liegt oft auch am schlechten Script und nicht am Browser oder an JS.
Ich selbst hatte beim Script keine Probleme mit irgendeinen Browser, es ist auch minimal.
Was noch etwas hakt, ist das DOM von JS (document.bla.bla...). IE beherscht es schon eine Weile, Mozilla zog nach und Opera6 sollte ich mal antesten, afaik ist der auch einen guten Schritt weiter. Ich hab mal Tabellenzellen per JS-MouseOver ge"highlight"et u.a. Scherze gebaut, wobei ich das Script eigentlich nur für den IE schrieb sozusagen, und war dann erstaunt, das es problemlos auf dem Mozilla lief.

[Leonidas]

Lassen sich unterschiedliche Browser wirklich nur per Javascript erkennen?

[syronth]

In dem Fall, ja. Ich kann kein PHP o.ä. auf meinem Webspace ausführen und es gibt sonst keinen anderen Weg, als es mit JS auf Clientseite abzufragen. Es muß auch eine <link>-Zeile geschrieben werden - worauf das ganze Script hinausläuft.
Ja, ich spiele mit dem Gedanken, auf PHP-fähigen Webspace "umzuziehen".

[Leonidas]

Mit PHP geht es also? Wertvolle Info für später, danke.

[007]

hm, willste wenn man 3D-Center aufruft später so eine art "Weiche" basteln die den Browser erkennt und dann Netscape auf index1.php oder so schickt weil diese speziell dafür ausgelegt ist und Opera dann auf Index2.php leitet weil die speziell für opera ausgelegt ist ?

[outlaw_wolf]

Wie hast Du es geschafft, das die DIV-Boxen mit scrollen???
Ich finde die Idee nämlich genial und würde es auch gerne auf meiner Seite einbringen....