Wie geht das?
Die Linie hinter dem Text in diesem Beispiel ist gemeint.
Das hab ich mich auch schon einige Male gefragt. Und zu meiner Verwunderung gibt es schon viele gute Ansätze zu dem Thema, wie man eine Linie vertikal hinter einem Text zentriert und dabei noch Abstand zum Text halten kann. Nachfolgend will ich euch eine Variante vorstellen, die auch auf kunterbuntem Hintergrund funktioniert.
Hallo!
HTML5 in progress
Nach langer Pause melde ich mich mal wieder zurück. Ja, mir gehts gut, ich war nur ziemlich abgelenkt und hatte daher wenig Lust zu Schreiben.
Jedenfalls dachte ich, wir sollten mal einen Blick auf ein neues HTML5 Form Element werfen: Das progress Element. Wie der Name schon sagt, kann man damit einen Fortschritt abbilden, meistens im Zusammenhang mit einem Formular. Dabei ist das geläufigste Beispiel ein Checkout in einem Internet-Shop, bei dem in der Regel mehrere Schritte nötig sind, bis die Ware verschickt wird.
Manchmal ist die Lösung so banal..
Problem?
Dass der IE6 manchmal ein übler Troll sein kann und sein Nachfolger IE7 ihm in dieser Hinsicht in nichts nachsteht, brauch ich euch ja wohl kaum erzählen (ich habs jetzt natürlich trotzdem gemacht, einfach um ein cooles Intro zu haben 
). Jedenfalls bin ich neulich erst auf einen richtig schönen Fix für ein bekanntes Problem bezüglich der Darstellung von Buttons im IE gestoßen.
Kennt ihr das: Ihr habt einen Button oder ein Submit-Input und gebt dem etwas Padding und schon zerschießt es euch im IE das halbe Formular, weil dieser Browser denkt, er müsse den Dicken markieren, indem er den Padding-Wert verdoppelt?
Schönen guten Abend!
Ein weiterer Tag, ein weiteres Türchen, eigentlich wollte ich mittlerweile mal etwas aufgeholt haben aber irgendwie kommt immer was dazwischen. Aber na gut, kommen wir also zu #14: text-indent. Mit dieser Eigenschaft können wir die erste Zeile eines beliebigen Textblocks manipulieren.
Schönen guten Abend!
Auch an diesem wundervollen Abend gilt es einmal mehr ein Türchen im Adventskalender zu öffenbaren, diesmal verbirgt sich dahiner.. cursor! Mit dieser tollen Eigenschaft ist es uns möglich, das Bild des Mauszeigers zu ändern, wenn dieser über bestimmte Elemente unserer Webseite fährt bzw. ruht.
Das Dutzend ist voll – Bergfest!
Wenn wir nun einmal mit Tables angefangen haben, machen wir doch gleich damit weiter. Noch eine Eigenschaft, die es nur für Tables gibt, ist caption-side. Sie ist fest an das caption-Tag gebunden und setzt logischer Weise voraus, dass ihr solches auch benutzt. Die Eigenschaft gibt dabei an, auf welcher Seite der Tabelle der Titel ausgegeben werden soll.
Und weiter geht’s..
Manchmal werden sie einfach noch gebraucht, auch wenn man sie eigentlich überhaupt nicht leiden kann.. die Rede ist nicht von Frauen sondern natürlich von Tables. Im Zusammenhang mit Tables gibt es einiges zu wissen und kennen zu lernen. Neben den ganzen Elementen und Hierarchien, die man damit aufbauen kann, gibt es auch eine ganze Reihe von CSS Eigenschaften, die speziell Tables beeinflussen. Eine davon, nämlich empty-cells, stelle ich euch heute vor.
Stichwort: CSS