Archiv

shrink-to-fit=no Ergänzung bei der viewport-Meta-Angabe

Bei einer Schulung zum Thema Responsive Webdesign bin ich über die folgende Viewport-Angabe gestolpert:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Neu war mir der Zusatz shrink-to-fit=no

Weiterlesen

Quicktipp: Gruppe von Radiobuttons beschriften

Für Beschriftungen von Formularfeldern ist das label-Element gedacht:

<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>

Damit der Bezug zwischen label und input-Element klappt, muss der Wert des for-Attributs des label-Elements mit dem Wert der id des input-Elements übereinstimmen (im Beispiel oben „rot“).

Was nimmt man aber für die Beschriftung einer Gruppe von Radiobuttons? Weiterlesen

CSS-Quicktipp: Tippfehler bei Selektoren finden

Wenn eine Formatierung nicht bei einem Element ankommt, so kann das die unterschiedlichsten Ursachen haben. Zuerst sollte man immer in die Entwicklertools kontrollieren, ob dort die CSS-Deklarationen irgendwie beim Element auftauchen. Dafür ruft man die Entwicklertools auf (Klick mit rechter Maustaste und „Element untersuchen“ oder Ähnlich). Dann wählt man das Element im HTML-Teil links aus und kontrolliert die CSS-Regeln im rechten Bereich. Wenn die Angaben überhaupt nicht vorkommen, bedeutet das, dass es entweder einen Tippfehler beim Selektor gibt oder – bei zusammengesetzte Selektoren – dass die Verschachtelung nicht stimmt.

Eine sehr rasche Möglichkeit, solche Probleme zu finden, besteht darin, sich die im Dokument nicht benutzten Selektoren anzeigen zu lassen.

Weiterlesen

CSS-Quicktipp: Hintergrundbilder genau zwei Mal wiederholen

Hintergrundbild genau zwei Mal wiederholen

CSS3 bietet ja schöne neue Möglichkeiten für Hintergrundbilder – bei der Wiederholung kann man beispielsweise dafür sorgen, dass Hintergrundbilder nie abgeschnitten werden. Wenn ich in meinen CSS-Kursen vorstelle, wie man mit Hintergrundbildern arbeitet, werde ich recht oft gefragt: „Und kann man auch angeben, dass ein Hintergrundbild nur zwei Mal oder drei Mal wiederholt wird? Also die exakte Anzahl festlegen?“ Nein, so etwas wie repeat-2x (2 x auf der x-Achse) oder repeat-3y (3 mal auf der y-Achse, d.h. untereinander), gibt es leider nicht. Nicht im Level 3 der W3C-Spezifikation und auch beim Entwurf der nächsten Version des backgrounds-and-borders-Moduls habe ich es nicht gefunden.

Aber natürlich lässt sich so etwas dank mehrfacher Hintergrundbilder leicht umsetzen.

Weiterlesen

CSS-Quicktipp: Tabs in HTML

Tabs in HTML

Im Textverarbeitungsprogramm Word erreicht man durch Tabs, dass einzelne Textteile untereinander stehen. Gerade hatte ich ein ähnliches Problem bei einer Webseite: Auf einer Webseite gab es die Texte „E-Mail: emailadresse@example.com“  und darunter „Telefon: 012-3456789“;  wobei die Telefonnummer und die E-Mail-Adresse exakt untereinander stehen sollten. In Word ist das ein klassischer Fall für Tabs, in HTML gibts es allerdings so etwas wie Tabs nicht. Wie lässt sich trotzdem die gewünschte Darstellung erreichen? Wenn man mehrere solcher Zuordnungen hat, dann ist das ein klarer Fall für eine Tabelle – aber nur für zwei Zeilen schien mir das zu aufwändig. Weiterlesen