Florence Maurice

Webthemen

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 "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.

Weiterlesen ...

Halb feststehende Bereiche mit position: sticky

Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben - und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit `position: fixed` positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.

Weiterlesen ...

CSS-Quicktipp: Hintergrundbilder genau zwei Mal wiederholen

Element mit zwei Kreisen (Hintergrundbilder)

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?"

Weiterlesen ...

Ausschneiden mit CSS3 - clip-path

sternförmig ausgeschnittenes Bild

Bilder im Web sind im Prinzip eckig ... das ändert sich glücklicherweise mit dem CSS-Masking-Module.

Das CSS Masking Module Level 1 ist am 26. August 2014 in den Status einer Candidate Recommendation erhoben worden - und das W3C fordert zu Implementierungen auf. Der richtige Zeitpunkt, das einmal genauer unter die Lupe zu nehmen ...

Weiterlesen ...

CSS3: Hintergrundbilder skalieren - so geht's

Bei manchen CSS3-Eigenschaften kann man sich fragen, ob sie sinnvoll sind oder nicht.

Das Skalieren von Hintergrundbildern über background-size ist aber eindeutig ungeheuer praktisch. Wie es geht und welche Optionen zur Verfügung stehen, zeige ich in einem kleinen Video.

Weiterlesen ...

CSS3-Farbverläufe mit background-image oder background?

Soll man für CSS3-Farbverläufe die Eigenschaft `background-image` oder `background` verwenden? Es funktioniert prinzipiell beides:

Weiterlesen ...

CSS-Quicktipp: Tabs in HTML

email: XX und Telefon: XX. Email und Telefon sind untereinander und nach einem Abstand die E-Mail-Adresse und die Telefonnummer

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 ...