CSSZenGarden :: CSS-Editor v1.0

[dani_o]

Da ich dies für ein Projekt brauchte, hab ich mal den Online-CSS-Editor zur Verfügung gestellt. Dieser Editor basiert auf OpenSource, also lasst Euch damit aus wenn Ihr wollt.

Fakt ist, um diesen Editor nutzen zu können solltet Ihr schon CSS beherschen können. Für alle Fälle ist die CSS-Hilfe von selfhtml mit eingebunden. Im Online-Demo ist die Speicherfunktion deaktiviert! Wenn Ihr das Packet downloaded, habt Ihr die Speicherfunktion natürlich dabei.

Natürlich muss man nicht unbedingt den Quellcode von CSSZenGarden nutzen. Wenn Ihr Euren eigenen Code anzeigen lassen wollt, verändert dementsprechend die "view.php" und die "preview.php". Für die Übergabe des eingegebenen CSS aus dem Editor müsst Ihr folgenden Code im Header einsetzen:

view.php:

    <script type="text/javascript">
    var CSS = escape(parent.document.all.CSSCONTENT.value);
    document.write('<style type="text/css">');
    document.write(unescape(CSS));
    document.write('</style>');
    </script> 

preview.php:

<script type="text/javascript">
    var CSS = escape(parent.opener.document.all.CSSCONTENT.value);
    document.write('<style type="text/css">');
    document.write(unescape(CSS));
    document.write('</style>');
    </script> 

Getestet in: Mozilla und Internet-Explorer 7

PS.: Einzigstes Problem ist der Tabulator-Sprung im Mozilla. Um diesen nutzen zu können empfehle ich den Internet-Explorer zu nutzen.

Demo: Klick bitte hier
Download: Findest Du hier

[TobiaZ]

Sieht gut aus. Wenn mein Firefox das nicht schon annähernd drin hätte, würd ichs sicher auch benutzen.

Einzige Kleinigkeit die mir so spontan auffällt:

Warum werden Überschriften (H3) im CSS groß geschrieben, aber ul klein?

Die Sortierung der Listen (oben links und rechts) ist ein bisschen gewöhnungsbedürftig.

[Click]

Zuerst muss ich Sagen, dass mir deine Idee und Umsetzung auchsehr gefällt.
Was mir aufgefallen ist sind 2 Sachen:[list=1][*]Der Firefox springt in den Quirks Mode. Das passiert schätzungsweise, weil das "http://www.w3.org/TR/html4/loose.dtd" im Doctype fehlt.[*]Der Konqueror bekommt den Tabulator im Editor nicht hin (wie auch im Mozilla) und das Preview hat eine bestimmte Höhe und zieht sich nicht über die restliche Seite. Aber ansonsten funktioniert der Editor auch im Konqueror.[/list=1]

[dani_o]

Original geschrieben von Click
[list=1][*]Der Firefox springt in den Quirks Mode. Das passiert schätzungsweise, weil das "http://www.w3.org/TR/html4/loose.dtd" im Doctype fehlt.[*]Der Konqueror bekommt den Tabulator im Editor nicht hin (wie auch im Mozilla) und das Preview hat eine bestimmte Höhe und zieht sich nicht über die restliche Seite. Aber ansonsten funktioniert der Editor auch im Konqueror.[/list=1]

Ja der Tabulator geht leider nur im IE richtig gut - da arbeite ich noch drann :-D
wegen dem: http://www.w3.org/TR/html4/loose.dtd - Lach ich hab den OriginalQuelltext des deutschen csszengarden genommen - sry hol ich noch nach das einzufügen ...

Thx ;-)

[dani_o]

Original geschrieben von TobiaZ
Sieht gut aus. Wenn mein Firefox das nicht schon annähernd drin hätte, würd ichs sicher auch benutzen.

Thx und ja weiß ich, hab ich halt wegen dem Projekt gemacht und ich hab so gleich ma Tastaturabfragen gelernt ;.)

Original geschrieben von TobiaZ
Warum werden Überschriften (H3) im CSS groß geschrieben, aber ul klein?

Weil ich nicht aufgepasst hab beim proggen? *sfg*

Original geschrieben von TobiaZ
Die Sortierung der Listen (oben links und rechts) ist ein bisschen gewöhnungsbedürftig.

Ja bin halt Stück für Stück durchn Quelltext gegangen und habs so sortiert dass Du links die wichtigsten hast und rechts die spezials und combi`s ;-) - Gewöhnt man sich schnell drann *g*