Weblogeintrag vom 10. June 2005

Friday, 2005-06-10 14:57

Ich habe eine Aufgabe für HTML- und Stylesheet-Bastler: Nehmt meine mehrzeiligen CSS-Tabs und ergänzt die fehlende Linie am unteren Rand der grauen Karteikartenreiter. Wichtig: Der aktive Reiter soll weiterhin mit dem weißen Inhaltsblock verschmelzen und die Tabs sollen auch funktionieren, wenn sie in einem sehr schmalen Browserfenster auf mehrere Zeilen umbrechen.

So wie oben sieht es jetzt aus, so wie unten soll es dargestellt werden.

2005-06-10 21:11: ich schau es mir mal in Ruhe an ...

nur ein kleiner Tip: versuche Umbrüche zu verhindern. Es sieht nicht schön aus, wenn innerhalb einer Registerkarte ein Umbruch entsteht!; René
2005-06-12 12:17: Genau darum geht es doch: Ich kann den Umbruch nicht verhindern, wenn es zu viele Registerkarten sind. Das katastrophale Verhalten von Windows (die Zeile mit der aktiven Registerkarte ändert ihre Position) steht übrigens nicht zur Debatte.; Thiemo
2005-06-12 22:57: ich meinte den Effekt, wenn innerhalb einer Registrierkarte ein Umbruch geschieht ... z.B. zwischen `Demo´ und der `4´; René
2005-06-14 15:55: Du hast ja bereits im Source auf zwei Linien verwiesen, die es betreffen soll. Versuch doch mal über border-bottom in "#menu li a" etwas zu machen. Für selected eben den helleren Wert. Den äußerst üblen Umbruch innerhalb des "Demo 4" Karteireiters kann man mittels   umgehen. Also anstatt "Demo 4" im Quellcode einfach "Demo 4" eintragen.

Gruss,; Danny Trommer
2005-06-14 16:56: Eigentlich ist white-space:nowrap dafür gedacht, aber das verursacht hässliche Bugs in IE 6, egal an welcher Stelle man es einsetzt.   ist semantisch nicht so hübsch, funktioniert aber. Mein Problem mit der Linie ist aber immer noch nicht gelöst (das angedeutete border-bottom würde hinter dem Inhaltsblock verschwinden, brachte mich aber auf eine <a=code/css/wrapping-css-tabs-2.html>Idee</a>).; Thiemo
2005-06-15 16:47: Nachtrag: Durch Hinzufügen eines leeren div-Elements habe ich versuchsweise eine Linie hinzugefügt, die ich mittels z-index eigenständig positionieren konnte (Reihenfolge: inaktive Reiter, Linie, aktiver Reiter, weißer Inhaltsblock). Dummerweise hat das einen neuen Nachteil: Der aktive Reiter verdeckt alle anderen - kleine Reiter verschwinden ganz und sind nicht mehr anklickbar.

Das Gewünschte funktioniert nur, wenn jeder Reiter seine eigene Abschluss-Linie mitbringt. Das wiederum geht nur, wenn der Reiter "seine Höhe kennt". Dazu muss man entweder absichtlich einen Zeilenumbruch setzen und die Zeilen getrennt formatieren oder mit JavaScript hantieren.

Außerdem wäre es schöner, wenn der Zeilenumbruch "nach oben" passieren würde, also der kurze Zeilenrest nach oben statt nach unten rutscht. So oder so: Karteikarten sind ein grässliches Interface-Element.; Thiemo

Kommentare zu diesem Beitrag können per E-Mail an den Autor gesandt werden.

Thiemos Archiv