Responsive iframes und YouTube-Videos

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 …

WordPress-Code

WordPress: nicht-responsive Bildunterschriften reparieren

Mir ist in den letzten Wochen aufgefallen, dass bei ein paar Themes, die ich getestet habe, die Ausgabe der Bilder mit Bildunterschriften (Captions) nicht responsiv waren, auch wenn das Theme an sich responsiv war. Im einfachen deutsch gesagt: alles hat sich dem Bildschirm des Ausgabegeräts angepasst, nur die Bilder mit den Unterschriften nicht.

Das liegt daran, dass die Bildunterschriften standardmäßig mit einem Inline-Style bezüglich der Breite versehen sind, wie man in der folgenden Abbildung sehen kann:

WordPress: Captions mit fester Breite

Weiter …

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

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 …

CSS-Datei mit Dust-Me Selectors entrümpeln

Bastelt man häufiger an seiner Website, was so die allermeisten Webworker tun, dann hat man recht schnell Regeln in der CSS-Datei, die nicht mehr benötigt werden. Es ist nicht einfach über Jahre gewachsene Struktur im Auge zu behalten.

Das braucht eiserne Disziplin und eine perfekte Organisation … und Hand aufs Herz, diese beiden Eigenschaften im Paket haben die wenigsten von uns, wenn es sich um die eigenen Projekte handelt. Etwas was man bei Kundenprojekten nicht durchgehen lässt, winkt bei eigenen Projekten häufiger durch.

Solltest du in der CSS-Datei auf Regeln stoßen, wo du dir nicht sicher bist ob die noch wirklich benötigt werden, dann könnte dir hierbei die Firefox-Erweiterung Dust-Me Selectors helfen.

Die URL der Website eingeben

Einfach die URL der Website oder der XML-Sitemap eingeben und das Addon durchsucht die Website und gibt nach ein paar Minuten das Ergebnis aus:

Weiter …

CSS: neue Methode um Text zu verbergen

Seit vielen Jahren nutzen Webworker diverse Methoden um per CSS Text oder Überschriften zu verbergen, zum Beispiel bei grafischen Überschriften oder vor allem, wie hier auf perun.net, auf das Logo zu verlinken, aber den eigentlichen Text der zum Logo gehört zu Seite zu schieben. Eine sehr bekannte und dabei auch zugängliche Methode ist es mit … Weiter …

CSS3: horizontale und vertikale Navigation mit :target

Ich habe heute ein Beispiel erwähnt, wo man lediglich mit CSS3 und :target eine recht einfache, aber dennoch ansehnliche Bilder-Galerie erstellen kann. Auf Sitepoint habe ich noch zwei weitere interessante Beispiele mit :target entdeckt. Beim ersten Beispiel wurde eine horizontale Tab-Navigation umgesetzt: Da ganze funktioniert (siehe Demo) in Firefox, Chrome, Safari, Opera und dem Internet … Weiter …

Einfache Bilder-Galerie nur mit CSS3 und :target

Chris Heilmann stellt auf Mozilla Hacks einen sehr interessanten Ansatz vor, um nur mit CSS eine Bilder-Galerie zu realisieren, wo bei Klick auf ein Button das entsprechende Bild erscheint. Das ganze basiert auf der Pseudo-Klasse :target. Die transition-Deklaration ist optional, damit das ganze etwas geschmeidiger wirkt.

CSS: automatische Nummerierung von Überschriften

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:

Weiter …

CSS: jede Unterseite auf 100% Höhe

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%; 
}
#container {
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
}

Gefunden auf CSS Div height: 100%.

Weiter …

CSS3: Art, Stil und Farbe des Unterstrichs beeinflussen

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.

Weiter …

CSS3: Schriftgrößen mit rem angeben

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.

Weiter …

Linkschleuder 22: WordPress, CSS3, Schriften

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