Archiv

display: contents bei Gridlayout & Flexbox

Eines haben Gridlayout und Flexbox gemeinsam: Wenn man die Grid/Flexbox-Darstellung aktiviert, so lassen sich dann nur die echten Kindelemente anordnen, aber keine weiteren Nachkommen. Das diktiert einem aber auch eine entsprechende Struktur und manchmal passt es nicht … Abhilfe bietet die Eigenschaft display: contents.

Weiterlesen

Reihenfolge von Elementen mit transform umkehren

Umgekehrte Reihenfolge

Manchmal möchte man die Reihenfolge bei der Anzeige von Elementen abändern. Dafür gibt es mehrere Möglichkeiten – und ganz raffiniert fand ich, dass man dafür auch transform nutzen kann. transform ist praktisch, wenn man die Reihenfolge der Elemente exakt umkehren möchte, so dass das Element, das im Quellcode zuletzt steht, am Anfang angezeigt wird etc.

Aber zuerst zu anderen Möglichkeiten:

  • Flexbox erlaubt die Anpassung der Reihenfolge natürlich von Haus aus. Dafür kann man die Eigenschaft order nutzen und damit die Elemente in beliebiger Reihenfolge anzeigen lassen.
  • Für Gridlayout ist das ein Kinderspiel (da kann man die Reihenfolge der Elemente im Raster genauestens festlegen – ein Beispiel für eine Umsetzung eines Layouts mit Gridlayout zeige ich bei den Webkrauts).
  • Erstaunlicherweise kann man dafür auf display: table & Konsorten zurückgreifen.

Und auch transform kann man zur Umkehrung der Reihenfolge nutzen. Und zwar so:

Weiterlesen

Videotraining: Formulare erstellen und gestalten

Videotraining: Formulare mit HTML und CSSGerade ist mein neues  Videotraining zum Thema Formulare bei video2brain erschienen. Dabei geht es um die Basics der Formularerstellung per HTML, um Neuerungen aus HTML5 und schließlich um die Gestaltung von Formularen.
Weiterlesen

CSS: Fehler in Eigenschaften aufspüren

Schnell hat man sich bei einer CSS-Eigenschaft vertippt. Um derartige Fehler aufzuspüren, hilft es schon einmal einen passenden Editor zu verwenden. Ansonsten lassen sich solche Fehler gut im Google Chrome entdecken. Wie das geht, aber auch wann scheinbare Fehler keine Fehler sind, zeige ich in einem Video. Das Video ist ein Ausschnitt aus meinem video2brain-Videotraining CSS debuggen.
Weiterlesen

Videotraining CSS debuggen

Videotraining CSS debuggen

Das Grundprinzip von CSS ist ja eigentlich ganz einfach – aber trotzdem machen Stylesheets oft nicht das, was sie machen sollten. In meinem neuen Videotraining zeige ich, wie man Code untersucht und Fehler aufspürt.

CSS debuggen – video2brain Online-Videotraining

Laufzeit: 1 Std. 32 min
Einzeltraining: € 29,95
oder alle Trainings im Abonnement: ab € 19,95

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

Quicktipp: Hoverzustand in Entwicklertools untersuchen

Hover

Wenn man die Formatierungen, d.h. den CSS-Code, von Websites untersucht, möchte man oft auch den Hoverzustand von Links genauer betrachten. Auch das ist bei den gängigen Browser-Entwicklertools möglich. Die entsprechenden Optionen versteckt sich aber an unterschiedlichen Stellen.

Weiterlesen

Browserhandling in Compass 1.0

Compass

Was mich häufig am Code, den CSS-Präprozessoren erzeugen, gestört hat, ist die große Anzahl an browserspezifischen Präfixen, die man so heute nicht mehr braucht. Nehmen wir einmal an, man ändert nichts an den Standardeinstellungen und benutzt das Compass-Mixin (von Compass vor Version 1) für border-radius:

@import "compass/css3";
.beispiel {
@include border-radius(25px);
}

… so erhält man das folgende Ergebnis:

.beispiel {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}

Ganz schön viel Code. Dabei gab es nie einen Browser, der -o-border-radius oder -ms-border-radius verstanden hätte, da der Internet Explorer und Opera direkt die Eigenschaft border-radius implementiert haben. Weiterlesen