Kategorie-Archiv: CSS

TYPO3 Spalten und „responsive Design“

Man nehme ein CSS Framework, z.B. „Skeleton“. In die entsprechenden div Container setzt man die erforderlichen Marker. Soweit kein Problem. Interessant wird es, wenn man im Inhaltsbereich je nach redaktioneller Lust und Laune eine oder zwei Spalten hat und diese sich in das floatende Layout einpassen sollen. Weiterlesen

 

Footer, der per Klick nach oben scrollt

Genaugenommen scrollt nicht der Footer nach oben, sondern der Body nach unten. Der Effekt ist jedenfalls hübsch: am unteren Browserfenster klebt ein Link, eine „Footerlippe“, die bei Klick den Footer ins Bild schiebt. Weiterlesen

 

Vertikales Zentrieren in HTML Blockelementen
vertical-align:middle

Wer sich mit dem Positionieren von HTML Elementen mit Hilfe von CSS beschäftigt, stößt früher oder später auf das Phänomen, dass in Block-Elementen (div, h1, h2, p, etc) zwar horizonal, nicht aber vertikal zentriert werden kann. Die Angabe vertical-align:middle funktioniert nämlich nur in Inline-Elementen; vorzugsweise kommt sie in Tabellenzellen zum Einsatz.
Weiterlesen

 

Bildunterschrift bei Mouseover einblenden und jQuery cycle für „csc-textpic“

Die Anforderung: Bilder sollen bei Mouseover den jeweiligen Text anzeigen, der als Bildunterschrift in einen TYPO3 Datensatz gepflegt wird. Per CSS wird der Text über das Bild gelegt. Verlässt die Maus das Bild, soll der Text natürlich wieder verschwinden.
Weiterlesen

 

Relaunch mit „Responsive Webdesign“

Für den Relaunch der Website meiner langjährigen Kundin Prof. Dr. Gabriele Diewald habe ich ein Template verwendet, dass je nach Größe des Bildschirms unterschiedliche Stylesheet Angaben verwendet, so genanntes „Responsive Webdesign“. Weiterlesen

 

Fonts einbinden

Will man Fonts, die nicht auf dem Rechner des Besuchers einer Website vorhanden sind, auf der Website verwenden, greift man in letzter Zeit (wieder) auf die CSS Angabe @font-face zurück. Um diese Technik verwenden zu können, muss die Schriftart zunächst in ein geeignetes Format konvertiert und auf dem Server abgelegt werden. Firefox und Chrome können mit dem zukunftsweisenden Format „WOFF“ umgehen. Um den Internet Explorer (< Version 9) zu bedienen hält man zusätzlich eine Fontdatei im Format „eot“ vor, für den Opera und Safari das Format „svg“. Weiterlesen

 

Hintergrundbilder, die das gesamte Browserfester ausfüllen

Hier geht es um Lösungen ohne Einsatz von JavaScript. Zunächst bindet man das Hintergrundbild per CSS in die Seite ein:

background: url(bg.jpg) no-repeat center center fixed;

Dadurch wird das Bild in allem Browsern (einschl. IE6) als feststehender mittig zentrierter Hintergrund eingebunden. Wenn man davon ausgeht, dass ein Browserfenster in der Regel nicht größer als 1900 x 1200 px ist, ist man auf der sicheren Seite, wenn man das Bild in den entsprechenden Maßen zur Verfügung stellt. Ist das Fenster kleiner, ist nur ein Ausschnitt des Bildes zu sehen. Dieser Absatz funktioniert in allen Browsern. Das im Beispiel verwendete Bild ist 1920 x 1200 pixel groß: Weiterlesen