HTML & CSS | perun.net – Seite 8

Wie ich es bereits im Artikel Amazon Kindle: unser erstes WordPress-E-Book versprochen habe werde ich hier auf perun.net beschreiben, wie man lediglich mit einem Text- bzw. HTML-Editor Dokumente und E-Books für Amazon Kindle erstellt.

Doch bevor du loslegst musst du ein paar Vorbereitungen treffen und die Entwicklungsumgebung einrichten.

Die Vorbereitung

Um Dokumente und E-Books für Kindle zu erstellen benötigt man keine teure Entwicklungsumgebung … im Grunde genommen muss man kein Cent extra Geld ausgeben, wenn man es nicht möchte.

Folgende Komponenten sind notwendig: (weiterlesen…)

Zur Abwechslung gibt es mal wieder drei Links zu CSS3:

• Wie man den CSS-Validator so einstellt, dass zumindest die Vendor-Präfixe nicht als Fehler angekreidet werden.
• Im Artikel CSS3 vs Photoshop: Transforms werden die Fähigkeiten von CSS3 und Photoshop in Bezug auf Transformationen (Rotation, Skalierung etc.) vergliechen.
• Unter dem Beitrag The ultimate responsive web design roundup verbirgt sich eine sehr lange Auflistung zu Quellen, die sich mit dem Thema responsive Webdesign (an das Ausgabegerät anpassen) beschäftigen.

Viel Spaß beim Lesen.

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.