Probleme mit Border und Opacity

[bleumi85]

Hallo liebes Forum,

ich hab versucht mir eine Art-Tabdarstellung zu bauen, was mir auch gelungen ist. Ich hab das ganze jetzt mal kurz hier nachgebaut.

Da ich will, dass mein Hintergrund durchschimmert hab ich das ganze jetzt so gebaut wie im Beispiel zu sehen. Mein Problem ist jetzt, dass die Border vom Container bei den Tabs am unteren Rand zu sehen ist. Hat jemand einen Tipp für mich wie ich das behoben bekomme?

Danke schon mal im voraus.

[Gunnar Bittersmann]

@@bleumi85

ich hab versucht mir eine Art-Tabdarstellung zu bauen, was mir auch gelungen ist.

Nicht wirklich. div sind keine interaktiven Elemente; es ist unsinnig, sie zu welchen zu machen. Zum Umschalten zwischen Tabs brauchst du aber interaktive Elemente (die auch per Tastatursteuerung zu erreichen sind); a-Elemente bieten sich an.

Guckst du Simple ARIA tab interface in Heydon Pickerings Practical ARIA Examples.

Ich hab das ganze jetzt mal kurz hier nachgebaut.

JSFiddle ist für CSS nur mäßig geeignet.

Mein Problem ist jetzt, dass die Border vom Container bei den Tabs am unteren Rand zu sehen ist. Hat jemand einen Tipp für mich wie ich das behoben bekomme?

Den Rand nur dort erzeugen, wo er sein soll: CodePen.

LLAP 🖖

[bleumi85]

Hallo,

Danke für die schnelle Antwort. Leider bringt sie mich mich exakt gar nicht weiter. Dass die divs ungeeignet sind ist mir auch klar. Ich hab da mit Buttons gearbeitet, es ging mir nur um die Veranschaulichung. Mir ist klar wie ich eine border-bottom ausblende, wenn ich ohne Opacity arbeite. Hier ist es aber so, dass ich gerne diesen durchschimmernden Effekt hätte und dafür würde ich gerne wissen ob es möglich ist, dass die Border vom Container NICHT durschimmert.

[Gunnar Bittersmann]

@@bleumi85

Danke für die schnelle Antwort. Leider bringt sie mich mich exakt gar nicht weiter.

Warum nicht? Es ist genau das, was du brauchst: Linien nur dort, wo welche sein sollen.

Mir ist klar wie ich eine border-bottom ausblende, wenn ich ohne Opacity arbeite. Hier ist es aber so, dass ich gerne diesen durchschimmernden Effekt hätte

Den halbtransparenten Hintergrund für die Tabs und das Tabpanel hatte ich im Pen weggelassen. Den Rahmen ums Tabpanel auch. Ich hatte dir zugetraut, das selber zu setzen. Du enttäuscht mich.

und dafür würde ich gerne wissen ob es möglich ist, dass die Border vom Container NICHT durschimmert.

Nein, das ist natürlich nicht möglich. Was erst mal da ist, das schimmert durch.

Wenn du dir eine Sonnenbrille aufsetzt, siehst du die Bordsteinkante immer noch. Etwas dunkler zwar, aber die Sonnenbrille kann die Kante nicht wegzaubern.

LLAP 🖖

[Rolf b]

Hier ein Vorschlag - vielleicht kannst Du damit was anfangen. Das kleine schwebende Rechteck dient dazu, den Rand vom letzten Tab bis zur Ecke und die gerundete Ecke nachzuzeichnen, die durch das border-top:none für den Container kaputt gehen. Für den regulären Einsatz gibst Du ihm natürlich transparenten Hintergrund, ich habe ihn jetzt nur gefärbt damit es auffällt. Zwischen den Tabs habe ich den Rand mit einem DIV nachgezeichnet.

https://jsfiddle.net/qhkffu9h/3/

Schön ist anders, aber es erfüllt den Zweck und behält dein Layout bei.

Rolf

[bleumi85]

Hallo Rolf,

du hast Recht. Schön ist anders :-D Aber das ist genau das was ich gebraucht habe und was mir tierisch weiterhilft. Tausend Dank dafür!

[Gunnar Bittersmann]

@@Rolf b

Das kleine schwebende Rechteck dient dazu, den Rand vom letzten Tab bis zur Ecke und die gerundete Ecke nachzuzeichnen

Du meinst: es hätte dazu dienen sollen.

Warum klafft da eine Lücke zwischen Tab 3 und der Linie?

LLAP 🖖

[Rolf b]

Gute Frage. Bei mir klafft sie nicht. Probiert mit Chrome 58, Firefox 53, Edge 14.

Das zeigt mal wieder, dass pixelgenaue Positionierung im Browser ein Lottospiel ist. Welchen hast Du benutzt?

Im IE11 habe ich übrigens soeben eine vertikale Ungenauigkeit entdeckt, da musste ich den Container per Margin um 1px nach oben ziehen, sonst hat man eine Lücke zwischen Tabs und Container. Vielleicht rundet der mit den em-s merkwürdig.

Rolf