Design-Update (1) und Content-Update
Nun hab ich die Tabs in der Sidebar doch nochmal komplett umgeworfen. Gründe dafür gab’s genug. Zum einen wollten die auf den Einzelansichtsseiten der Beiträge gar nicht funktionieren, zum anderen schien’s mir logischer eine Lösung auf jQuery-Basis zu verwenden, da das Framework für einiges andere noch ganz nützlich sein wird was ich hier realisieren will.
Zum Beispiel hat die alte Lightbox zum vergrößern der Bilder ausgedient. Der Overhead an zusätzlich eingebundenen Javascript-Dateien (8 Stück inkl. dem Prototype-Framework zumindest über das WP-Plugin, das hier in Verwendung war) war einfach zu viel. Da gibt es auch charmante jQuery-Lösungen die weitaus schlanker daher kommen. Weiterhin will ich die Suchfunktion die derzeit als Notlösung in der obersten Tab-Box schlummert als inline-Ajax-Suche ausbauen – wenn ich eine ordentliche Lösung dafür finde ;-)
Die Tabs haben dann bei der Gelegenheit auch gleich ein anderes Design bekommen – die bisherige Lösung hat mich nicht vollständig glücklich gemacht. Die jetzige gefällt mir wesentlich besser. Kleine Änderungen in der Zukunft sind dennoch nicht ausgeschlossen. Ich überlege ob ich die „Buttons“ evtl. noch mit einem Verlauf versehe.
Diejenigen unter Euch, die den Blog bisher nur mit dem IE betrachtet haben, sollten evtl. mal zum Firefox bzw. Safari greifen. Fast jedes eckige Kästchen wurde mit -moz-border-radius bzw. -webkit-border-radius per CSS abgerundet. Sämtliche Internet-Explorer inkl. IE8 sind natürlich nicht in der Lage das darzustellen. Am schönsten sieht das Ganze übrigens mit dem Firefox 3 aus – der scheint die Abrundung am besten zu beherrschen.
Als ich dann grad ansetzen wollte um diesen Beitrag hier mit ecto zu schreiben, ist mir aufgefallen, dass ja meine alten Beiträge alle noch im Desktop-Client schlummern *kopfklatsch*. Das ist mir in der Hektik gestern abend natürlich nicht eingefallen. Die letzten noch fehlenden Beiträge, die nicht im Google-Cache zu finden waren, konnte ich so mit wenigen Klicks wiederherstellten. Dummerweise hilft das auch nicht in Sachen Kommentaren – die sind wohl endgültig weg – schade.
Fast vergessen… Die Tabs, die jetzt zum Einsatz kommen sind die jQuery-idTabs von sunsean. Die vorherige (eigentlich auch ganz charmante Lösung) war der JavaScript tabifier von BarelyFitz.
Bis auf den schwarzen Header gefällt es mir sehr gut.
Dem Header fehlt noch irgend etwas, er ist breit und wirkt auf Grund der dunklen Farbe sehr hart …
Wow, das Design hat was.. werde mich aber wohl erst noch dran gewöhnen müssen :)
Frank, schau dir mal die jquery ui.tabs an. Meiner Meinung nach bieten die die meisten Optionen.
Ja die bieten viel mehr, weiß ich – wollte ich aber nicht ;) Ich will lieber weniger dafür schneller und problemloser. Mit dem ui.tabs hab ich mich auch schon gespielt. Für komplexere Projekte sicher gut.
Mir gefällt es auch gut. ;-) Allerdings werden die Tabs bei Neu, Pop, Tags usw. jetzt in zwei Zeilen angezeigt. Das sieht nicht ganz so schön aus, finde ich.
@Matthias: Die werden per JS ineinander verschoben und das Script rennt erst nachdem die Seite fertig geladen hat – ich werd mir da mal was anderes einfallen lassen.
Sieht hübsch, vor allem ziemlich aufgeräumt aus. Gefällt mir ziemlich gut und lässt sich auch gut lesen. Allerdings habe ich im Safari noch so einen hässlichen horizontalen Scrollbalken.
Danke für’s Lob, Marcel und danke für den Hinweis bzgl. Safari. Ist mir wohl beim testen entgangen und spontan hab‘ ich grad gar keine Ahnung wo der herkommt. Ich schau’s mir aber später mal an und fix das entsprechend.
Sehr schön. Der Hintergrund im Kommentarfeld irritiert allerdings sehr stark. Das solltest du dir nochmal überlegen. Sehr schön auch die Sidebar mit ihren tabs.
Find das Design klasse! Weiter so!
Schwer zu sagen – idTabs sind aber recht leicht durchschaubar, evtl. solltest Du einfach die einzelnen Schritte nochmal durchgehen – irgendwo hast du da vermutlich was vergessen oder falsch bezeichnet. Du hast ja hoffentlich das Originalbeispiel nachgebaut und nicht das von mir verhunzte hier ;)
Das Originalbeispiel ist eigentlich recht einfach.
Probiers doch einfach mal mit einem möglichst einfachen Ansatz. Zu den ganzen Demos auf der idTabs-Homepage gibt’s ja die Sourcen.
Leider habe ich Probleme mit den idTabs, obwohl diese leicht einzubinden sind. Irgendetwas scheint mit den DOM-Aufrufmethoden den IE6 zu stören.
Denn seit ich die beiden Skripte im „head“-Bereich aufrufe, beschweren sich IE6-Benutzer, dass bei ihnen die Meldung „Verbindung abgebrochen“ erscheint.
Der Zeitpunkt dieses Verhaltens ist gleichzeitig mit der Umstellung auf idTabs. Also der Quelltext ist valide und mit keinem Browser gibt es Probleme. Nur eben mit dem IE6…?