Projekt CSS-Slider Anwendungsbeispiel Lernzilla (PHP-Lernkartei)- www.user-archiv.de/projekt_php_lernkartei
Beachte den Positionsregler unterhalb der Navigations-Buttons! Mit Maus drüberfahren und anschließend klicken kann man die Position verändern
doctypes - - 1. von 26 Datensätzen
Doctype-Angaben: Liste von gültigen DTDs
gemaess Veroeffentlichung des W3C
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Ältere Angaben in Dokumenten und Spezifikationen des W3C sollten durch diese ersetzt werden, weil z.B. die Pfade zu den W3C-Seiten fälschlicherweise relativ statt absolut veröffentlicht sind.
Dies ist eine vereinfachte Version der PHP-Lernkartei, hier als DEMO eingebunden, um die Anwendung des CSS-Sliders auf die Lernkartei zu testen und weiter zu entwickeln.
Die
PHP-Lernkartei in Aktion findet man hier, das Skript sowie Erklärungen über die
angewandten CSS-Experimente hier. Die Dateien müssen noch überarbeitet und an die neuen CSS-Standards und den Doctype strict umgearbeitet werden, was auf einer neuen Projektseite im User-Archiv-Bereich geschehen wird.
Hier, im Zusammenhang, interessiert nur eines: die Anwendung des CSS-Sliders auf die Lernkartei.
Die für die Lernkartei nachträglich entwickelten Skins
(Screenshots hier) waren
nichts anderes als CSS-Experimente. Sie ahmten den Winamp-Player samt Equalizer nach und das letzte Ziel war, völlig auf Grafikelemente zu verzichten und eine reine "CSS-Pseudo-Grafik" zu entwickeln, was erstmals in nachfolgendem Skin erfolgt.
Die bisherigen Experimente sind dort eingeschlafen, wo es um die Anwendung von Schiebereglern ging. Das ist in zwei Punkten der Fall:
- Der Positions-Schieberegler, der sowohl die derzeitige Position anzeigt als auch einen Sprung zu einer anderen Position ermöglicht (bei Winamp im Musikstück, in der Lernkarte zur Karteikarte).
- Die Regler zur Regulierung der Farben für Text, Hintergrund usw. nach dem Design-Vorbild des tonregelnden Equalziers.
Die Realisierung von Schiebereglern ist normalerweise nur mit Hilfe von JAVA oder JAVASCRIPT möglich. Ein Experiment mit Java gelang, weitere Experimente mit Javascript-Reglern waren vorgesehen. Problem ist, dass einige Leute Java oder Javascript ausgeschaltet haben, und bevor hier weitere Experimente angestellt werden konnte, war zunächst eine grundsätzliche Klärung der einzusetzenden Technik notwendig. Hier geriet die Entwicklung ins Stocken.
Der CSS-Slider beseitigte diese Hürde. Er scheint sogar noch vorteilhafter und schneller realisierbar zu sein, als Javascript.
Zum Farbslider: Normalerweise wird mit Java oder Javascript der mouse-Bewegung ein Wert zugeordnet, der wiederum einem namentlich gekennzeichneten HTML-Element (z.B. ein DIV-Container) als Hintergrundfarbe zugeordnet wird. Dieser Effekt lässt sich auch erreichen, indem man in den A HREF - Text einen SPAN-Container einbindet, der mit CSS absolut außerhalb des Schiebereglers positioniert wird.
TODO bzw. in Planung: Zuordnung der Hintergrundfarbe direkt in die Textfelder; Schieberegler steuer komplette Farbschemata.
Notizen: Monitorfläche=2 verschachtelte DIV-Container, 1.Container 100% Bildschirmbreite, Inhalt zentriert, zweiter Container 810 px Breite, hier eigentlicher Content. Zentrierung funktionierte nur in IE6, nicht in FF, Abhilfe durch margin-left:auto und margin-right:auto (definiert im inneren Container), statt text-align:center im äußeren Container.
Verschachtelte DIV-Container unbedingt meiden, ebenso eine Mischung von relativen und absoluten Positionierungen; statt dessen jedes Element einzeln absolut positioneren.
Schieberegler autark formatieren (beginnend mit position:relative) und in einen (relativ oder absolut) positionierten Außencontainer einfügen. Der Außencontainer benötigt keine ID, diese ist im Schieberegler selbst definiert, und sollte alle Abmessungs-Werte bei Null haben.
Innerhalb des Reglers: Hauptcontainer (ID=Regler1), relativ positioniert, damit Anker für die nachfolgenden Elemente gegeben ist, dann hintereinander jeweils abgeschlossene DIV-Container, der erste mit der graphischen Anzeige des jetztigen Standortes, der zweite mit dem eigentlichen CSS-Slider, beide absolut positioniert auf 0:0, also dem linken oberen Rand des Hauptcontainers, und somit überlappend. Unbedingt zu emfpehlen ist: Hauptcontainer enthält Grundformatierungen (farbige Ränder, Hintergrundfarbe, Höhe) und die anderen Container legen nur Reglerknopf bzw. CSS-Slider ohne Randformatierungen darüber. Anderenfalls enorme Konstruktions- und Positionierungsprobleme
Schieberegler-Elemente: Am praktikabelsten ist es, die Werte für Breite, Höhe und Positionierung im body direkt angeben, und die restlichen Formatierungen (Farbe etc) in den Head-CSS, es sei denn, Breite/Höhe/Position soll sich mit hover ändern.
Original-Skins und Erklärungen:
http://www.burkes.de