HTML & CSS

Berichte zu (X)HTML und CSS

Responsive iframes und YouTube-Videos

von

Wie man zum Beispiel Bilder in ein responsives Design einbindet ist schnell erklärt, hier eine recht gängige Möglichkeit:

.inhalt img {width: 100%; max-width: 60rem; height: auto;}

Diese Vorgehensweise funktioniert leider nicht bei iframes und somit auch nicht bei YouTube-Videos. Die Breite ist nicht das Problem sondern die Höhe, da bei iframes die CSS-Deklaration height: auto; keine Wirkung zeigt. Hier muss man anders vorgehen.

Link zum Screencast: responsive iframes und YouTube-Videos
Link zum Screencast: responsive iframes und YouTube-Videos

Für diesen Beitrag habe ich auch ein Screencast erstellt mit welchem man die Problematik sehr gut erkennen kann. Aber zurück zum Problem, die Lösung besteht darin, dass man den Einbettungscode des YouTube-Videos, also das iframe in ein extra div-Block platziert. Diesen div-Block positioniert man dann relativ und das iframe innerhalb wird dann absolut positioniert. Hier erst einmal das HTML:

Weiter …

Fertiges HTML-Template für E-Books (Kindle)

von

Ich habe vorhin unser Template, welches wir für die Erstellung unserer E-Books für WordPress nutzen auf GitHub veröffentlicht. Das hat zwei Vorteile. Zum einen bekommen die interessierten schnell Änderungen nachgereicht und ich habe endlich einen Grund mich mal wieder nach etlichen Jahren mit GitHub zu beschäftigen. Schließlich habe ich den Account dort erst seit 2009. … Weiter …

hint.css – gestylte Tooltips nur mit CSS

von

Die hint.css eine kleine Tooltip-Bibliothek mit der man gestylte Tooltips umsetzen kann, die lediglich CSS und ein bisschen HTML benötigen: Man muss lediglich die CSS-Datei einbinden, entweder als separate Datei oder n dem man den Code in die bereits bestehende CSS-Datei reinkopiert. Anschließend kann man mit so Konstrukten… Ich bin ein <span class="hint hint–bottom" data-hint="Hallo">Tooltip</span>. … Weiter …

Amazon Kindle: die CSS-Fähigkeiten des neuen Dateiformats

von

Seit längerer Zeit existiert das neue Dateiformat für Kindle, dass eine Unterstützung für HTML5 und für CSS3 bietet. Ich habe bereits darüber berichtet. Seit dem 3.4er Update für Kindle Keyboard unterstützen alle relevanten Kindle-Geräte und auch die Apps, dass neue Format.

Daher habe ich mir gedacht, ich mache mal einen kleinen Test und schaue mal, wie sich das Testdokument in der Kindle-App für Android, dem Kindle Fire 1, dem Kindle Keyboard und dem Kindle Previewer (Vorschau-Software) macht. Das sind die Umgebungen auf denen ich auch sonst teste.

Hier der HTML-Code:

Weiter …

WordPress und CSS3: individuelles Navigationsmenü mit Fade-Effekt (Verzögerung) ausstatten

von

Ich habe im Mai diesen Jahres am Beispiel meiner Herr-der-Ringe- und Hobbit-Website erklärt, wie man WordPress als “klassisches” CMS verwenden kann. Dabei habe ich erklärt, wie man sich den Umgang mit vielen Seiten und Unterseiten erleichtern kann, wie man alternative Titel ausgibt und wie man aus der Hauptnavigation ein Dropdownmenü realisiert.

Beispiel eines Dropdownmenüs einer WordPress-Website

Da ich heute ein paar kleine Änderungen an der Navigation durchgeführt habe, gehe ich auf die Erstellung und die Einbindung solch einer Navigation noch einmal ausführlich ein.

Weiter …

Thinkin’ Tags: visueller Editor zur Erstellung von Website-Prototypen

von

Dirk Jesse dürfte sehr vielen deutschsprachigen Webentwicklern durch sein CSS-Framework YAML bekannt sein. Seit heute gibt es eine öffentliche Alpha-Version seines neuen Projektes mit dem Namen Thinkin’ Tags: Es handelt sich hierbei um einen visuellen Editor zur Erstellung von Website-Prototypen. Bereits jetzt werden YAML und Blueprint.CSS unterstützt. Unterstützung für weitere CSS-Frameworks, wie zum Beispiel Twitter … Weiter …

Interessanter Vortrag zur Ladezeitoptimierung und jede Menge nützlicher HTML5- und CSS3-Links

von

Christian Schaefer hat einen interessanten Vortrag zum Thema Ladezeit-Optimierung von Websites online gestellt. Die Folien beinhalten viele wertvolle Informationen und hebt sich damit angenehm von vielen anderen Präsentationen. Kollege Jens Grochtdreis, von dem ich auch den Hinweis auf den oberen Vortrag bekommen habe, hat in einem Blogartikel 24 Quellen zu HTML5 und CSS3 aufgelistet: Referenzen, … Weiter …

Chico UI: komfortabel Funktionen für Websites nachrüsten

von

Chico UI ist eine Sammlung von Tools um recht einfach Funktionen für eine Website nachzurüsten. Du brauchst eine Dropdown-, Akkorden- oder Tab-Navigation? Dann findet du bei Chico UI erprobte Lösungen. Neben diesen Funktionen findest du hier auch u.a. einen Bilder-Slider, einen Kalender-Widget und eine CSS-Bibliothek. Bei der CSS-Bibliothek sind die gängigen HTML-Elemente gestylt, es sind … Weiter …

CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float

von

Hier wieder mal ein paar interessante CSS-Links, die sich in miner Browser-Session angesammelt haben:

Björn Wibben liefert eine Lösung, wie man es schaffen kann das der Sende-Button eines Formulars in allen Browsern einheitlich zu gestalten. Lösung für ein sehr nerviges Problem.

Das Spritepad bietet eine sehr einfache Möglichkeit CSS-Sprites zu erstellen: einfach per Klicken und Ziehen die einzelnen Grafiken anordnen und anschließend den CSS-Code kopieren. Unter einem CSS-Sprite versteht man wenn mehrere Grafiken zu einer großen zusammengesetzt werden.

Weiter …