WordPress & Webwork - perun.net

Ich hatte gestern Abend ein Problem mit Opera 11. In allen anderen Browsern (Firefox, Chrome, dem Internet Explorer) habe ich es geschafft einen Bereich vertikal zu zentrieren, kein Problem.

Einzig Opera weigerte sich und verfrachtete das Element nach oben. Um mir die Zeit zu verschaffen mich mit dem Problem tiefer gehend zu befassen habe ich mich für einen CSS-Hack entschieden. Einige der älteren Hacks, wie zum Beispiel das einbinden einer opera.css funktionierten bei meiner Installation nicht, aber folgender Hack tut seinen Dienst:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       /* Hier kommen dann die abweichenden Regeln */
 }

Gefunden bei stackoverflow.com.

Dem CSS-Hack traue ich nur bedingt, aber als schnelle Übergangslösung geht es in Ordnung. Jetzt geht es darum herauszufinden warum sich Opera bei der vertikalen Zentrierung über line-height so störrisch angestellt hat.

Es gehört zu den Grundlagen von CSS zu wissen, wie man ein Wort, Satz oder Verweis unterstreicht. Hier ein sehr einfaches und verkürztes Beispiel:

a       {color: #900; text-decoration: none;}
a:hover {text-decoration: underline;}

Damit zu keinen Missverständnissen kommt, sollte man im Web vorsichtig sein wenn Teile unterstreicht, die keine Verweise sind. Da sehr viele Nutzer dann fast instinktiv darauf klicken, weil sie dort einen Link erwarten. Aber dies nur am Rande. (weiterlesen…)

Seit einigen Tagen steht das Rezensionsexemplar des neuen CSS-Buches vom Kollegen Peter Müller auf meinem Arbeitstisch. Das Werk heißt Das große Little Boxes Buch und ist mit seinen 800 Seiten und dem Hardcover alles andere als little.

Der große Umfang des Buches kommt dadurch zu Stande, dass Peter zwei seiner Bücher – Little Boxes 1 und Little Boxes 2 – aktualisiert und zu einem Buch zusammengefasst hat.

Das Werk richtet sich eindeutig an CSS-Anfänger oder an Kollegen, die sich in den letzten 4-5 Jahren in diesem Segment nicht fortgebildet haben. Denn das Buch fängt bei Adam & Eva an und hört mit einem 65-Seitigen YAML-Abschnitt auf.

Das Buch ist in zehn Abschnitte aufgeteilt, die da wären: (weiterlesen…)

Die CSS-Sprites sind eine sehr beliebte Methode um die Performance einer Website zu verbessern. Die CSS-Sprites sind zum einen sparsam bei der Dateigröße, das äußert sich vor allem bei vielen kleinen Grafiken (z. B. Icons) und zudem werden HTTP-Aufrufe gespart. Als Beispiel habe ich die Hintergrundgrafik eingefügt, mit der ich hier die Icons der diversen Netzwerke einbinde.

Standardmäßig eignen sich die CSS-Sprites dann wenn man entweder die Höher oder die Breite des Elements kennt. Kennt man die Breite, dann sortiert man die einzelnen Grafiken horizontal. Kennt man die Höhe, dann sortiert man dagegen vertikal. Wenn man aber weder die Breite noch die Höhe des Elements kennt, dann hat man ein Problem. Hier kann aber der Artikel Pseudo Spriting helfen. (weiterlesen…)

Kollege Frank Bültge hat einen netten Tester für die Media Queries erstellt. Wer sich jetzt fragt was das nun wieder ist, dem empfehle ich für erste den Artikel im Archiv von Dr. Web Magazin.

Mit Hilfe der Media Queries versucht man in CSS3 die Fähigkeiten des Ausgabemediums abzufragen, zum Beispiel:

@media only screen and (max-device-width: 480px) {...}

Mit Hilfe der Media Queries kann man nicht nur die Breite und Höhe des Displays und des Browserfensters abfragen sondern auch die Position und die Auflösung.

Simple Media Queries Tester

Im Tester von Frank kann man die Breite und die Höhe für die Geräte definieren und dann die zu testende URL eingeben. So bin ich auch auf das Tool aufmerksam geworden. In den Stats ist mir aufgefallen, dass jemand fleißig perun.net getestet hat.

Bevor sich jemand die Mühe macht: nein, ich setzte hier die Media Queries nicht ein.

Ich habe in diesem Weblog schon an zwei Stellen zum Thema HTML-Newsletter geschrieben: HTML-Newsletter stylen und HTML-Newsletter stylen: drei Quellen. Hier folgen zwei weitere Quellen die sich mit dem Thema beschäftigen und eine Quelle stellt kurz fünf Newsletter-Dienste vor.

Unter Creating HTML Emails : An Overview for Web Designers wird das Thema HTML-E-Mails ausführlich beschrieben, es wird auf die Probleme hingewiesen und wie man damit umgeht. Darüber hinaus werden einige weiterführende Quellen genannt.

Unter 50 Useful And Free HTML Newsletter Templates werden 50 kostenlose Vorlagen für HTML-Newsletter aufgelistet. Von minimalistisch über "business-like" (steinigt mich nicht, mir fiel auf Anhieb kein besserer Begriff ein) bis zu farbenfroh. Da sollte für so ziemlich jeden Geschmack etwas dabei sein.

Unter Email marketing services reviewed werden fünf Newsletter-Deinste vorgestellt. Auf t3n werden unter Die wichtigsten deutschen und US-Anbieter fürs E-Mail-Marketing sogar 27 Newsletter-Dienste vorgestellt.

Ich wünsche euch ein schönes Wochenende.

Hier die 15 Beiträge dieses Weblogs, die in diesem Jahr am häufigsten aufgerufen wurden.

1. Viel Aahhhh und ein wenig ooooh mit dem Samsung Galaxy S I9000
   Wie man sieht Harware-Rezensionen sind auch hier ein viel gelesenes Thema.
2. Premium WordPress-Themes
   Die Auflistung von Anbieter die Premium-Themes anbieten (auch mit deutschsprachigem Support) nimmt einen starken zweiten Platz ein.
3. WordPress-Themes verstehen 1
   Dieser Artikel ist sein langer Zeit ein Dauergast in den Top-5.
4. WordPress als CMS: ein Beispiel
   WordPress als "klassisches" CMS" geschrieben im Jahr 2005. Ergänzend dazu der zweite Teil WordPress als CMS: zweites Beispiel.
5. CSS3: Schatten für Text und Boxen
   Wie man mit CSS3 Schlagschatten für Schriften und Block-Elemente umsetzt.
6. Selbständige, Angestellte und der Stundensatz
   Was man bei den Stundensätzen von Selbständigen beachten sollte.
7. Neu in WordPress 3.2: Standard-Theme Twenty Eleven
   Das neue Standard-Theme von WordPress.
8. WordPress: Flattr, Twitter, Facebook, Feedburner und Xing ohne Plugins
   Wie man gängige Social-Buttons ohne Plugins einbaut.
9. WordPress: Artikelbilder (Post Thumbnails) aktivieren
   Noch einmal in aller Deutlichkeit erklärt.
10. WordPress: die Wahl des Lightbox-Plugins
    Lightbox-Plugins für Bilder gibt es wie Sand am Meer, welches davon ist aber Ressourcen-schonend. siehe auch den Folgeartikel: WordPress: Shadowbox JS als Lightbox-Plugin.
11. WordPress: kostenloses Redaktionshandbuch
    Ein 144 Seiten (DIN A4) langes Handbuch. Man kann es kostenlos online lesen. Für Mitglieder von akademie.de gibt es auch eine PDF-Version.
12. Google Analytics: IP-Übertragung anonymisieren
    Die IP-Adressen anonymisieren und damit ein Stück weit sicherer (in Punkto Datenschutz) werden.
13. WordPress: Websites für kleine Budgets
    Tipps für WordPress-Projekte mit kleinem Budget.
14. Mehrere dynamische Sidebars in WordPress
    Wie man mehrere Widget-Bereiche in WordPress erstellen kann.
15. CSS3 und abgerundete Ecken
    Abgerudnete Ecken halt.