Alle Beiträge zum Thema "CSS"

3. Februar 2024

So erstellst du HTML-E-Mail-Signaturen für Outlook, die überall gleich aussehen

Eine E-Mail-Signatur für Outlook zu erstellen ist verrückterweise eine echte Herausforderung. Egal ob in Word oder Outlook, ob auf Mac oder Windows, die Signatur sieht immer überall anders aus. Im schlimmsten Falle sind Logos auch noch verzerrt und Links blau unterstrichen. Mit diesen Tipps sollte es dir gelingen eine Signatur zu erstellen, die in den […]

30. Dezember 2023

Bootstrap-Layout Text und Bild 50/50

Ein beliebtes Gestaltungselement auf Websites ist die Kombination aus Text und Bild, wobei das Bild die Hälfte der Bildschirmbreite einnehmen soll, der Text aber wiederum innerhalb des Containers bleiben soll. Demo: www.fbnfrtg.de/demo/text-und-bild-50-50.html Hier ist das perfekte Snippet für diesen Zweck: Mobil werden die Elemente gestapelt, wobei das Bild immer vor dem Text dargestellt wird, unabhängig […]

30. Dezember 2023

CSS 100vw und das Problem mit der Scrollbar

Die Einheit „vw“ („Viewport Width“) ist sehr praktisch, wenn man ein Element mit CSS bildschirmfüllend darstellen möchte. Das Problem hierbei ist, dass die Scrollbars im Browser, je nach Einstellung und Betriebssystem, automatisch ein- und ausgelblendet werden oder die ganze Zeit sichtbar sind. Dieser Umstand ist im dynamischen Wert „vw“ leider nicht berücksichtigt. Und so kommt […]

27. Dezember 2023

So kannst du das Laden von gecachtem JavaScript und CSS verhindern

Dass JavaScript und CSS-Dateien nach einer Änderung im Browser nicht neu geladen, sondern aus dem Cache geladen werden, kann eine nervige Angelegenheit sein. Insbesondere auch auf dem iPhone, auf dem kein „Hard Refresh“ möglich ist. Um den Browser anzuweisen, immer die aktuelle JS uns CSS vom Server zu laden, reicht es einen sich ändernden Parameter […]

15. Dezember 2023

WordPress Seitenzahlen

Mit „the_posts_pagination()“ gibt WordPress eine praktische Funktion an die Hand, die die Erstellung von Seitenzahlen erheblich vereinfacht: Um Custom Posts mit Paginierung auszugeben, kannst du folgenden Code nutzen: Folgende Styles sind eine gute Basis für die Gestaltung der Paginierung.

14. Dezember 2023

Text-Fade-in-Effekt mit CSS und JavaScript

Mit folgendem Snippet lässt sich ein subtiler, schicker Text-Eingangs-Effekt erzielen, der sich insbesondere für große Headlines eignet. Lorem ipsum dolor sit amet constructor Noch mal

14. Dezember 2023

Wie lernt man Websites zu programmieren? – Tipps für angehende Webentwickler.

Ich werde ja häufiger mal von Azubis und Praktikanten gefragt: „Wie lernt man eigentlich Websites zu programmieren?“ Als überzeugter Autodidakt fällt es mir nicht immer leicht diese Frage zu beantworten. Ich habe damals tatsächlich mit einem WYSIWYG-Editor angefangen. Dadurch, dass ich mir den Code und die Änderungen im Code immer wieder angeschaut habe, habe ich […]

15. November 2023

Responsive, quadratische divs mit CSS

Mit der CSS-Eigenschaft „aspect-ratio“ kannst die Höhe von divs (und anderen Elementen) responsive anpassen ohne die Breite zu kennen. Das ist z.B. sehr praktisch, wenn die Breite eines divs in Prozent definiert ist. Natürlich können auch andere Seitenverhältnisse angegeben werden. Wenn die divs nur halb so hoch sein sollen, kann man folgendes CSS nutzen:

12. November 2023

So kannst du Logos auf einer Website gleichmäßig darstellen

Endlich habe ich die ultimative Lösung gefunden um Logos auf einer Website darzustellen. Viele Jahre habe ich mit „float“, „margin“, Spacern & Background-Images gearbeitet und das Ergebnis war nicht immer zufriedenstellend. Die CSS-Eigenschaften „display: grid“, „gap“ & „aspect-ratio“ sind hier echte Game-Changer. Mit folgendem Code kannst verschiedenste Logo – egal hoch Hoch oder Querformat – […]

24. Oktober 2023

Multilevel-CSS-only-Dropdown-Navigation

Mit folgendem Stylesheet lässt sich eine Navigation mit mehreren Unterebenen darstellen, die sehr gut an das eigene Design adaptierbar ist: Der dazugehörige HTML-Code besteht aus einer einfachen verschachtelten Liste: Hier gehts zur Demo: Multilevel CSS-Navigation Die mobile Darstellung der Navigation stelle ich meistens in einem separatem div dar. Dazu lade ich das Menü mit jQuery […]