WordPress & Webwork - perun.net

Die CSS-Eigenschaften content, counter-reset und counter-increment sind alte Bekannte, da sie ja zum Umfang von CSS 2.1 gehören … und dieses existiert schon ein paar Jährchen. Auch dieser kurzer Artikel ist nicht der erste seiner Art. Es ist lediglich eine kleine Erweiterung meiner Anleitung, wo es darum geht mit Hilfe eines HTML-Editors Dokumente für den Kindle zu erstellen.

Da man in so einem Fall mit langen HTML-Dokumenten arbeitet, die durch viele Überschriften strukturiert sind, würde es sich anbieten auch die Überschriften durch einen Automatismus zu nummerieren. Sicherlich, das geht auch manuell, aber das ist bei längeren Dokumenten zu einem fehleranfällig und zum anderen nicht sonderlich komfortabel wenn z. B. bei 50 Überschriften eine mittendrin mal wegfallen sollte.

Man stelle sich folgenden Aufbau vor: (weiterlesen…)

Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website "wackelt".

Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste erzwingt. Hier eine Methode um dies zu realisieren:

html, body {
    height: 100%; /* Streckt den angezeigten Bereich auf 100% */
}
#container {
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height: auto !important; /* Für moderne Browser */
    height: 100%; /* "Mindesthöhe" für IE <7 */
}

Gefunden auf CSS Div height: 100%. (weiterlesen…)

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…)

Mittlerweile gibt es bei der Umsetzung von Websites zwei "Hauptphilosophien" in Bezug darauf, welche Einheiten man bei den Schriften wählt: Pixel oder Em. Bei Pixel ist die Vorgehensweise einfach, man vergibt den entsprechenden Bereichen einen gewünschten Pixelwert, z. B. font-size: 14px;. Pixel ist auch eine relative Einheit und zwar in Bezug auf das Ausgabegerät des Betrachters. Je nach Monitor ist eine Schriftgröße von 14 Pixel kleiner oder größer.

Die Problematik rund um em

Die Einheit em richtet sich nach den Browsereinstellungen des Nutzers. In den allermeisten Browsern ist die Größe der Schrift mit 16 Pixel voreingestellt. Gibt man zum Beispiel für den Inhaltsbereich font-size: 1.5em; an dann ist die Schrift 24 Pixel groß. So weit, so gut. In Verbindung damit, dass man auch den Ausmaßen der einzelnen Bereiche der Website ebenfalls Breitenangaben in em spendiert hat, war man in der Lage sog. "zoomable Layouts" zu erstellen: änderte der Nutzer die Schrifteinstellungen so wurde auch die Website breiter bzw. schmaler. (weiterlesen…)

Und hier die 22. Ausgabe der preisgekrönten Linkschleuder:

WordPress: alles einbetten was nicht bei drei auf'm Baum ist

Auf wpgarage.com wird beschrieben wie man die Einbetten-Funktion (oEmbed) auch auf zusätzliche Dienste ausweiten kann. Mit oEmbed wird bei WordPress verstanden dass man von bestimmten Diensten (z. B. YouTube) lediglich die URL des Videos oder Bildes einfügt und WordPress sich dann automatisch um die bestmögliche Einbindung kümmert.

CSS3: Generator für Vendor-Präfixe

CSSPrefixer generiert automatisch die Vendor-CSS-Präfixe, z. B. zu border-radius wird noch -moz-border-radius und -webkit-border-radius eingefügt.

Schriften testen und die Verbreitung

Wer Typetester.org nicht kennt, sollte es sich gut überlegen diese Website zu bookmarken:

Typetester im Einsatz

Man kann dort bis zu drei Schriften gleichzeitig gegen einander vergleichen lassen. Dabei kann man Schriftgröße, Farbe, Abständen und einiges mehr einstellen. So kann man schnell sich ein Bild machen, wie eine Schrift sich in einem bestimmten Text macht.

Wer herausfinden möchte wie weit eine Schrift im Allgemeinen oder auf einem Betriebssystem verbreitet ist, der sollte sich mal auf Codestyle.org umschauen.

Mit Jetpack bekommt man die Möglichkeit die Funktionen von WordPress.com auch dem selbstgehosteten Weblog (WordPress.org) zu spendieren. Momentan wären dies acht Funktionen:

Zusätzliche Funktionen mit Jetpack

Außer der Funktion Sharedaddy ist jetzt nichts dabei, was in meinen Augen bzw. für mich die Installation von Jetpack rechtfertigen würde. Siehe zu diesem Thema auch den Artikel auf WordPress.com und auf t3n. (weiterlesen…)

Es gibt mehrere Methoden um Inhalte zu verbergen. Um gewisse Inhalte zu verbergen gibt es mindestens zwei sinnvolle Gründe. Zum einen wäre dies um die Zugänglichkeit einer Website für die Screenreader zu verbessern und der zweite Grund ist die Suchmaschinenoptimierung (SEO).

Nein! Im Fall von SEO rede ich jetzt nicht von den Methoden, die Google auf den Plan rufen, wie zum Beispiel versteckte Links etc. Ich rede hier davon, dass ein Logo welches als Hintergrundbild abgelegt ist, oder wie hier ein Teil der kompletten Kopfgrafik, weder für den Screenreader noch für eine Suchmaschine eine Aussage hat. Daher ist es sinnvoll für die "normalen" Besucher das Logo einzublenden, die anderen bekommen dann zum Beispiel den Titel der Seite als Text präsentiert. (weiterlesen…)