Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.
Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.
In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.
Beitrag zu Ende lesen
Die Gestaltung von Bildunterschriften kann mitunter lästig werden. Es ist schwierig zu entscheiden ob der Text zentriert oder linksbündig unter dem Bild angezeigt werden soll, da die Textmenge oft stark variiert. Zentrierte Bildunterschriften sehen bei kurzen Texten gut aus. Linksbündig passt besser wenn die Bildunterschrift mehrere Zeilen umfasst. Was also tun?
In diesem Beitrag findet ihr ein CSS-Snippet, dass automatisch dafür sorgt, dass kurze Bildunterschriften zentriert werden, und mehrzeilige Bildunterschriften linksbündig ausgerichtet werden.
Beitrag zu Ende lesen
Mit CSS lassen sich Hintergrund-Grafiken einbinden und positionieren. Welche Möglichkeiten man bei der Positionierung dieser Grafiken hat, wollen wir euch in diesem Artikel zeigen. Dabei gehen wir neben der CSS-Eigenschaft background-position auch auf die Eigenschaften background-clip und background-origin ein und zeigen euch anhand von Beispielen ihre Auswirkungen auf die Hintergrundgrafik. Beitrag zu Ende lesen
Die CSS-Eigenschaft »float« ist essentiell um die Position von Elementen auf einer Website zu steuern. Die Funktionsweise ist eigentlich nicht kompliziert, doch es können Probleme beim »Floaten« von Elementen auftreten die gerade für Anfänger nicht nachvollziehbar sind. In diesem Artikel beschreiben wir daher sowohl die grundsätzliche Handhabung als auch die Probleme. Anhand verschiedener Beispiele zeigen wir euch wie Floats kontrolliert eingesetzt werden können.
Beitrag zu Ende lesen
Jeder Webdesigner sollte wissen, wie Elemente auf einer Website gezielt positioniert werden können. Neben der Floating-Technik und modernen CSS-Layoutmodellen wie Flexbox oder dem Grid Layout Module spielt hier die CSS-Eigenschaft position eine entscheidende Rolle. In diesem Beitrag erklären wir die verschiedenen Werte der position-Eigenschaft anhand leicht nachvollziehbarer Beispiele.
Beitrag zu Ende lesen