Header neu gestalten

[Rolf B]

Hallo Holger,

wie ich mir das mit den Buttons denke, hast Du ja schon gesehen. In die Buttons habe ich zwei SPAN eingesetzt, wovon immer nur einer sichtbar ist. Einer für "ausklappen", der andere für "einklappen". Mit dem Attribut aria-controls beschreibe ich die Verbindung zur aus-/eingeklappten Table, und mit aria-expanded markiere ich, ob ausgeklappt ist oder nicht. Diese beiden Attribute gehören zu WAI-ARIA, einem Standardset von Attributen für zugängliche Anwendungen. Das Ausklappen mache ich mit Javascript, und zwar so, dass man im HTML nichts vom Script sieht. Damit das bei Dir so wie im Fiddle funktioniert, ist es am einfachsten, wenn Du das Script an das Ende vom Body stellst. Die Alternative ist ein DOMContentLoaded Handler, das muss man erstmal kennen.

Flexbox und Grid sind CSS Techniken, die vergleichsweise neu sind. Immerhin schon so alt, dass der Internet Explorer Flexbox kennt (wenn auch etwas buggy). Grid kennt er in einer veralteten Version; wenn man ein Grid so bauen will dass es mit aktuellen Browsern UND dem IE funktioniert, wird das mühsam.

Darum habe ich in meinem JSFiddle Flexbox für den Header und die H2-Überschrift verwendet (display:flex) und für die Kapitelnavigation die TABLE beibehalten.

Bei Fragen zu dem, was ich da gebaut habe, melde Dich gerne.

Rolf