BERATUNG JUDITH ANDRESEN
  • Change gestalten
  • Coachen + Begleiten
  • Besser führen
  • Im Team arbeiten
  • Über uns
  • Blog
  • Termine
Private Einträge von Judith Andresen  ·  04. April 2006

Tabellenlayout ./. CSS

Mein Webseite und mein Blog waren bis gestern als Tabellenlösung layoutet. Bekanntlich ist das Konstruieren dieser Seiten nicht schön. Und Inhalt und Layout werden auch ordentlich durcheinander gebracht.

Anläßlich eines Layout-Relaunches beschloss ich also, mich mal näher mit CSS zu beschäftigen. Bis dato nutzte ich CSS nur, um Schriftfarben und -größen festzulegen.
Zunächst versuchte ich, entsprechend der gedachten Tabellen-Zellen, das Layout spaltenweise wieder aufzubauen. Es brauchte ungefähr einen halben Tag, bis ich realisierte, dass ich ja gerade von den Tabellen-Zellen weg wollte. Um eine Seite mit CSS zu gestalten, muss man sich fragen, welcher Inhalt in welcher Form wo platziert werden soll.

Daher versuchte ich nun, entsprechend farbige Boxen auf der Webseite zu platzieren. Nachdem ich auf den W3-Seiten (hier) ziemlich schnell an mein bzw. an das Darstellungsende des MSIE gelangt war, suchte ich weiter:

  1. SELFhtml: Spaltenlayout CSS
  2. Floats vs. Layouttabellen
  3. ...und mehrere Kommentare dazu
  4. Einschließen von Floats ohne zusätzliches Markup

Und damit begannen die Probleme: während der Firefox sich geschmeidig anstellte, wollte der MSIE dann meist überhaupt nicht. Leise erinnerte mich das Vorgehen von Tabellen: während man dort mit viel Space-Grafiken und Verschachtelungen arbeitet, müssen im Floats-CSS-Spaltenlayout diverse Container ineinander verschachtelt werden.

Aber es wurde dann doch. Mit einem Trick, der offensichtlich häufig genutzt wird, und der das eigentliche Anliegen nicht gut bedient: alle Layout-Boxen habe ich nun absolut positioniert. Und somit ist das Layout nun fertig;-)

Ein bißchen JavaScript war noch vonnöten, um auch den MSIE davon zu überzeugen, dass bestimmte Balken immer über die ganze Höhe, der Textinhalt aber auch manchmal umgebrochen zu sehen ist. Die Funktion ist nicht schön, und bei document.onresize tut sich nichts.

Beim nächsten Layout-Relaunch werde ich das ändern. Das sind die Browser dieser Welt sich hoffentlich einig, wie Standards zu interpretieren sind.

tagPlaceholderTags: Web

Über uns

Blog

Kontakt

Austausch vereinbaren

Termine

Räumlichkeiten

LinkedIn

Newsletter

Shop

sminca 2309

Veröffentlichungen

Volltextsuche

1 Gilt für Lieferungen in folgendes Land: Deutschland. Lieferzeiten für andere Länder und Informationen zur Berechnung des Liefertermins siehe hier: Liefer- und Zahlungsbedingungen
2 inkl. MwSt.
Cookie-Richtlinie
Sitemap | Kontakt | Impressum | Datenschutz | AGB | Widerrufsbelehrung und -formular | Liefer-und Zahlungsbedingungen
Anmelden Abmelden | Bearbeiten
  • Change gestalten
    • Organisationsberatung
    • Begleitung von Organisationsentwicklung
    • Interims-Transitionsmanagement
  • Coachen + Begleiten
    • Agile Coach-Ausbildung
    • Agile Coach-Kompaktausbildung
    • Agile Teamentwicklung Ausbildung
    • Agile Organisations-Entwicklung Zusatzausbildung
    • Executive Coach Training
    • Weitere Angebote
    • Downloads für Coaches
  • Besser führen
    • Führungskräfte-Coaching + Supervision
    • Ausbildung Agile Führung
    • Executive Leadership Training
  • Im Team arbeiten
    • Individuelle Teambegleitung und Konfliktmoderation
    • Moderation Eurer Teamworkshops
    • Agile Teamentwicklung Ausbildung
  • Über uns
    • Veröffentlichungen
    • Kontakt
    • Newsletter
    • Räumlichkeiten
  • Blog
    • Agiles Coaching
    • Agile Teamentwicklung
    • Agile Organisationsentwicklung
    • Agile Führung
    • BERATUNG JUDITH ANDRESEN
    • Podcast
    • Videocast
    • Workshops (Archiv)
  • Termine
  • Nach oben scrollen
zuklappen