CSS-Clearfix: Floats anständig clearen

CSS Clearfix

Elemente die “gefloated” sind, trifft man überall auf Webseiten. also hier und da mal ein float:left; oder float:right; ist ja nicht weiter tragisch und hilft ungemein dabei, die Webseite zu gestalten. Allerdings sollte man immer dafür sorgen, dass das Floating nach dem letzten Element aufgehoben wird, ansonsten kann es sein, dass das folgende Element etwas an der falschen Stelle steht.

Weiterlesen

(CSS) Boxen im Pinterest-Style

CSS Boxen im Pinterest Style

Ab und an muss man mal ein paar Boxen auf einer Webseite darstellen. Diese sehen schön aus, wenn sie sauber nebeneinander “gefloetet” sind, wenn sie alle die gleiche Höhe haben. Haben sie das nicht, kann es vorkommen, dass ab und an etwas viel Platz zwischen den einzelnen Boxen ist. Je nach dem, wo die Vorherige aufhört und die Nächste anfängt. Wäre es da nicht schön, wenn sich alle Boxen irgendwie selbst anordnen? Also quasi da wo Platz ist?

Weiterlesen

CSS: Bildwechsel bei Mouseover

Ich habe mich mal wieder quer durch meine Blogliste gelesen und bin dabei auf einen Artikel bei Martin gestossen, in dem er beschreibt wie man einen simplen Mouseovereffekt hinbekommt. Seine Beschreibung bezieht sich dabei auf eine Erweiterung des <img /> – Tags mit den Attributen onmouseover=”” und onmouseout=””.

Diese Methode ist sicherlich die Einfachste aber auch anfällig, wenn der Besucher in seinem Browser JavaScript deaktiviert hat. Denn die beiden genannten Methoden sprechen die JavaScript-Engine des Browsers an. Ist diese nicht aktiv, wird kein Bildwechsel zu sehen sein.
Weiterlesen

WordPress: Akismet Update (v2.5.0) und unschöne Kommentarformatierung im Dashboard

Mit dem Update auf Version 2.5.0 von Akismet, wir nun in den Kommentaren im Dashboard ein zusätzlicher Hinweis zu Status des Kommentars. Leider wird durch diesen die Optik etwas zerrissen. Aber mit einem kleinen Eingriff in das CSS von WordPress kann man dies korrigieren.
Weiterlesen

Lesestoff #2 – CSS-Tipps und Tricks

Lesestoff

Im modernen Webdesign geht es nicht mehr ohne. Nein, die Rede ist nicht von jQuery, sondern von etwas viel “Älterem”, von CSS.

CSS ist in diesem Falle auch keine Abkürzung für ein Computerspiel, sondern steht für Cascading Style Sheet, welches die Möglichkeit bietet, HTML-Elementen ihr Aussehen zu verabreichen.

Um genau dieses CSS soll es hier heute gehen und dabei möchte ich euch wieder einige Links meiner Sammlung präsentieren.
Weiterlesen

How To: CSS und UTF-8

Wieder einmal ein Artikel, welcher aus einem Suchbegriff – gesucht wurde nach “smarty utf 8 css” – entstand.

Hierzu sei gesagt, das es keinen Unterschied macht, ob man dafür die Smarty-Template Engine nutzt oder nicht. CSS bleibt CSS. Aber wie bringt man CSS nun UTF-8 bei?

1
@charset "utf-8";

Dies als erste Zeile im CSS unterbringen. Das wars dann auch schon.

Ach ja, bevor ich es vergesse, der Sinn und Zweck dieser Angabe im CSS ist übrigens beim W3C nachzulesen.

Weiterlesen

WordPress: Eigene Cursor im Blog verwenden

Mittels CSS hat man die Möglichkeit den Mauscursor auf einer Seite anzupassen. Nicht nur das man definieren kann, ob über einem Button die Hand erscheinen und somit auf ein anklickbares Element hinweisen soll, sondern auch komplett eigene Cursorthemes.

Natürlich funktioniert dies auch unter WordPress und damit man nicht direkt in das CSS des Themes oder ein anderes CSS von WordPress eingreifen muss, erstellt man dafür ein kleines Plugin. Dies geht in diesem Fall wirklich einfacher als es klingen mag.
Weiterlesen

5 Beispiele für schöne Menüs mit und ohne jQuery

Die Menüführung ist das A und O einer guten Webseite. Gerade wenn man viele Informationen oder Unterseiten unterbringen muss, sollte das Menü gut durchdacht sein.

Ich habe mir erlaubt, hier mal ein paar Beispiel für schöne Menüs zu präsentieren. Dabei mache ich keinen Unterschied, ob diese nun rein auf CSS / CSS3 basieren, oder jQuery mit zu Hilfe nehmen.
Weiterlesen

CSS Pseudo-Element :content

Ein hervorragendes Beispiel, dass mit CSS nicht nur DIVs und Tabellen formatieren kann zeigt CSS-Tricks im Artikel “CSS Content” auf. Dort wird beschrieben, wie man mit dem Pseudo-Element :content selbst Attribute von Tags beeinflussen kann. So wird zum Beispiel beschrieben, wie man CSS3 Tooltips schon mit CSS2 realisieren kann.

Ein sehr lesenswerter Artikel.

Weiterlesen

PHP CSS Browser-Selector: Die moderne Art der Browsererkennung

Gerade im Bereich Webdesign / Webentwicklung ist es wichtig, verschiedene Browser zu erkennen. Ich meine damit nicht an Hand ihre Aussehens, sondern im Quelltext einer Seite. Der Grund dafür ist ganz einfach die verschiedene Art und Weise wie die Browser mit dem Code umgehen, bzw. diesen darstellen.

Eine sehr schöne und einfache Art, welche die bisherigen Conditional Comments überflüssig macht, hat Matthias Schütz gefunden, den PHP CSS Browser-Selector. Dieser erkennt sowohl Browser, Betriebssystem und Browserengine und versieht das entsprechende HTML-Element mit den dazugehörigen Klassen.
Weiterlesen