Da es sich bei einem <img> um ein Inline-Element handelt, lässt sich dieses in CSS horizontal mit text-align und vertikal mit vertical-align ausrichten. Eine Zentrierung innerhalb eines Blockelementes könnte also folgendermaßen ausschauen: (mehr …)
Die WordPress-Admin-Bar, welche am oberen Ende einer Website erscheint, sobald man als Admin eingeloggt ist, kann mitunter auch deren Layout in Mitleidenschaft ziehen. Dies kann u.a. der Fall sein, wenn ein Inhalts-Container eine Mindesthöhe von 100% des Viewports einnimmt, um z.B. mit solch einer CSS-Anweisung auch bei wenig Inhalt eine Hintergrundfarbe bis zum unteren Rand anzuzeigen: (mehr …)
Auf der Website Can I use… kann man sich zu unterschiedlichen HTML-, CSS- und JavaScript-Eigenschaften die Unterstützung von verbreiteten Browsern anzeigen lassen. Für Webprogrammierer eine sehr gute Hilfe bei der Frage, welche neuen Features man denn schon einsetzen kann. In der Standardseinstellung zeigt Can I use… zur besseren Übersicht nur die Browser-Versionen an, die weltweit einen Marktanteil von mindestens 0,5% haben. (mehr …)
Manchmal kann es sinnvoll sein, einen Textabschnitt nur bei einer bestimmten Bildschirmbreite oder -höhe mit einem Link zu versehen. Wenn beispielsweise in der mobilen Ansicht ein Kontaktformular erst durch Scrollen sichtbar wird, kann man in einer Textbox im oberen, sichtbaren Bereich die Wörter „Kontakt aufnehmen“ in einen Link einbetten, der zu dieser Stelle springt.
<a href="#contact">Kontakt aufnehmen</a>
Möchte man eine Seite von der Höhe so aufteilen, dass der Header eine feste Höhe aufweist und der Hauptteil den Rest einnimmt, also genau bis zum unteren Rand des Viewports reicht, so hat man in CSS3 zwei relativ einfache Möglichkeiten dies zu realisieren: entweder mithilfe von calc() oder mithilfe von box-sizing. (mehr …)
Nachdem Microsoft Anfang des Jahres den Support für eine Reihe älterer Versionen des Internet Explorers eingestellt hat, und man infolgedessen diese selbst auch nicht mehr berücksichtigen muss, ist in mancher Hinsicht das Coden von Webseiten einfacher geworden. Ein Beispiel hierfür ist das Erstellen von halbtransparenten Overlays. (mehr …)
Version 46 von Firefox bringt für Linux-Nutzer eine GTK3-Integration. Dies macht sich nicht nur in dem geänderten Design der Benutzeroberfläche bemerkbar, auch nicht gestylte Formular-Elemente innerhalb von Webseiten werden mitunter anders angezeigt als vorher. Wenn Webseitenersteller mittels CSS hier keine Vorgaben machen, richtet sich das Aussehen der Formularelemente nämlich nach dem Theme des Browsers / des Betriebssystems. (mehr …)
In die neuere Versionen von Chrome bzw. Chromium (Version 46.0.2490.71) hat sich wohl ein Bug eingeschlichen, der dafür sorgt, dass ein mit „background-attachment: fixed“ definiertes Hintergrundbild innerhalb eines Containers mit der Eigenschaft „overflow: auto“ beim Scrollen des Containers nicht mehr feststeht, sondern in die entgegengesetzte Richtung gescrollt wird. (mehr …)