Es gibt etliche mehr oder weniger aufwändige Möglichkeiten für die optimale Darstellung eines Menüs auf dem mobilen Gerät. Hier eine simple Lösung, die eine select Box generiert.
Weiterlesen
Archiv der Kategorie: CSS
Bootstrap CSS Angaben für Tabellen, Formulare, Buttons
Bootstrap kommt bekanntlich mit einer Fülle von CSS Formatierungen daher, die man sich – relativ mühsam – auf der „Customize“ Seite (http://getbootstrap.com/customize/) für die eigenen Zwecke anpassen kann. Möchte man Formatierungen, z.B. die für Tabellen, Formulare und Buttons für ein Projekt verwenden, ohne das komplette Bootstrap zu verwenden so muss man sich die entsprechenden Angaben – noch mühsamer – zusammen suchen.
Weiterlesen
Ausklappmenü mit Verzögerung
Sich einblendende Untermenüs beim Bewegen der Maus über den jeweiligen Hauptmenüpunkt sind heutzutage üblich. Man kann das sehr einfach per CSS realisieren. Nervig wird es aber, wenn das Menü so platziert ist, dass immer wieder unbeabsichtigt das Ausklappmenü erscheint, obwohl man mit der Maus ganz wo anders hin will. Hier hilft es, einen Verzögerungseffekt einzubinden z.B. mit jQuery. Weiterlesen
CSS ordered list: verschachtelte Listen mit Nummerierung
Eine nummerierte Liste („ordered list“) in HTML zu erstellen ist bekanntlich nicht schwer (<ol>). Wenn man eine Unterebene benötigt, so beginnt die Zählung wieder bei 1. Hier eine Lösung, mit der die untergeordneten Listeneinträge die Ziffer der übergeordneten Seite voran stellen. Weiterlesen
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