HTML kann ganz schön schräg sein.

Wie bekommt man schräge Flächen in HTML und CSS?

Beinahe alle Websites haben eines gemeinsam: Klare, rechteckige Formen.
Allerdings gibt es tolle Möglichkeiten sich mit schrägen Flächen und Kanten und Trapez- oder Skew-Effekten und Dreiecken abzuheben.

Dazu sind keine Bildgrafiken nötig, sondern man kann mit den richtigen Methoden das Ganze direkt über CSS und HTML lösen. Der Vorteil: Größen und Farben lassen sich leicht und schnell verändern, Unterstützung von Retina-Displays und geringere Ladezeiten.

HTML kann ganz schön schräg sein. weiterlesen

Beispiel-Code in WordPress richtig formatiert anzeigen

WordPress bietet zwar im Editor mit der <code>...</code>-Syntax scheinbar eine Möglichkeit, Code in einen Beitrag einzubauen. Doch leider werden hier die Formatierungen, insbesondere Leerzeichen und Tabs, nicht korrekt übernommen. Dieses Problem kann mit der Verwendung von <pre>...</pre> umgangen werden.

Bei der Verwendung von <pre>...</pre> wird vom Browser die Formatierung exakt so wiedergegeben, wie Sie im Quelltext steht. Also Vorsicht bei langen Zeilen, diese werden auch als eine einzige Zeile dargestellt und können evtl. das Layout zerstören.

Mit dieser Anpassungen in den Styles wird der Quelltext dann auch noch optisch vom restlichen Beitrag abgerenzt:

pre {
	border: 1px solid #DADADA;
	background-color: #F5F5F5;
	color: #888888;
	padding: 8px;
}

Weitere Informationen, wie man Code passend in seine Beiträge integrieren kann, sind direkt bei WordPress zu finden.

Typo3-Contentelement „Tabelle“ mit sIFR-Headline

Für ein aktuelles Typo3-Projekt war es erforderlich, eine Tabelle mit folgenden Anforderungen zu erstellen: einfache Pflegbarkeit für jedermann, Tabellenzellen abwechselnd gestylt und Headlines in einer Schrift, die garantiert nicht auf jedem Rechner verfügbar ist.

Um das Problem mit der leichten Pflegbarkeit zu lösen, bot sich das Typo3-Contentelement „Tabelle“ an. Hier lässt sich leicht eine Tabelle aufbauen, ohne über HTML-Kenntnisse zu verfügen und auch ein Wizard wird angeboten, um die Erstellung noch weiter zu erleichtern.
Für den Redakteur ist hier nur wichtig, dass er die Option „Position der Kopfzeile“ auf den Wert „oben“ setzt.

Dadurch wird die erste Zeile von Typo3 nicht als normale Tabellenzeile an den Browser gegeben, sondern in folgendem Format:

<thead><th>...</th><th>...</th><th>...</th></thead>

Der Head-Bereich einer Tabelle kann mit CSS gesondert gestylt werden um ihn als Überschrift kenntlich zu machen.

Mit Hilfe von sIFR können in HTML-Seiten Überschriften in jeder beliebigen Schriftart dargestellt werden. Dazu benötigt der Client lediglich JavaScript und das Flash-Plugin.

Mein erster Versuch, die sIFR-Datei einzubinden sah so aus:

... sSelector:".contenttable thead th" ...

und das Ergebnis so:

Scheinbar kann sIFR die Breite der <th>-Elemente nicht korrekt auslesen und dadurch die Schrift in der eingebetteten SWF-Datei nicht in die richtige Größe bringen. Abhilfe dieses Problems schuf ein kleiner Trick:

Im TypoScript fügte ich diese Zeile ein, wodurch der Inhalt aller Tabellenzellen automatisch noch in ein <p>-Element gefasst werden.

tt_content.table.20.innerStdWrap.wrap = <p>|</p>

Der sIFR-Code wurde entsprechend angepasst

... sSelector:".contenttable thead p" ...

und das Resultat sah so aus:

Die Breite wurde korrekt erkannt, die Schriftgröße innerhalb der sIFR-Datei stimmte, aber aufgrund eines anderen Styles hat das <p>-Element einen Abstand nach unten, der hier in der Tabelle nicht erwünscht ist.

Also wurde das <p>-Element durch ein <div>-Element ersetzt. Sowohl im TypoScript

tt_content.table.20.innerStdWrap.wrap = <div>|</div>

als auch im sIFR-Aufruf

... sSelector:".contenttable thead div" ...

Wodurch das Ergebnis schließlich so war, wie vom Kunden gewünscht:

Die weitaus geringere Herausforderung war die abwechselnde Hintergrundfarbe der Tabellenzeilen.

Die Zeilen werden von Typo3 schon automatisch abwechselnd mit den CSS-Klassen tr-odd bzw. tr-even versehen. Somit reichen wenige Zeilen in der CSS-Definition, um die abwechselnde Hintergrundfarbe zu erzeugen:

tr.tr-odd td { background-color: #EBEBEB; }
tr.tr-even td { background-color: #E1E1E1; }