Gefloatete und absolut positionierte Elemente zentrieren

centeredelements

Vor einiger Zeit wurde ich gefragt ob es möglich ist, gefloatete Elemente zu zentrieren. Es ist möglich, und die Lösung ist im Grunde genommen auch völlig logisch. Man kommt nur leider nicht so einfach darauf.
Mit diesem Beitrag möchte ich daher zwei elementare Fragen im Umgang mit CSS beantworten. Wie zentriere ich gefloatete und wie absolut positionierte Elemente?

Beitrag zu Ende lesen

WordPress-Editor: Komplexe Inhaltsstrukturen benutzerfreundlich pflegen

wordpress-editor-styling

Wenn ihr WordPress für Kundenprojekte einsetzt, werdet ihr schnell merken, dass einige Kunden Schwierigkeiten mit dem WordPress-Editor haben. Insbesondere wenn ein komplexer Inhaltsbereich gefüllt werden soll – beispielsweise ein mehrspaltiges Layout – sind viele Kunden überfordert. Und wir wollen den Kunden ja auch nicht mit der HTML-Variante quälen.
Ihr könnt den Editor ganz einfach mit Standard-Inhalten füllen und mit einer eigenen CSS-Datei stylen. Und das sogar für verschiedene post_types individuell. Es bietet sich u.U. also an, vorab eine HTML-Struktur festzulegen und für den Kunden benutzerfreundlich darzustellen.

Beitrag zu Ende lesen

Happy Nikolaus! Mein Adventskalender-Türchen zum Thema „CSS3-Keyframe-Animationen“ im Webstandard-Blog

css3-keyframe-demo

Im CSS3-Adventskalender des "Webstandard-Blog" ist heute ein Türchen mit einem Gastbeitrag von mir geöffnet worden. Ich erkläre wie ihr CSS3-Keyframe-Animationen im Layout einsetzen könnt und animiere exemplarisch eine Küstenlandschaft mit Leuchtturm, Möwen und Wolken.
Ich freue mich sehr mit diesem Tutorial am Adventskalender teilnehmen zu können, die Beiträge haben mich nämlich bereits im letzten Jahr überzeugt und sind sehr umfangreich und interessant. Ihr solltet also unbedingt auch einen Blick auf den Kalender von letztem Jahr werfen - die Beiträge sind nach wie vor aktuell.
In diesem Sinne: Ich wünsche euch eine gemütliche Weihnachtszeit :)

Beitrag zu Ende lesen

HTML-Elemente per JavaScript (jQuery) ersetzen

jquery-logo-icon

Mit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet als dem Googlebot; Stichwort Cloaking. Ihr solltet beim Content-Replacement also immer genau prüfen, was der User und was Google sieht.

Beitrag zu Ende lesen

jQuery Accordion – Elemente auf- und zufahren lassen (slide toggle) und parallel das Icon austauschen

jquery-slide-toggle

Ich habe beim Aufräumen meiner Dropbox ein praktisches Snippet für einen Accordion-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden.
Ich habe eine Basis-Datei erstellt, die nur den elementaren Code der Funktion enthält. Zusätzlich habe die Demo optisch aufbereitet und ebenfalls als Download bereitgestellt. Das Mini-Script kann aber auch einfach kopiert und sofort eingesetzt werden.

Beitrag zu Ende lesen

Theme Options Page für WordPress erstellen

wordpress-theme-options-page

Komplexe und hochwertige WordPress-Themes verfügen in der Regel über eine so genannte "Theme Options Page" - eine zusätzliche Seite im Dashboard anhand der ein Benutzer das Theme über die normalen Möglichkeiten hinaus anpassen kann. Das TwentyEleven-Theme von WordPress wird beispielsweise mit einer solchen Options-Page ausgeliefert. Hier könnt ihr u.a. auswählen ob das Theme schwarz oder weiß sein soll, in welcher Farbe Verlinkungen auf der Website dargestellt werden und ob ihr eine Sidebar anzeigen möchtet.
In diesem Beitrag möchte ich euch zeigen wie ihr selbst eine Theme-Options-Page erstellt. Anhand eines leicht verständlichen Beispiels werdet ihr das Prinzip sicher schnell auf eure eigenen Projekte übertragen können.

Beitrag zu Ende lesen

Photoshop: Suchfunktion für Ebenen nachrüsten

photoshop-script-ebene-suchen

Vor Kurzem habe ich mir noch einmal angeschaut welche Wünsche ihr für Photoshop CS6 geäußert habt und was davon in der kommenden Version voraussichtlich integriert werden wird. Unter anderem wurde sich eine Suchfunktion für Ebenen gewünscht, und da dieses Feature geradezu nach einer Script-Lösung schreit, habe ich mich auf die Suche gemacht. Mit einem Photoshop-Script lässt sich in den Version CS2+ die Suchfunktion nachträglich installieren. Zwar wäre eine "echte" Suche besser, aber da das Feature auch in der CS6 nicht erwartet wird, ist das Script die beste mir bekannte Lösung.

Beitrag zu Ende lesen