Arbeiten am CSS des Blogs

Nachdem mich Christoph dankenswerterweise in einem Kommentar auf die fehlende Definition einer maximalen Seitenbreite aufmerksam gemacht hatte, habe ich maxwidth festgelegt. Dabei habe ich erst einmal einen Wert von 100em genommen.

Dieser Wert ist relativ hoch. Das hat aber folgenden Hintergrund:

Der Nutzer hat jederzeit durch Verringerung der Breite des Browserfensters bzw. Vergrößerung der Schriftgröße bzw. durch den Zoom bei den neuen Browsern (Opera, IE 7 und Firefox 3) die Möglichkeit die Anzahl der Zeichen pro Seite an seine Bedürfnisse anzupassen. Setze ich aber den Wert deutlich niedriger, dann können große Inhalte das Layout beeinträchtigen.

Gleichwohl werde ich mich mal bei Gelegenheit mit der Frage der Zentrierung des Layouts und der Optik der Seitenränder beschäftigen, damit das Layout auch beim Eingreifen des maxwidth-Wertes noch gut aussieht.

Christophs Vorschlag „rounded corner“ mittels nicht validem CSS im Sinne eines progressiven Enhancements für fortschrittliche Browser zu realisieren, habe ich wegen der dann nicht mehr validen CSS-Datei verworfen. In diesem Zusammenhang hatte ich bei der Überprüfung der CSS-Validierung meines Blog festgestellt, dass das PlugIn Snippet Highlight ebenfalls eine nichtvalidierende CSS-Datei enthält. Ich habe darauf hin dieses PlugIn deaktiviert.

Schließlich habe ich nun für den Rahmen der Tabellen und deren Zellen ausdrücklich die Rahmenfarbe per CSS definiert (table {border-color:#000} und ebenso für th und td). Dies war aus meiner Sicht geboten, da ohne diese Gestaltung per CSS der Internet Explorer die Rahmen teilweise weiß und damit anders als die anderen Browser darstellte. Nun sollte insoweit das Erscheinungsbild von Tabellen im Blog (siehe hierzu beispielsweise die Beiträge „CSS-Frameworks: Eine tabellarische Übersicht“ und „Die Tänzerin: Rechts- oder linksherum?“) bei den verschiedenen Browsern gleich sein.

Ich kann mich wirklich glücklich schätzen das WordPress-Theme Blitzblank, das auf dem CSS-Framework YAML basiert, im Einsatz zu haben. Damit lassen sich solche CSS-Änderungen schnell realisieren.

9 Kommentare

  1. datenkind sagt:

    Keine Ursache. 🙂

    Der Spagat des Mehrwertes und nicht validierender Stylesheets ist natürlich abzuwägen, was ich prinzipiell zur korrekten Validierung nur gutheißen kann.

    Auf meinem privaten Blog sehe ich das dann jedoch pragmatischer und sage mir, das Hauptstylesheet ist valide, das Sahnehäubchen nicht, dafür kann ich eben etwas mehr in die Darstellung eingreifen, ohne extra Markup ins HTML zu werfen und mehr Hintergrundbilder zu nutzen.

    Für Kundenwebsites sieht die Welt dann allerdings wieder anders aus. 🙂

  2. Dieter sagt:

    das Hauptstylesheet ist valide, das Sahnehäubchen nicht, dafür kann ich eben etwas mehr in die Darstellung eingreifen, ohne extra Markup ins HTML zu werfen und mehr Hintergrundbilder zu nutzen.

    Diese Verfahrensweise find ich gut und gedenke ich bei Gelegenheit auch mal einzusetzen.

    Erst will ich aber noch was für die Unterstützung alter Browser, Handys und PDAs tun, denn Zugänglichkeit (accessibility) geht für mich vor „reinen“ Designfragen und diesbezüglich besteht für meine Website leider noch Handlungsbedarf.

    Im XHTML-Forum bin ich übrigens auf hierzu interessante Ausführungen des W3C zu CSS3 module: Syntax aufmerksam gemacht worden.

  3. Ute sagt:

    Meistens lese ich dich eher als Feed im Akregator, aber manchmal schaue ich auch mal direkt. Mit definierter Breite ist es deutlich angenehmer zu lesen, prima 🙂

  4. Ute sagt:

    Ups, die mögliche Mailbenachrichtigung finde ich prima, hab sie aber erst nachdem Absenden gesehen, da sie ganz am Seitenende steht.

  5. Dieter sagt:

    Hallo Ute,

    freut mich sehr, dass Du meine Blogbeiträge liest.

    Die schlechte, sprich falsche Positionierung der Mailbenachrichtigung steht noch auf meiner ToDo-Liste. Ich vermute da ein falsches bzw. fehlendes Clearing als Ursache.

    Davon betroffen ist leider auch die Kommentarvorschau.

    Die Funktion Mailbenachrichtigung habe ich übrigens mit dem WordPress-PlugIn Subscribe to Comments nachgerüstet.

    Beste Grüße
    Dieter

  6. Ute sagt:

    …ich weiß, dass meinen Blogs diese praktische Funktion noch fehlt, ich bin grad dran, die Updates lokal vorzubereiten und zu testen, da ist die Funktion bereits enthalten.

    Hast du das Problem bereits repariert oder taucht es nur hier auf dem Eee PC mit seiner kleinen Auflösung nicht mehr auf? Hier klappt jedenfalls auch die direkte Vorschau perfekt. 🙂

  7. Dieter sagt:

    … nein das Problem habe ich noch nicht repariert. Es tritt nur auf, wenn das Kommentarfeld sich deutlich oberhalb des unteren Endes der Sidebar befindet.

    Welche praktische Funktion soll denn im Update bereits enthalten sein? Kommentarvorschau?

  8. Ute sagt:

    …sodele zurück auf 1920*1200 😉 Stimmt jetzt gibts auch hier kein Problem mehr, seit es mehr Kommentare gibt.

    Die Vorschau ist mir jetzt nicht so wichtig, aber die Mailbenachrichtigung finde ich klasse, deshalb gibts die nach meinem nächsten Update ebenfalls mit Subscribe to Comments.

    Meine Updates mache ich immer zuerst lokal, siehe auch Ablauf der Aktualisierung, wenn lokal alles klappt, dann erst gibts die echten Updates. Dieses Mal möchte ich ein paar Plugins hinzufügen, deshalb dauert das Testen ein bisschen länger.

  9. Dieter sagt:

    Das Problem mit der Funktion Mailbenachrichtigung habe ich endlich behoben.

    Es war – wie von mir bereits vermutet – ein Clearingproblem. Habe in der PHP-Datei des PlugIns clear:both in clear:left geändert und schon war der Fehler weg. 🙂 🙂 🙂

Hinterlasse eine Antwort

Deine Mailadresse bleibt geheim. Pflichtfelder sind mit * gekennzeichnet.

vierzehn − 5 =

Kommentare prüfe ich grundsätzlich vor einem Freischalten!
Ich bitte um Verständnis für diese Spamschutz-Maßnahme.

Webseite veröffentlicht am Sonntag, den 29. Juni 2008, um 21:25 Uhr,
zuletzt geändert am Freitag, den 3. Juni 2011, um 19:23 Uhr.
Tags: , , , ,


Statistik: 71 Seiten, 346 Blogartikel, 1.069 Schlagworte, 1.315 Kommentare.
© 2002 - 2018 | WordPress - Mein Layout basiert auf YAML und wird durch Xtreme One angetrieben. 
Diese Website setzt Cookies ein (Datenschutz). Wenn Du diese Website weiterhin besuchst, erklärst Du Dich mit deren Verwendung einverstanden.

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen