Webseiten-Infos.de » CSS

Opera: Checkboxen korrekt darstellen

Dieter — Sat, 10 Apr 2010 19:21:22 +0000

Ich hatte in meinen Blogbeiträgen “Checkbox-Problem mit IE und Opera” und “Opera 10.5 mit runden Ecken und Schatteneffekt” bereits über Darstellungsprobleme mit Checkboxen beim Browser Opera berichtet.

Ursächlich für die Darstellungsprobleme beim Opera war die Übernahme von Gestaltungen für input mittels Cascading Style Sheets (CSS) auch bei Checkboxen.

Der Kommentar von Thiemo zeigte mir einen Lösungsweg auf:

Input mit Selektoren auf HTML-Attribute ergänzen, so dass diese CSS-Anweisungen nicht automatisch auf Checkboxen angewandt werden.

Konkret heißt das, dass man für input in der CSS-Datei den jeweiligen Typ (type) definiert, also beispielsweise input[type=text], input[type=submit].

Nachdem ich entsprechende Ergänzungen in der CSS-Datei für Webseiten-Infos.de vorgenommen habe, werden die Checkboxen auch im Opera wieder wie gewollt dargestellt.

Ein herzliches Dankeschön an Thiemo für den Gedankenschubser und die Lösung meines Darstellungsproblems.

Kommentare

29. November 2011, Aktive Eingabefelder visuell hervorheben | Webseiten-Infos.de schreibt: [...] Die Eigenschaft border habe ich nicht generell auf input, sondern lediglich auf input[type=text] angewandt, damit es bei Checkboxen im Opera nicht zu Darstellungsproblemen kommt (siehe hierzu auch meinen Blogbeitrag “Opera: Checkboxen korrekt darstellen“). [...]

Internet Explorer CSS vorenthalten

Dieter — Wed, 03 Feb 2010 22:58:05 +0000

Schon immer nervte mich der Internet Explorer (IE) beim Erstellen und Gestalten von Webseiten. Das obwohl ich hier auf Webseiten-Infos.de das WordPress-Theme YAML Green (Update) einsetze. Dank YAML werden zwar die erforderlichen Fehlerkorrekturen (Bugfixes) für diesen “Drecksbrowser” gleich mitgeliefert, aber der Internet Explorer (IE) 5.5 und älter macht mir gleichwohl immer wieder das Leben schwer.

Ursächlich dafür sind meine Veränderungen (Modifizierungen) am WordPress-Theme. So funktioniert beispielsweise der PNG-Fix für die transparente Darstellung des Logos im Grafikformat PNG nicht (siehe hierzu meinen Blogbeitrag “PNG-Logo auch für den IE 6“). Zudem ist für mich die unschöne Darstellung und Gestaltbarkeit von Formularen und Schaltflächen ein Ärgernis.

Damit ist aber nun endlich Schluss! Ich habe mich dazu entschlossen, dem völlig veralteten Internet Explorer 5 bis 5.5 die Gestaltung der Webseiten von Webseiten-Infos.de künftig einfach vorzuenthalten. Realisiert habe ich das mit Conditional Comments (siehe hierzu auch den Artikel “Conditional-Comments für Internet Explorer im Beispiel” bei hyperkontext.at).

Da ich Cascading Style Sheets (CSS) möglichst nur in externen Dateien (.css) einsetze, brauchte ich dazu lediglich die CSS-Dateien im Kopfbereich (Header) mit folgendem Conditional Comment (CC) “einzurahmen”:

Getestet habe ich die Darstellung im Internet Explorer (IE) 5.5 übrigens mit dem IETester (siehe hierzu meinen Blogbeitrag “Webdesign mit verschiedenen IE-Versionen testen” und den Blogbeitrag “IE-Tester und IE-Konformität” bei internetblogger.de).

Lohnt sich der ganze Aufwand überhaupt?

Gute Frage!

Hier auf Webseiten-Infos.de finde ich ja.

Zum einem nutzen zwar erfreulicherweise inzwischen fast doppelt soviele Besucher dieser Website den Firefox statt den Internet Explorer (Januar 2010: 55% gegenüber 28%). Aber immer noch 5% der Besucher mit dem Internet Explorer (IE) kommen mit den Versionen 5 bis 5.5 auf Webseiten-Infos.de (Februar 2009 waren es sogar noch 13%).

Zum anderen war dieser Conditional Comment (CC) auf Webseiten-Infos.de ganz schnell eingebaut, kostete also kaum Zeit.

Sollte ich irgendwann auch den Internet Explorer (IE) 6 oder 7 von den CSS-Dateien ausschließen (wollen), dann brauche ich im Conditional Comment (CC) lediglich die Versionsnummer auszutauschen und kann dann die CSS-Patchdatei vereinfachen (IE 6) oder ganz entfernen (IE 6 und 7).

IE 8 in Conditional Comment einbezogen

Dieter — Wed, 18 Nov 2009 01:09:34 +0000

Auch der Internet Explorer 8 (IE8) lässt sich mittels Conditional Comment (CC) gesondert mit CSS ansprechen.

Bislang hatte ich ihn nicht in die CSS-Datei einbezogen gehabt, die mittels Conditional Comment (CC) nur für den Internet Explorer 5 bis 7 galt.

Dadurch, dass ich nun auch den Internet Explorer 8 (IE8) einbeziehe, ergeben sich für diesen Browser folgende Neuerungen:

Der eingefärbte senkrechte Scrollbalken ist nun auch im Internet Explorer 8 (IE8) zu sehen.
Der Rahmen um die Checkboxen ist nun beim Internet Explorer 8 (IE8) verschwunden (siehe hierzu meinen Blogbeitrag “Checkbox-Problem mit IE und Opera“).

Für das Einbeziehen des Internet Explorers 8 (IE8) musste ich in der functions.php des WordPress-Themes YAML Green (Update) folgende Änderung vornehmen:
Ich ersetzte

durch

Erfreulicherweise beschränkt sich die Wirkung des * html-Hacks (Stern-Selektors) auf die Versionen des Internet Explorers kleiner 7. Auch der Internet Explorer 8 (IE8) wird – wie der IE7 – von diesem Hack nicht angesprochen.

Damit sollten nun auch im Internet Explorer 8 (IE8) die Darstellung der Checkboxen und vertikalen Scrollbalken besser aussehen.

Kommentare

18. November 2009, Klaus schreibt: Hi Dieter, da habe ich einen Artikel, der dich vielleicht interessieren könnte. ;)
18. November 2009, Dieter schreibt: Moin Klaus, herzlichen Dank für den Link zu Deinem informativen Artikel. Der ist definitiv interessant und hilfreich. Beste Grüße Dieter
24. November 2009, Dejo schreibt: Guten Morgen, danke für den interessanten Artikel! Gruß Dejo
24. November 2009, Dieter schreibt: Bitte schön!

Internet Explorer sucks!

Dieter — Mon, 09 Nov 2009 00:47:00 +0000

Rund 2 Stunden wendete ich auf um IE-spezifische Probleme mit dem Layout von Webseiten-Infos.de in den Griff zu bekommen.

Ich hätte große Lust Microsoft dafür eine Rechnung zu schicken! Verlorene Zeit, bloß weil sich der Internet Explorer (IE) bis einschließlich Version 7 nicht hinreichend an Webstandards hält. Ich könnte k…!

Diesmal ärgerte ich mich dermaßen, dass ich schon das Ausschalten des Layouts für den Internet Explorer (IE) bis Version 7 testete.

Lediglich dem WordPress-Themes YAML Green (Update), das auf dem CSS-Frameworks YAML basiert, war es mit der mittels Conditional Comment (CC) eingebundenen CSS-Datei für das Sorgenkind Internet Explorer (IE) bis einschließlich Version 7 zu verdanken, dass ich dann doch dort die erforderlichen Anpassungen vornahm.

Liebe Nutzer des Internet Explorers (IE) bis einschließlich Version 7:

Ihr macht die Webdesigner dieser Welt und Euch selbst glücklich, wenn ihr entweder

auf den Internet Explorer 8 aktualisiert (updated) oder
gleich auf einen modernen Browser wie beispielsweise die kostenlosen Alternativen Firefox, Opera, Flock, K-Meleon, Seamonkey, Safari oder Google Chrome umsteigt.

Es ist für mich erschreckend, dass noch immer über 25% der Besucher von Webseiten-Infos.de mit einer veralteten Version des Internet Explorers surfen.

Für ein besseres Web: Aktualisiert Euren Internet Explorer (IE) oder – noch besser – steigt auf einen modernen Browser um (siehe auch browser-update.org)!

So, das musste einfach raus!

Kommentare

9. November 2009, Jens Grochtdreis schreibt: Ich verstehe ja Deinen Frust, kann aber bei Deiner Seite keine problematischen Punkte feststellen. Wo bitteschön sind denn bei diesem recht einfachen Design irgendwelche Probleme bzgl. IE6? Hast Du schonmal daran gedacht, dem IE6 einfach weniger zu geben? Gute Browser können bspw. runde Ecken mit CSS3, alle IE nicht.
9. November 2009, Dieter schreibt: Hallo Jens, danke für Dein Verständnis.
Wo bitteschön sind denn bei diesem recht einfachen Design irgendwelche Probleme bzgl. IE6?
Die Probleme bzgl. IE6 traten insbesondere in der Sidebar mit text-indent und CSS-Grafiken sowie den unterschiedlichen Breiten von Formularelementen auf. Sollte jetzt aber behoben sein. Auch wenn das Design für Dich relativ einfach zu sein scheint, die erforderlichen Korrekturen für den IE < 8 sind für mich schon beachtlich und ärgerlich. Lediglich mit YAML ist das für mich überhaupt mit einem vertretbaren zusätzlichen Aufwand verbunden (siehe bezüglich der Korrekturen für den IE < 8 meine patch_2col_right_seo.css).
Hast Du schonmal daran gedacht, dem IE6 einfach weniger zu geben? Gute Browser können bspw. runde Ecken mit CSS3, alle IE nicht.
Nicht nur daran gedacht, sondern auch schon gemacht. ;-) Schau Dir mal meine CSS-Datei (derzeit green_2col_right-2009-11-04.css) an. Dort findest Du mittels CSS3 realisierte runde Ecken und Schatten um Boxen. Oder schau Dir zu Vergleichszwecken meine Seite einfach mal mit dem Internet Explorer und Firefox, Safari oder Google Chrome an. Beste Grüße Dieter PS: Ich war schon kurz davor dem IE < 8 richtig weniger an CSS zu geben: Nämlich nichts mehr! ;-)
9. November 2009, reizi schreibt: Woher kenne ich das nur? :) Ich möchte nicht wissen, wieviele Stunden ich Microsofts IE Versionen schon gewidmet und Browserweichen gebastelt habe. Richtig spassig wirds auch mit Javascript. Das Problem an der ganzen Geschichte ist, das etliche Firmen immernoch mit IE6, oder IE7 kämpfen. Leider!!! Gruß
9. November 2009, Dieter schreibt: @reizi Browserweiche für den Internet Explorer ist mit den Conditional Comments noch einfach. Schwierig wird es in der Tat mit den Bugs und Besonderheiten des IE < 8 sowie mit JavaScript. Das Problem mit dem IE6 und 7 in Firmen wird leider dazu führen, dass häufig noch einige Jahre diese IE-Versionen beim Layouten berücksichtigt werden müssen. Man kann nur hoffen, dass viele dem Beispiel von Google bei YouTube folgen werden und einfach die Unterstützung einstellen werden. Mit diesem Gedanken kann ich mich immer mehr anfreunden. Gruß Dieter
25. September 2010, Heli schreibt: Schön, dass auch Profis mit dem IE Probleme haben. Ich hoffe, dass er endlich verschwindet. Selbst für einfache Sachen wie Roundies muss man für den IE eine umständliche Konstruktion basteln.
25. September 2010, Dieter schreibt: @Heli Schön ist anders! Der IE 8 ist überwiegend in Ordnung. Abgerundete Ecken (rounded corners) mittels CSS3 beherrscht er zwar nicht, aber dann bekommt der IE-Nutzer halt nicht abgerundete Ecken zu sehen und gut ist. Das Ganze wird in den letzten Jahren unter dem Stichwort Progressive Enhancement diskutiert.

Eigene und fremde Kommentare unterscheiden

Dieter — Sat, 07 Nov 2009 17:21:36 +0000

Crazy Girl (www.crazytoast.de) und Gerrit van Aaken (praegnanz.de/weblog) haben mich mit ihren Blogs zur Differenzierung von eigenen und fremden Kommentaren mittels Rahmen inspiriert. Danke!

Gesagt, getan!

Ab sofort gibt es auf Webseiten-Infos.de nur noch einen Rahmen um meine eigenen Kommentare. Das war aufgrund des hier eingesetzten WordPress-Themes YAML Green (Update) auch kein Problem. Das bringt für eigene Kommentare bereits die CSS-Klasse .author und für fremde Kommentare die CSS-Klasse .guest mit.

Im Sinne eines konsistenten Erscheinungsbildes habe ich zudem die Avatare (Gravatare) nun linksbündig zum Kommentartext gemacht.

Ferner habe ich den Rahmen um meine Kommentare nun wie die anderen Rahmen auf Webseiten-Infos.de mit CSS3 gestaltete runde Ecken (border radius) und einem Schatteneffekt (box-shadow) versehen. Das soll ebenfalls zu einem einheitlicheren Erscheinungsbild beitragen.

Diese optischen Effekte siehst Du allerdings nur mit bestimmten Browsern wie Firefox und Flock (Rendering Engine Gecko), Google Chrome und Safari (Rendering Engine WebKit).

Der Internet Explorer (IE) und Opera beherrschen diese CSS3-Spielereien selbst in ihren derzeit neuesten Versionen (Internet Explorer 8, Opera 10.01) leider noch nicht.

Allerdings besteht die begründete Hoffnung, dass sich das auf absehbare Zeit beim Opera mit der nächsten Version der Rendering Engine Presto 2.3 ändert.

Für den Internet Explorer (IE) ist mir dagegen nicht bekannt, dass Microsoft an der Implementierung von CSS3-Eigenschaften arbeiten würde.

Ein weiterer Grund für das Surfen im Web einen anderen Browser als den Internet Explorer (IE) zu verwenden.

Kommentare

8. November 2009, Klaus schreibt: Hi Dieter, das würde ich auch gerne mal testen. Was muss ich denn wo in der comments.php eintragen, damit die Klassen generiert werden. Den beiden Links, wo du das her hast, bin ich gefolgt, leider hat mich auch die Suchfunktion dort nicht weitergebracht Gruß Klaus
8. November 2009, Dieter schreibt: Hallo Klaus, im WordPress-Theme YAML Green ist in der Datei comments.php PHP-Code für die Klassen author und guest in den Zeilen 50 bis 57 zu finden. Er kommt dort unmittelbar nach ol class="comments". Da ich lediglich dieses Theme verwende und nicht programmieren kann, bin ich mir nicht sicher, ob Du nicht noch weitere Codebestandteile in die comments.php eines anderen Themes kopieren müsstest. Die sicherste Lösung dürfte es sein, wenn Du einfach die comments.php von YAML Green in das von Dir verwendete Theme kopierst und dann die comments.php an Deine Bedürfnisse anpasst. Das habe ich gerade erfolgreich mit dem Theme WordPress Default DE-Edition 1.6 getestet. Ich hoffe, das hilft Dir weiter. Wenn nicht, kannst Du gerne noch einmal nachfragen. Beste Grüße Dieter
8. November 2009, Dieter schreibt: Nachtrag: Eben habe ich mal testweise nur den Code aus den Zeilen 50 bis 57 der comments.php von YAML Green in die comments.php eines anderen Themes kopiert. Das reicht definitiv nicht aus. Das Einfachste dürfte sein, die komplette comments.php von YAML Green zu verwenden.
8. November 2009, Klaus schreibt: danke für deine Hilfe. :-) ich werde mir das YAML Green mal runterladen und versuchen ob ich die comments.php anpassen kann. Meine Programmierkenntnisse bewegen sich zwar niveaumäßig in Richtung Vollpfosten, aber ich habe die Erfahrung gemacht das man bei WP sehr vieles trotzdem hinkriegt. Viele Grüße Klaus ps. Wenn es geklappt hat kann ich ja hier mal berichten.
8. November 2009, Dieter schreibt: Hallo Klaus, keine Ursache. Gern geschehen. Bei mir läuft es häufig auch auf die try-and-error-Methode hinaus. Von Vorteil ist auch, dass WordPress, YAML sowie das WordPress-Theme gut dokumentiert sind. Freue mich, wenn Du hoffentlich bald über das erfolgreiche Ergebnis Deiner Bemühungen berichten kannst und wirst. Beste Grüße Dieter
9. November 2009, Klaus schreibt: Tach Dieter, ich habs auf Anhieb hinbekommen. :hurra: So sah meine comments.php an der Stelle vorher aus:
1. Dann habe ich aus der comments.php deines Themes zwei Sachen rauskopiert. Erstens Zeile 52-57: comment_author_email == get_the_author_email() && ($comment->user_id != 0)) { $class = "author"; } else { $class = "guest"; } ?> Das Anfangs-PHP-Tag habe ich noch ergänzt. Zweitens ein Stückchen aus Zeile 58: class="" Das brauche ich, damit er die Klasse an der richtigen Stelle ausgibt. Das Endergebnis in meiner comments.php sah dann so aus: comment_author_email == get_the_author_email() && ($comment->user_id != 0)) { $class = "author"; } else { $class = "guest"; }?>
2. Zu diesem Thema werde ich in meinem Blog diese Woche noch einen Artikel mit Anleitung schreiben. Hoffe ich konnte dir helfen. Wenn du Fragen hast nur heraus damit. :-) Gruß Klaus
3. 9. November 2009, Dieter schreibt: Hallo Klaus,
  ich habs auf Anhieb hinbekommen
  Herzlichen Glückwunsch und ganz herzlichen Dank für Deinen Kommentar mit der Lösung. Dein Blogbeitrag mit dem Titel "Kommentar des Autors hervorheben" ist ja auch schon veröffentlicht. Super! :-) Werde ich bestimmt gebrauchen können, sollte ich mal ein anderes WordPress-Theme ohne diese Funktionalität einsetzen wollen. Sollte ich Fragen haben, werde ich gerne auf Dein Angebot zurückkommen. Beste Grüße Dieter
4. 9. November 2009, Kommentar des Autors hervorheben schreibt: [...] besonderer Dank gilt Dieter, ohne ihn wäre dieser Artikel nicht [...]

Webseiten-Infos.de unterstützt Benutzer-Stylesheets besser

Dieter — Sat, 07 Nov 2009 09:58:25 +0000

Thomas Scholz aka toscho hatte mich in einem Kommentar dankenswerterweise darauf aufmerksam, dass auf Webseiten-Infos.de Benutzer-Stylesheets (User-Stylesheets) mit Mindestschriftgröße missachtet werden (siehe hierzu auch seinen sehr lesenswerten Blogbeitrag “Mythos font-size: 62.5%“).

Insbesondere Menschen mit Sehschwäche verwenden gerne ein Benutzer-Stylesheet (User-Stylesheet) um automatisch Webseiten mit einer für sie gut lesbaren Schriftgröße in ihrem Browser angezeigt zu bekommen.

Probleme bei der Mindestschriftgröße erzeugen für sie eine vermeidbare Zugangsbarriere und schränken die Zugänglichkeit (Accessibility) ein.

Ursächlich für das Problem mit der Mindestschriftgröße auf Webseiten-Infos.de war folgende CSS-Regel, die ich in der CSS-Datei des von mir modifizierten WordPress-Themes YAML Green (Update) hatte:

1	body {fontsize: 75%;}

Um in Ruhe die damit verbundene Anpassungen der Schriftgrößen vornehmen und testen zu können, richtete ich mir ein Testblog mit identischem Layout ein (siehe hierzu den Blogbeitrag “Mit WordPress umziehen” auf WordPress-Buch.de).

Damit konnte ich dann – ohne das Aussehen von Webseiten-Infos.de zu beeinträchtigen – die oben genannte CSS-Regel entfernen. Stattdessen galt dann die ursprünglich in der slime_base.css und nun am Anfang meiner CSS-Datei stehende CSS-Regel:

1	body {fontsize: 100.01%;}

Anschließend passte ich die Schriftgrößen der anderen Seitenelemente – wie beispielsweise der Überschriften (h1-h6) – an. Dazu musste ich in der Regel die ursprüngliche Größe um ein Viertel reduzieren. Zudem brauchten einige Seitenelemente nun keine eigene Festlegung der Schriftgröße (fontsize) mehr. Bei anderen Seitenelemente musste ich diese dagegen erstmalig definieren.

Ich hoffe sehr, dass damit Webseiten-Infos.de noch barriereärmer (zugänglicher) geworden ist.

Abschließende Hinweise:

Die noch immer häufig anzutreffende Empfehlung die Schriftgröße generell mittels body in der CSS-Datei auf 62.5% zwecks leichterer Umrechnung in Pixel (px) festzuschreiben (siehe hierzu beispielsweise den Webdesign-Tipp: Relative Schriftgrößen handhaben), kann negative Auswirkungen auf eine im Benutzer-Stylesheet (User-Stylesheet) festgelegte Mindestschriftgröße haben.
Das ist zwar praktisch, da bei den meisten Browsern 62,5% genau 10px entsprechen und sich so relative Schriftgrößen leichter in Pixel (px) und umgekehrt umrechnen lassen. Andererseits aber beeinträchtigt das die Zugänglichkeit (Barrierefreiheit, Accessibility) in inakzeptabler Weise.
Im Ergebnis sollte die Ausgangsschriftgröße mittels dem Selektor body mit 100.01% definiert werden, damit oben genannte negative Auswirkungen auf eine Mindestschriftgröße vermieden werden.
Das Setzen der Schriftgröße auf 100.01% statt 100% empfiehlt sich übrigens, um Rundungsfehler bei relativen Schriftgrößen (em, Prozent) in den älteren Browsern Internet Explorer 5.x, Opera 6 und Safari 1 zu vermeiden.

Hast Du Fragen, Hinweise, Anmerkungen? Gerne! Dann schreibe einen Kommentar.

Kommentare

7. November 2009, Thomas Weise schreibt: Ja, ehrlich gesagt habe ich derzeit gar keinen richtigen Plan, wie man nun am Besten die Schriftgrößen im CSS handlen soll... mit %, em, px... am Ende wird es ja doch meist eine Mischung von allem. Leider, bei mir zumindest. :(
7. November 2009, Dieter schreibt: @Thomas Ich denke, für die Bildschirmdarstellung (@media screen) solltest Du möglichst nur relative Schriftgrößen (em, Prozent) nehmen. Gegen Pixel (px) spricht, dass der Internet Explorer bis einschließlich Version 6 standardmäßig diese nicht skaliert. Es gibt aber auch Webdesigner, die trotzdem Pixel (px) verwenden (siehe hierzu beispielsweise den Blogbeitrag "Pixelgrößen für HTML-Text?" auf praegnanz.de). Für das Drucken (@media print) empfiehlt es sich nach meiner Meinung dagegen möglichst die absolute Maßeinheit Pica Point (pt) zu nutzen.
11. Januar 2010, font-size body jetzt 60% größer | funkygog Blog schreibt: [...] Benutzer Stylesheets unterstützen Das Setzen der Schriftgröße auf 100.01% statt 100% empfiehlt sich übrigens, um Rundungsfehler bei relativen Schriftgrößen (em, Prozent) in den älteren Browsern zu vermeiden. [...]
3. Dezember 2011, Der BITV-Selbsttest mit Fragebogen | Webseiten-Infos.de schreibt: [...] Die Zugänglichkeit (Accessibility) der Webseiten auf Webseiten-Infos.de liegt mir besonders am Herzen (siehe hierzu den Abschnitt 3. Die Zugänglichkeit (Accessibility) des Artikels “Was macht eine gute Webpräsenz aus?” sowie die Blogbeiträge “Abkürzungen auf Webseiten“, “Skiplinks und Anker einsetzen“, “Zugänglichkeit ohne Accesskeys“, “Tabindex für Kontaktformular“, “Sprachwechsel für Screenreader” und “Webseiten-Infos.de unterstützt Benutzer-Stylesheets besser“). [...]

Little Boxes Teil 1 online

Dieter — Thu, 15 Oct 2009 18:33:06 +0000

Heute hat Peter Müller, Autor der Bücher Little Boxes Teil 0, 1 und 2, auf seiner Website little-boxes.de den kompletten Band 1 online gestellt.

Damit kannst Du nun auch online die Grundlagen von (X)HTML und CSS mit diesem nach meiner Meinung pädagogisch besten Lehrbuch aneignen.

Wenn Du – wie ich – lieber auch mal in einem Buch liest, dann kannst Du das Buch auch bei Amazon erwerben:

Little Boxes, Teil 1

Peter M. Müller. Markt und Technik 2009, Broschiert, 381 Seiten, € 24,95

Dort gibt es zudem die Bände 0 und 2, die ebenfalls sehr lesenswert sind.

Little Boxes Teil 0

Peter Müller. Markt und Technik 2008, Broschiert, 240 Seiten, € 4,99

Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr.

Peter M. Müller. Markt+Technik 2007, Broschiert, 394 Seiten, € 24,95

Und wenn Du Dir lieber mit Videotraining das Wissen aneignen magst, dann ist das für die Bände 1 und 2 auch möglich:

Video2Brain Little Boxes – Webseiten gestalten mit CSS – Video-Training DVD

Peter M. Müller. Pearson Education GmbH 2007, DVD-ROM, € 39,95

Little Boxes Teil 2 – Videotraining

Peter M. Müller. Pearson Education GmbH 2009, DVD-ROM, € 20,99

Und hier gibt es noch meine bisherigen Buchbesprechungen (Rezensionen) zu den Büchern der Reihe Little Boxes

sowie Artikel und Blogbeiträge mit Bezug zu den Büchern der Reihe Little Boxes

Kommentarvorschau auf Webseiten-Infos.de

Dieter — Thu, 15 Oct 2009 14:28:39 +0000

Und schon wieder gab mir Thomas Scholz aka toscho einen guten Tipp: Kommentarvorschau mit dem WordPress-Plugin Live Comment Preview.

Die Installation und Aktivierung des Plugins ist einfach:

Im Administrationsbereich (Backend) über Plugins > Installieren oder auf den Rechner herunterladen (downloaden), ZIP-Datei entpacken und mit einem ftp-Programm den Ordner live-comment-preview einschließlich der darin enthaltenen Dateien in den Unterordner wp-content/plugins/ auf Deinem Webspace kopieren.
Anschließend im Administrationsbereich (Backend) über Plugins > Verwalten das Plugin aktivieren und fertig.

Folgende Anpassungen habe ich hier am Code des Plugins (live-comment-preview.php) noch vorgenommen:

Zum einem habe ich den Code für die Darstellung des Gravatars (siehe hierzu meinen Blogbeitrag “Bild oder Foto beim Kommentar“) in der Vorschau entfernt (Zeilen 42 und 43). Bei Thomas beschwerten sich Leser, die eine langsame Internetverbindung haben: Der Gravatar wurde immer wieder neu geladen.
Das Wort “Says” habe ich in der Zeile 42 (vorher 44) gelöscht.
In der Zeile 40 habe ich die Angaben bezüglich style wie folgt geändert:
1
style="clear:both;margin:.5em 0 -1em -1em;"
In der Zeile 258 (vorher 260) habe ich in
Kommentarvorschau eingefügt:

Kommentarvorschau

Meine CSS-Datei habe ich um folgenden Code ergänzt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#commentPreview
{
margin: 0 0 1em 0;
padding: 0;
}
#commentPreview
{
border: 1px solid #736355;
background: #fff;
padding: 3px;
color: #111;
}
#commentPreview
{
width: 90%;
}

In der Template-Datei comments.php des von mir modifizierten Themes YAML Green habe ich folgende Ergänzung unmittelbar oberhalb des Codes für die Quicktags (Fett, Kursiv etc) vorgenommen, damit die Kommentarvorschau nicht unter, sondern über dem Kommentarfeld erscheint:
1
if (function_exists('live_preview')) live_preview(); ?>

Im Plugin-Verzeichnis von WordPress ist zwar nur die Kompatibilität des Plugins bis zur Version 2.5 angegeben, das dürfte aber daher rühren, dass die letzte Aktualisierung (Update) des Plugins vom April 2008 ist (Version 1.9). Bei mir scheint es aber auch mit WordPress 2.8.4 problemlos zu funktionieren.

Meinungen und Verbesserungsvorschläge für die hier nun eingesetzte Kommentarvorschau sind jederzeit gerne willkommen.

Einfach einen Kommentar schreiben.

Nachtrag:

Die Kommentarvorschau habe ich wieder deaktiviert und die Gründe in meinem Blogbeitrag “Kommentarvorschau deaktiviert” aufgeführt.

Kommentare

14. April 2010, Leo schreibt: Geniales Plugin. Hab ich auch direkt installiert.
14. April 2010, Dieter schreibt: @Leo Dann bin ich mal gespannt, wann Du es - wie ich - auch wieder deinstallierst. ;-)

Quellenangabe für Zitate

Dieter — Sun, 11 Oct 2009 13:59:11 +0000

Viele Zitate finde ich heutzutage im Web. Dann gebe ich auch den entsprechenden Link zur Quelle an.

Für die Anzeige von Zitaten verwende ich das HTML-Element blockquote und gestalte dieses Element nach meinen Wünschen mit CSS (siehe hierzu meinen Blogbeitrag “Zitate gestalten“).

Gibt es eine Fundstelle im Web zu dem Zitat, kann diese dem HTML-Element blockquote mit dem Attribut cite – nicht verwechseln mit dem HTML-Element cite – hinzugefügt werden.

Ein Beispiel:

1
2
3

<blockquote cite="http://www.webmasterpro.de/coding/article/benutzbarkeit-von-html5-elementen-aktueller-stand.html">
Die Verwendung von <abbr title="Hypertext Markup Language" lang="en" xml:lang="en">HTML</abbr>5-Elementen bleibt somit wohl bis auf weiteres privaten Webseiten oder Testseiten vorbehalten.
</blockquote>

Das Beispiel sieht dann hier wie folgt aus:

Die Verwendung von HTML5-Elementen bleibt somit wohl bis auf weiteres privaten Webseiten oder Testseiten vorbehalten.

Das Attribut cite beim HTML-Element blockquote wird übrigens von keinem Browser automatisch angezeigt. Es bleibt also für den Besucher unsichtbar. Nur im Quelltext (Quältext) ist es zu sehen.

Allerdings wird damit die Semantik der jeweiligen Webseite verbessert. Ich habe hier die Seiten auf Webseiten-Infos.de mit Zitaten und Quellenangabe entsprechend ergänzt.

Diese Informationen kannst Du bei SelfHTML auf der Seite Zitate und Adressen finden.

Aufmerksam darauf geworden bin ich jedoch durch die Ausführungen zu Zitate auf Seite 137 des folgenden Buchs von Hannes Schluchtmann und Monika Thon-Soun:

Basis-Know-how CSS

Monika Thon-Soun. Data Becker 2009, Broschiert, 288 Seiten, € 2,90

Kommentare

18. Oktober 2009, Ute schreibt: Du weißt, dass Monika Thon-Soun unter anderem für texto.de verantwortlich ist? Ich schätze ihre Meinung sehr, sei es in ihren Blogs, im WP-Forum oder wo auch sonst im Web. Danke für den Buchtipp, das werde ich mir merken, ich bin gespannt, was sie in dieser Form schreibt.
18. Oktober 2009, Dieter schreibt: @Ute Danke, ja weiß ich. Ich schätze auch ihre Meinung und Texto.de ist nicht grundlos in meiner Linkliste. ;-) Sie hat mir schon oft im Forum von WordPress-Deutschland.org geholfen. :-) Das Buch enthält für mich noch mehr interessante Tipps. Dabei handelt es sich in der Regel für mich lediglich um Details. Grund: Die Grundlagen für XHTML und CSS sind inzwischen dank Little Boxes von Peter Müller und vieler hilfreicher Kommentare in meinen Blogs - insbesondere von toscho, Fritz und Dir - gelegt. :freu:
21. Oktober 2009, Ute schreibt: Ups, da siehst du mal wieder, dass ich deine Linkliste nicht gelesen habe. ;) Eben deshalb will ich auf Dauer auch von solchen Listen weg und mehr noch in Artikeln auf andere, lesenswerte Beiträge und Blogs verweisen. :) Ansonsten, danke für die Blumen, freut mich, dass ich dazu beitragen konnte, dass du inzwischen topfit bist mit XHTML, CSS und so. :hurra:
21. Oktober 2009, Dieter schreibt: @Ute Schön, dass nicht nur ich schon mal etwas überlese. Da fühle ich mich doch gleich nicht mehr so allein. ;-) Ich versuche auch in Artikeln und Blogbeiträgen auf andere, lesenswerte Beiträge und Blogs zu verweisen. Darüber hinaus möchte ich aber derzeit weiterhin meine Linkliste bestehen lassen. Sie zeigen allgemein meine Leseempfehlungen. :-) Ich freue mich über soviel Hilfestellung insbesondere durch Dich, toscho und Fritz. :hurra:

Ladezeit von Webseiten-Infos.de

Dieter — Sun, 04 Oct 2009 21:00:25 +0000

Für das Überprüfen der Ladezeit meiner Seiten verwende ich neben dem Addon YSlow für den Browser Firefox und das Addon Firebug insbesondere den Webdienst WebSiteOptimization.com.

In meinem Addon Web Developer für den Firefox kann ich den Webdienst WebSiteOptimization.com direkt – über das Menü Extras > Geschwindigkeitsreport anzeigen – für die geöffnete Seite im Browserfenster aufrufen.

Damit der Webdienst seine Arbeit verrichtet, sind noch Buchstaben und Zahlen als Spamschutz einzugeben. Danach fängt WebSiteOptimization an die Webseite zu analysieren und gibt das Ergebnis im Browserfenster aus.

Die Ergebnisse für die Startseite von Webseiten-Infos.de sind alle im grünen Bereich. Darauf bin ich stolz.

Grund: Ich nahm einige Optimierungen für die Ladegeschwindigkeit vor. Insbesondere

habe ich die Größe der Grafikdateien (hauptsächlich mit smash.it) minimiert,
setze ich CSS-Sprites ein,
habe ich die JavaScripte zu einem Skript sowie die CSS-Dateien zu einer CSS-Datei sowie einer weiteren für den Internet Explorer bis einschließlich Version 7 zusammengefasst und
komprimiere ich die Dateien mit GZIP.

Hier mal das gekürzte Ergebnis des Geschwindigkeitsberichts von Websiteoptimization.com für Webseiten-Infos.de (Stand: 9. September 2009).

Es handelt sich hierbei um meine freie Übersetzung aus dem Englischen.

Tabelle 1: Geschwindigkeitsbericht der Webseite
URL:	http://www.webseiten-infos.de/
Titel:	Startseite \| Webseiten-Infos.de
Datum:	Bericht vom Mittwoch, 9. September 2009, 19:05:25

Diagnose

Tabelle 2: Allgemeine Statistik
HTTP-Anfragen insgesamt:	9
Größe insgesamt:	30638 Bytes

Tabelle 3: Objektgröße insgesamt
Objekttypen	Größe (Bytes)	Download @ 56K (Sekunden)	Download @ T1 (Sekunden)
HTML:	7523	1,70	0,24
HTML Bilder:	6190	1,43	0,23
CSS Bilder:	5043	1,81	0,83
Bilder insgesamt:	11233	3,24	1,06
JavaScript:	4295	1,06	0,22
CSS:	7587	1,91	0,44
Multimedia:	0	0,00	0,00
Andere:	0	0,00	0,00

Tabelle 4: Externe Objekte
Externe Objekte	Anzahl
HTML insgesamt:	1
HTML Bilder insgesamt:	1
CSS Bilder insgesamt:	4
Bilder insgesamt:	5
Skripte insgesamt:	1
CSS Importe insgesamt:	2
Frames insgesamt:	0
Iframes insgesamt:	0

Tabelle 5: Downloadzeiten*
Verbindungsgeschwindigkeit	Downloadzeit
4,4K	25,55 Sekunden
28,8K	13,67 Sekunden
33,6K	11,98 Sekunden
56K	7,91 Sekunden
ISDN 128K	3,67 Sekunden
T1 1,44Mbps	1,96 Sekunden

* Hinweise (zur Tabelle 5: Downloadzeiten):

Diese Zeiten zum Herunterladen (Downloadzeiten) für ISDN und T1 basieren auf einer vollen Bandbreite.
Die Modemverbindungen (56Kbps oder weniger) sind um einen Paketverlustfaktor von 0,7 korrigiert.
Alle Zeiten zum Herunterladen (Downloadzeiten) beinhalten eine Verzögerung von durchschnittlich 0,2 Sekunden je Objekt aufgrund von Wartezeiten für den Datenverkehr.
Mit insgesamt 9 Objekten für diese Webseite summiert sich das zu einer Verzögerungszeit von 1,8 Sekunden auf.
Nehme zur Kenntnis, dass diese Berechnung der Zeit zum Herunterladen (Downloadzeit) nicht die Verzögerung aufgrund von XHTML-Parsing und -Rendering berücksichtigt.

Tabelle 6: Seitenobjekte
Anzahl	Größe#	Dateityp	URL	Kommentare
9 ^	30638*		Insgesamt (^einzigartige Objekte)
1	7523	HTML	www.webseiten-infos.de	Headergröße = 328 Bytes Gratulation! Diese Datei wurde komprimiert.
1	6208	CSS	2col_right-2009-08-29.css	Headergröße = 346 Bytes Gratulation! Diese Datei wurde komprimiert.
1	6190	IMG	logo0.png	Headergröße = 302 Bytes
1	4295	SCRIPT	quicktags-c-2009-08-19.js	Headergröße = 362 Bytes Gratulation! Diese Datei wurde komprimiert.
2	1858	CSS IMG	feed-icon.gif	Headergröße = 301 Bytes
8	1688	CSS IMG	sprite.gif	Headergröße = 301 Bytes
1	1379	CSS	patch_2col_right_seo.css	Headergröße = 345 Bytes Gratulation! Diese Datei wurde komprimiert.
3	1102	CSS IMG	colors_navibackground.jpg	Headergröße = 302 Bytes
3	395	CSS IMG	feed-newsletter.gif	Headergröße = 300 Bytes

# Gratulation. Diese Website benutzt HTTP-Kompression, auch als GZIP bekannt. Die hier aufgeführten Dateigrößen in Bytes sind für die komprimierten Dateien, die vom Server an den Browser gesandt wurden.

* Alternative CSS-Dateien können in der (X)HTML-Datei verlinkt sein, werden aber derzeit nicht geladen. Sie sind deshalb nicht in die Gesamtgröße der Webseite einbezogen.

Analyse und Empfehlungen

Gesamtzahl HTML – Gratulation, die Anzahl der HTML-Dateien auf dieser Webseite (einschließlich der zentralen HTML-Datei) ist 1. Die meisten Browser können Multithreading. Das Minimieren der HTTP-Anfragen ist der Schlüssel für die Websiteoptimierung.
Gesamtzahl Objekte – Gratulation, die Gesamtzahl der Objekte auf dieser Webseite (einschließlich HTML) ist 9. Das können die meisten Browser in einer akzeptablen Zeit mit Multithreading verarbeiten. Das Minimieren der HTTP-Anfragen ist der Schlüssel zum Minimierung des Objekt-Overheads (siehe Schaubild (Figure) II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets für mehr Details wie der Objekt-Overhead die Wartezeit auf die Webseite beherrscht.
Gesamtzahl Bilder – Gratulation, die Gesamtzahl der Bilder auf dieser Webseite ist 5. Die meisten Browser können mehrere Anfragen senden. Das kann die Anzeige von mehreren Bildern beschleunigen.
Gesamtzahl CSS – Gratulation, die Gesamtzahl an externen CSS-Dateien auf dieser Webseite ist 2. Weil externe CSS-Dateien im Kopfbereich (HEAD) Deines (X)HTML-Dokuments stehen müssen, werden sie geladen bevor irgendein BODY-Inhalt angezeigt wird. Wenngleich sie gecached werden, verlangsamen CSS-Dateien das anfängliche Anzeigen Deiner Webseite. Erinnere Dich daran CSS-Dateien im HEAD und JavaScript-Dateien am Ende des BODY zu platzieren, damit eine schnelle Anzeige erfolgt.
Gesamtgröße – Gratulation, die Gesamtgröße dieser Webseite beträgt 30.638 Bytes. Diese Webseite sollte in 7,91 Sekunden mit einem 56Kbps Modem laden. Basierend auf dieser derzeitigen durchschnittlichen Größe und diesem Aufbau der Webseiten (average web page) sollte Deine Webseite in weniger als 20 Sekunden mit einem 56Kbps Modem laden und den Fortschritt beim Laden anzeigen. Idealerweise sollte Deine Seite in 3 bis 4 Sekunden mit einer Breitbandverbindung laden und das HTML in 8 bis 12 Sekunden mit einem Modem. Natürlich gibt es immer die Möglichkeit von weiteren Verbesserungen.
Gesamtzahl Skripte – Gratulation, die Gesamtzahl der externe Skriptdateien auf dieser Seit ist 1. Externe Skripte werden weniger zuverlässig zwischengespeichert (gecached) als CSS-Dateien. Berücksichtige das beim Zusammenfassen von JavaScript-Dateien zu einer Datei um die Anzahl der HTTP-Anfragen zu minimieren (minimize HTTP requests) oder bette sie in Hochgeschwindigkeitsseiten ein. Das Platzieren externe JavaScript-Dateien am Fußende des BODY und CSS-Dateien in den Kopfbereich (HEAD) ermöglicht das schrittweise Anzeigen von XHTML-Webseiten.
HTML Größe – Gratulation, die Gesamtgröße dieser (X)HTML-Datei beträgt 7.523 Bytes. Das ist weniger als 50 kB. In der Annahme, dass Du für Deine Bilder HEIGHT und WIDTH angegeben hast, erlaubt diese Größe das Anzeigen des Inhalts in weniger als 10 Sekunden. Das ist die durchschnittliche Zeit, die Besucher bereit sind auf die Anzeige einer Seite ohne Rückmeldung zu warten.
Bildergröße – Gratulation, die Gesamtgröße der Bilder ist 11.233 Bytes. Das ist weniger als 50 kB. Selbst mit einer 50 kB großen Seite würde diese Webseite mit einer Verbindung mittels eines 56Kbps Modem in weniger als 20 Sekunden geladen. Idealerweise sollte jedes Bild weniger als 1.160 Bytes benötigen, so dass es einfach in ein TCP-IP Paket passt.
Skriptgröße – Gratulation, die Gesamtgröße aller externer Skripte beträgt 4.295 Bytes. Das ist weniger als 8 kB.
CSS Größe – Gratulation, die Gesamtgröße Deines externen CSS ist 7.587 Bytes. Das ist weniger als 8 kB.
Multimedia Größe – Gratulation, die Gesamtgröße aller externer Multimedia-Datein ist 0 Bytes. Das ist weniger als 10 kB.

Zum Schluss noch vorsorglich folgende ergänzende Hinweise:

Für die CSS- und JavaScript-Datei habe ich eine Versionierung eingeführt. Inzwischen sind neuere Versionen dieser beiden Dateien im Einsatz. Insbesondere die JavaScript-Datei ist durch das Hinzufügen eines weiteren JavaScripts sowie die Erweiterung eines bestehenden JavaScripts größer geworden. Gleichwohl sind weiterhin alle Ergebnisse im grünen Bereich.
Ich habe die JavaScript-Datei nicht am Ende des BODY platziert, da diese dann nicht mehr funktioniert. Vielmehr habe ich nur darauf geachtet, dass zuerst die CSS-Datei(en) geladen werden.
Zum Thema “Die Ladezeit verringern” habe ich einen längeren Artikel in Arbeit, auf den ich hier hinweisen werde, sobald er fertig und online ist.

Kommentare

29. November 2011, Performance-Messung mit GTmetrix | Webseiten-Infos.de schreibt: [...] hierzu meine Blogbeiträge “Ladezeit von Webseiten-Infos.de” und “Geschwindigkeitsmessung mit Pingdom [...]

Little Boxes Teil 1 von Peter Müller (2. Auflage)

Dieter — Sat, 03 Oct 2009 20:46:48 +0000

Die 1. Auflage des Buches “Little Boxes Teil 1″ von Peter Müller habe ich hier bereits vorgestellt (siehe hierzu meinen Blogbeitrag “Little Boxes Teil 1 von Peter Müller“).

Seit dem 9. Juli 2009 gibt es die 2. Auflage dieses Buches zur Vermittlung der Grundlagen des Gestaltens von Webseiten mit (X)HTML & CSS. Ich hatte Interesse an einem Rezensionsexemplar angemeldet und gehörte zu den Glücklichen, die es kostenlos erhalten haben (siehe hierzu meinen Blogbeitrag “Little Boxes Teil 1 2. Auflage zur Rezension erhalten“).

Gerald Brozek erhielt ebenfalls ein kostenloses Rezensionsexemplar und veröffentlichte in seinem Weblog auf hyperkontext.at bereits eine hervorragende Buchrezension zu Little Boxes, Teil 1 (2. Auflage). Da

diese nicht zu toppen ist,
sie von mir geteilt wird und
ich nicht einfach abschreiben möchte,

verweise ich hierauf,
empfehle sie zu lesen und
werde sie hier lediglich ergänzen.

Dann wollen wir mal zu meinen Ergänzungen kommen:

Obwohl ich schon von der ersten Auflage des Buches begeistert war, schaffte es Peter Müller durch Aktualisierungen und Ergänzungen den Nutzwert dieses Buches noch weiter zu erhöhen.
Neu gegenüber der 1. Auflage sind insbesondere
- die beigefügte CD-ROM, die unter anderem die Beispielsdateien und Ausschnitte des Videotrainings von Little Boxes Teil 1 und 2 enthält,
- die Referenzkarte mit Box-Modell, den wichtigsten HTML-Elementen und -Attributen sowie den wichtigsten CSS-Eigenschaften und -Selektoren (ausgesprochen praktisch für das schnelle Nachschauen),
- die bildliche Darstellung des Schichtenmodells (Seite 34),
- hilfreiche Verweise auf Little Boxes Teil 2 (etwa auf den Seiten 50, 72, 140, 142, 202, 242),
- der Hinweis, dass der Internet Explorer 8 (IE8) das Pseudoelement :after kennt.
Peter Müller weist auf typische Fehlerquellen hin. So hilft er dem Anfänger diese erst gar nicht zu machen. Beispiele:
- Für die Schriftfarbe wird text-color oder font-color statt color verwendet (Seite 101).
- Das Schließen der geschweiften Klammer beim Schreiben von Styles in der CSS-Datei wird vergessen (Seite 101).
- Bei der Gruppierung von Selektoren darfst Du das Komma zwischen den einzelnen Selektoren nicht vergessen (Seite 122).
- Bei CSS steht zwischen dem Wert und einer Maßeinheit keine Leerstelle (Seite 131).
- Werte werden bei CSS – im Gegensatz zu (X)HTML – nicht in Anführungsstriche gesetzt (Seite 132).
Auch in der neuen 2. Auflage wird nicht auf die zusätzlichen Möglichkeiten von und mit CSS3 eingegangen. Das ist aber gut so. Zum einem sollen in diesem Buch (Teil 1) die Grundlagen vermittelt werden (und nicht mehr). Und zum anderen würde das Einsteiger mehr verwirren als ihnen das Lernen und Verstehen erleichtern. Im weiterführenden Teil 2 der Reihe Little Boxes gibt es dann auf den Seiten 258 f. auch einen Hinweis auf runde Ecken mit CSS3.
Gelungene Erweiterung gegenüber der Vorauflage stellen
- die Erläuterungen der vier Methoden zum Einschließen von Floats (Clearing) in Kapitel 14 (Seiten 267 – 288) sowie
- die Ausführungen zu mehrspaltigen Layouts in Abschnitt V (Seiten 289 – 361) dar.
Vermisst habe ich aber auf der Seite 355 den expliziten Hinweis, dass auch bei einem korrekten XML-Prolog der Internet Explorer 6 (IE6) in den sogenannten Quirks-Modus (Pfusch-Modus) versetzt wird und dann der IE6 das falsche Boxmodell verwendet. Implizit ergibt sich das jedoch aus den Ausführungen auf der Seite 48 f. Dort wird darauf hingewiesen, dass der DOCTYPE in der allerersten Zeile stehen muss.

Ausblick und Wünsche

Peter Müller hat im Interview mit Gerald Brozek eine Website zum Buch (little-boxes.info) avisiert. Hoffentlich ist sie im Gegensatz zum Buch in Farbe. Das wäre auch mein Wunsch für die nächste Auflage des Buches.
Und dann ist da noch mein Wunsch, dass es auch einen Teil 3 der Reihe Little Boxes zu PHP, .htaccess, MySQL (SQL Dumper) und mehr geben wird.

Mein persönliches Fazit:

Ich hätte mir viele Nachtsitzungen mit zeitaufwändigem Ausprobieren mittels Versuch und Irrtum (try and error) ersparen können, wenn es damals bereits Little Boxes Teil 1 gegeben hätte. Dieses Buch zum Erlernen von (X)HTML und CSS war und ist nach meiner Meinung weiterhin das mit Abstand pädagogisch und inhaltlich beste Buch um (X)HTML und CSS zu lernen.

Sehr lesenswert sind auch die Beiträge im Blog von little-boxes.de.

Zum Schluss hier noch der Link zur Buchseite bei Amazon:

Little Boxes, Teil 1

Peter M. Müller. Markt und Technik 2009, Broschiert, 381 Seiten, € 24,95

Code anzeigen mit CodeColorer

Dieter — Wed, 02 Sep 2009 05:35:24 +0000

Seit gestern setze ich hier für das Anzeigen von Code(schnippseln) nur noch das WordPress-Plugin CodeColorer ein.

Ursprünglich verwendete ich das Plugin FV Code Highlighter (siehe hierzu meinen Blogbeitrag “Plugin FV Code Highlighter“) und später ergänzend bei Darstellungsproblemen CodeColorer ein (siehe hierzu meinen Blogbeitrag “Code anzeigen in WordPress“).

Folgende Gründe waren für mich für diesen vollständigen Plugin-Wechsel ausschlaggebend:

Das “Und-Zeichen” & wird bei FV Code Highlighter als HTML-Entity & dargestellt.
CodeColorer beherrscht das valide Einfügen von Zeilennummern für den Code. FV Code Highlighter kennt keine Zeilennummern und das von Ute eingesetzte WordPress-Plugin Highlight Source Pro kann zwar Zeilennummern einfügen, aber dann ist der Code nicht mehr valide.
Bei CodeColorer konnte ich durch leichte Anpassung (Modifizierung) des Plugins den CSS-Code in meine bestehende CSS-Datei integrieren. Das ist bei FV Code Highlighter nicht so einfach möglich. Zudem schreibt FV Code Highlighter CSS-Code in den Kopfbereich (Header) und nicht als externe Datei. Das ist für die Ladegeschwindigkeit (Sitchwort: Caching) suboptimal.
CodeColorer setzt auf das HTML-Element für Quelltext (Quältext) auf und benutzt gegebenenfalls eigene Ergänzungen dazu. FV Code Highlighter verwendet dagegen eine eigene Syntax {code} mit eigenen Ergänzungen. Die Verfahrensweise bei CodeColorer dürfte zukunftssicherer sein, da sie auf einem bestehenden HTML-Element beruht.


Den Vorteil von FV Code Highlighter, das es standardmäßig bereits die Farben (Colorierung) des von mir genutzten Webeditors Dreamweaver für den Code einsetzt, werde ich hoffentlich durch entsprechende Anpassungen des CSS-Codes für CodeColorer auch noch hin bekommen.
Also bitte nicht wundern, wenn sich in nächster Zeit die Farben des Codes bei den Codeschnippseln noch ändern.  
Ähnliche Beiträge
Code anzeigen in WordPress
Plugin FV Code Highlighter
Archiv- und Suchergebnisseiten mit Kommentarfunktion
WordPress-Plugin YARPP macht Probleme
Artikel mit gleichen Schlagwörtern zeigen
Copyright © 2010 Dieter Welzel
Dieser Feed ist nur für den persönlichen, nicht gewerblichen Gebrauch bestimmt.
Eine Verwendung dieses Feeds auf anderen Webseiten verstößt gegen das Urheberrecht. Wenn Sie diesen Inhalt nicht in Ihrem News-Reader lesen, so macht sich die Seite, die Sie betrachten, der Urheberrechtsverletzung schuldig. (digitalfingerprint: bbd2a4c375bd3a68829f8cc22c8ac04d (38.107.179.230) )
Permalink |
Kein Kommentar |
Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena

Schlagwörter: CodeColorer, CSS, FV Code Highlighter, Ladezeit, Plugins, Quelltext, WordPress



Und der Gewinner des Buches ist…
Dieter — Sun, 30 Aug 2009 08:00:08 +0000
Thomas Weise
Herzlichen Glückwunsch! Ich wünsche Dir viel Spaß mit dem und Nutzen durch das Buch!
Eine Mail mit der Bitte mir die Anschrift mitzuteilen, wohin er das Buch CSS-Layouts – Praxislösungen mit YAML von Dirk Jesse (1. Auflage, 2007) gesandt haben möchte, geht gleich raus.
Seiner Anregung entsprechend habe ich zwischenzeitlich auch die Kategorie Webdienste weiter “befüllt” und finden sich dort nun zwei weitere Blogbeiträge. Und weitere Blogbeiträge für diese Kategorie werden selbstverständlich folgen.
Obwohl Thomas das Layout übersichtlich findet, habe ich noch etwas daran “geschraubt” (siehe hierzu auch die Blogbeiträge “Artikel mit gleichen Schlagwörtern zeigen“, “PNG-Logo auch für den IE 6“, “JavaScript für Feedburner entfernt” und “Neues Layout für Handy und PDA“). Ich hoffe, es gefällt Dir und den anderen Besuchern. Konstruktive Kritik nehme ich gerne jederzeit entgegen.
Vielen Dank für die Kommentare zum Blogbeitrag “Verschenke Buch CSS-Layouts von Dirk Jesse” und die Teilnahme.
Kommentare
31. August 2009, Thomas Weise schreibt: He, na das nenn ich ja mal nen guten Wochenstart!
Ich bedanke mich schon mal für das Buch und wünsch Dir weiterhin so viel Spaß mit dem Blog.
Ich komm gern hier her und finde, wie gesagt, die Rubrik 'Webdienste' sehr gelungen.
Mach bitte weiter so!
31. August 2009, Dieter schreibt: @Thomas
Da Du mir die Versandadresse bereits mitgeteilt hast, geht das Buch heute noch zur Post.

Webseiten werden für Besucher gemacht.
Ich bin deshalb für jede Rückmeldung dankbar.
Die Kategorie WordPress wird bestimmt schon allein aufgrund der Vielzahl an Updates und Sicherheitslücken weiterhin die meisten Blogbeiträge aufweisen, aber die Kategorie Webdienste soll auch in Zukunft mit Infos zu interessanten Online-Tools weiter wachsen.
Ähnliche Beiträge
Das WordPress-Buch von Bültge/Boley ist erschienen
Little Boxes Teil 1 2. Auflage zur Rezension erhalten
Little Boxes Teil 1 von Peter Müller (2. Auflage)
HTML5: Browser-Unterstützung prüfen
Suchmaschinenoptimierung von Jan Winkler
Copyright © 2010 Dieter Welzel
Dieser Feed ist nur für den persönlichen, nicht gewerblichen Gebrauch bestimmt.
Eine Verwendung dieses Feeds auf anderen Webseiten verstößt gegen das Urheberrecht. Wenn Sie diesen Inhalt nicht in Ihrem News-Reader lesen, so macht sich die Seite, die Sie betrachten, der Urheberrechtsverletzung schuldig. (digitalfingerprint: bbd2a4c375bd3a68829f8cc22c8ac04d (38.107.179.230) )
Permalink |
2 Kommentare |
Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena

Schlagwörter: Bücher, CSS, Layout, WordPress, YAML, YAML Green




Gewinnchance endet am 29. August 2009
Dieter — Mon, 24 Aug 2009 23:21:07 +0000
Anlässlich meines hundersten Blogbeitrags besteht die Chance ein Buch zu gewinnen.
Teilnehmen kannst Du noch bis einschließlich Samstag, den 29. August 2009. Danach verlose ich das Buch.
Näheres dazu findest Du in meinem Blogbeitrag “Verschenke Buch CSS-Layouts von Dirk Jesse“.
Ähnliche Beiträge
Verschenke Buch CSS-Layouts von Dirk Jesse
Das WordPress-Buch von Bültge/Boley ist erschienen
Geschwindigkeitsmessung mit Pingdom Tools
Firefox 3.5.2 steht zum Download bereit
Mail-Abos für Kommentare sind weg!
Copyright © 2010 Dieter Welzel
Dieser Feed ist nur für den persönlichen, nicht gewerblichen Gebrauch bestimmt.
Eine Verwendung dieses Feeds auf anderen Webseiten verstößt gegen das Urheberrecht. Wenn Sie diesen Inhalt nicht in Ihrem News-Reader lesen, so macht sich die Seite, die Sie betrachten, der Urheberrechtsverletzung schuldig. (digitalfingerprint: bbd2a4c375bd3a68829f8cc22c8ac04d (38.107.179.230) )
Permalink |
Kein Kommentar |
Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena

Schlagwörter: Bücher, CSS, Gewinnchance, Layout, WordPress, YAML, YAML Green




Checkbox-Problem mit IE und Opera
Dieter — Sat, 22 Aug 2009 19:53:28 +0000
Die Gestaltung von Formularen in den verschiedenen Browsern ist für mich immer noch eine Herausforderung.
Aktuell hatte ich ein Problem mit der Darstellung von Checkboxen im Opera und Internet Explorer 8 (IE8).
Die Vorgängerversionen des Internet Explorers (IE) waren nicht betroffen, da ich für diese Browser eine eigene CSS-Datei mittels bedingtem Kommentar (Conditional Comment) bereitstelle. Dort habe ich für Checkboxen mit den IDs subscribe, linksnewwin und copy folgende CSS-Regel geschrieben:
1
2
3
4
5
6
7
#subscribe, 

#linksnewwin, 

#copy {

border: 0;

padding: 0;

background-color: transparent;

}
Auf diese Weise konnte ich vermeiden, dass beim Internet Explorer 5 bis 7 (IE5-7) um die Checkbox herum ein Rahmen dargestellt wird. Ursächlich für den Rahmen um die Checkbox beim Internet Explorer (IE) ist übrigens die Vererbung von border: 1px etc bei input auf die Checkboxen. Die anderen Browser zeigen dagegen keinen Rahmen um die Checkboxen an. 
Der Internet Explorer 8 (IE8) soll CSS 2.1 vollständig und richtig umsetzen. Deswegen habe ich die Patch-Datei mit dem bedingten Kommentar (Conditional Comment) auf die früheren Versionen des Internet Explorers (IE) beschränkt gehalten. Für die Darstellung der Icons hinter externen Links, die über zwei Zeilen gehen, sind erfreulicherweise auch tatsächlich die Darstellungsprobleme der Vorgängerversionen verschwunden.
Die Folge ist aber, dass der Internet Explorer 8 (IE8) dafür die Checkbox mit einem Rahmen herum darstellt. Das sieht dann so aus:

Deshalb schrieb ich obige CSS-Regel auch in meine CSS -Datei für alle Browser. Das brachte den gewünschten Erfolg beim Internet Explorer 8 (IE8). Denn nun sah die Checkbox dort wie folgt aus:

Soweit, so gut. Ich hatte aber die Rechnung ohne den Opera gemacht. Dieser Browser verhält sich zumindest in der aktuellen Version 9.6.x anders als Firefox, Safari, Google Chrome etc. Denn border: 0 für die Checkbox sorgt beim Opera dazu, dass ein gesetztes Häckchen fast nicht mehr erkennbar ist. Die Folge: Ein Zugänglichkeitsproblem. So sieht es dann im Opera aus:

Recherchen mit der Suchmaschine meines Vertrauens führten mich dann zu einem Thread im CSS XHTML-Forum. Die Schlussfolgerung daraus: Man muss dem Opera in diesem Fall einen Innenabstand (padding) für die Checkbox geben, damit das Häckchen wieder zu sehen ist. Das habe ich dann mit padding: 7px getan, aber dadurch sah die Checkbox ausschließlich im Opera üderdimensioniert aus. Nämlich so:

Das wollte ich aber meinen Besuchern mit dem Browser Opera nicht zumuten. Also was tun?
Eigentlich ist ja der Internet Explorer 8 (IE8) “schuld”, da er im Gegensatz zu den anderen Browsern (Opera, Firefox, Safari, Google Chrome) einfach diesen unschönen  Rahmen um die Checkbox macht. Also beschloss ich alles wieder so zu machen wie vorher. D.h. nur der Internet Explorer 5 bis 7 (IE5-7) bekommen für Checkboxen border: 0 über eine CSS-Datei mittels Conditional Comment und der Internet Explorer 8 (IE8) stellt halt einen hässlichen Rahmen darum dar.
Dafür sehen die Checkboxen im Opera wieder “normal” aus:

Mein Resümee:

Webseiten sind keine Gemälde.
Webseiten müssen nicht in allen Browsern gleich aussehen.
Wenn eine unschöne Darstellung in einem Browser nur auf Kosten der Darstellung in einem anderen Browser behoben werden könnte, dann belasse ich die unschöne Darstellung beim verursachenden Browser.
Der IE8 bekommt von mir keine extra CSS-Regeln in einer eigenen CSS-Datei mittels Conditional Comment.

Nachtrag vom 20. September 2009:
Mit folgendem Conditional Comment (CC) im Kopfbereich (Header) wäre der Rahmen um die Checkboxen auf Webseiten-Infos.de auch beim Internet Explorer 8 (IE8) nicht mehr zu sehen.
1
2
3
4
5
6
7
8