Die neue Tabnavigation für die Startseite

Ich bin derzeit daran, mich durch den Wust der Dateien durchzukämpfen. Die Anwendung ist für meinen jetzigen Standpunkt ziemlich komplex und extrem generisch und somit sehr flexibel anpassbar aufgebaut. Vielleicht sieht aber ersteres momentan auch einfach nur so aus, weil mich die Menge an Dateien noch zur Verzweiflung und längeren Suchen bringt.

Um mich besser mit dem Aufbau zurechtzufinden, habe ich auch direkt die Aufgabe bekommen, die Tabs unterhalb des grossflächigen Teasers auf der Startseite anzupassen. Statt wie bisher einer Zeile sollte nun nämlich noch eine zweite, kleinere Zeile mit kurzer Erklärung darunter stehen. Eigentlich keine schwere Aufgabe, wenn man von den grossen Browserinkompatibilitäten absieht.

Während meines letztjährigen Praktikums bei Gölz & Schwarz konnte ich zum Glück durchaus fundiertes Wissen im Bereich semantischem Code und strukturiertem CSS aufbauen. Das war auch hier gefragt, da an recht vielen Stellen auf der Seite veraltete und langsam ladende blinde Tabellen als Layoutmittel eingesetzt werden.

Erste Wahl für eine solche Tab-Leiste sind meiner Meinung nach einfache Listen. Mit den richtigen CSS Definitionen versehen, sehen die Tabs genauso wie vorher aus, benutzen aber nur einen Bruchteil an Code.
Wohl oder übel musste ich also diesen Bereich neu programmieren, was allerdings nicht allzuviel Zeit in Anspruch nahm. Das Ausbügeln der schon beschriebenen leidigen Browserinkompatibilitäten hat dagegen um einiges mehr Zeit gekostet.

Das Problem war die vertikale Zentrierung von zweizeiligem Text in der Liste. Mit einer Tabelle wäre es sicherlich schneller zu programmieren gewesen, allerdings wollte ich das nicht mehr verwenden. Noch dazu konnte ich mit der neuen Version doch einige Codezeilen einsparen. Im Grunde genommen funktionierte mein „sauberer“ Aufbau „nur“ im Internet Explorer nicht. Da das vertikale Zentrieren von mehrzeiligem Text leider nur in Tabellenzellen funktioniert und der Internet Explorer mit dem praktischen

li a {
  display: table-cell;
}

absolut nichts anzufangen weiß, musste ich über einzelne ids (die ich aber sowieso für das Switchen des Teaser-Inhalts via Javascript brauche) auf die Tabs zugreifen. Statt also ein einfaches

li a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 317px;
  height: 55px;
}

nutzen zu können, musste ich auf das folgende Konstrukt ausweichen:

li a {
  display: block;
  padding: 12px 0 0 0; /* fake vertical-align for IE (2 rows text) */
  text-align: center;
  width: 317px;
  height: 55px;
}
#tab1 a:link, #tab1 a:visited {
  padding: 20px 0 0 0; /* fake vertical-align for IE (1 row text) */
  height: 45px;
}

Im Grunde genommen sieht das nicht nach allzuviel mehr Code aus, allerdings leidet die Flexibilität doch stark. Sollte in Zukunft einer der Tabs seine Zeilenanzahl ändern (der erste Tab zum Beispiel 2 Zeilen bekommen, der zweite 3 Zeilen und der dritte nur 1 Zeile), muss wieder aufwändig im CSS Code rumgefuhrwerkt werden, statt einfach nur den Inhalt zu ändern.

Auch wenn das Vorgehen nach einem ziemlichen Workaround aussieht, konnte ich wenigstens auf HTML Seite einiges aufräumen… Mal sehen, inwieweit ich den Code in meiner Zeit bei amiando noch weiter säubern und entschlacken kann…


Keine Kommentare zu “Zweite Spuren im Code”  

  1. Keine Kommentare

Einen Kommentar schreiben