Es ist nicht der gemeinsame kleinste Nenner der Webdesign vorantreibt. Es wird der gemeinsame kleinste Nenner bedient. Das ist ein gewaltiger Unterschied, den die Redmonder so langsam doch begreifen wollen.

Langer Rede kurzes Zitat:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Quelle: MSDN.com IE-blog: Microsofts interoperability principles and IE8 via einfach für alle

Good decision!

1. 70 Expert Ideas For Better CSS Coding
2. 53 CSS-Techniques You Couldn’t Live Without vom letzten Jahr
3. Und 50 Powerful CSS-Techniques For Effective Coding in diesem Jahr
4. Chic Chic, 32 Tipps zur Gestaltung von Tabellen
5. 25 Linktipps: CSS für Formulare

Mit bester Empfehlung des Smashing Magazins.

[Nachtrag]

1. Teil: 101 CSS techniques of all times
2. Teil: 101 CSS techniques of all times

Nun kann man sich frage wer von wem … baer generell gilt, dass diese Links im Netz schwirrenudn wer seine Bookmarks einmal leert wird vermutlich ähnliche Listen zusammenstellen können. Einiges ist definitiv doppelt, das bleibt nicht aus. Ein Dankeschön geht also auch an Noupe.com für die Zusammenstellung.

[/Nachtrag]

Was den @import ./. link des Stylesheets anbelangt, so ist das Argument der alten Browser reichlich hinfällig. Wo in der freien Netzwelt wird der Netscape 4 noch verwendet? Allenfalls die Möglichkeit ältere CSS-Versionen vorrätig zu halten, wie z.B. Saisonale Stylesheets , und für alle HMTL-Template diese an einer Stelle auszutauschen überzeugen mich vom @import, wobei es auch ein umtaufen der Stylesheets täte …

In Bezug auf den @import url(style.css) ist die Liste @import-Hacks sicher von Interesse.

Generell gilt, je weniger Hacks, desto besser.

via Vandelay Design Weekly Links

Nachtrag: Hacks:

• Die 10 besten CSS-Hacks
• 7 CSS Hacks die man verwenden sollte

Wenn man meint es zu brauchen … ich persönlich verzichte lieber auf Hacks und suche alternative Lösungen ohne Hack. Nur manchmal … manchmal eben

Excessiv: Übersicht der Methoden für runde Ecken … (Bestandteil der Liste oben. Aber gesondert erwahnenswert, wei ich finde.)

Ich ich bin noch am Ordnen und Sortieren meiner Feeds und der extrem vielen Tipps darin. Es sind so viele, dass ich primär hier einen Washout mache. Es folgen in Kürze weitere Listen nach Themen sortiert. Nicht verzweifeln … ich habe sie auch nur grob gescannt und was mir nützlich erschien auf die Platte gezogen und vermutlich wandert es unsortiert auf eine CD. Ich muss dringend meine Spielwiese auf Vordermann bringen, denn nur so werde ich die vielen, vielen Techniken und Tipps auch abrufbar haben. Aber immerhin ich habe es gesehen und wenn es CSS ist, dann wird mir dieser Beitrag helfen, es wieder zu finden. Sind ja nur rund 150 Links Um eine kleine Vorstellung zu haben: Ich hatte heute ca. 200 Fenster offen und zuletzt im Feedreader 150 Beiträge auf “Keep new” ohne ansurfen … Ich nenn das den totalen Overload und ich erinnere mich, warum ich den Feedreader zuletzt nur noch selten aufgesucht habe. Ich fühlte mich von der Menge schlicht erschlagen. Nicht mangelnde Güte der Beiträge machte mir zu schaffen, sondern die Beiträge so für mich zu verarbeiten, dass ich mit der Info noch etwas anfangen kann. Leiden wie gemeinsam.

Angesichts der hohen Qualität des Opera-Browsers kann ich eine Meldung bezüglich mangelnder Kompatibilität nur als mangelnde Befähigung des Verantwortlichen für die Site des BMW-Konzerns interpretieren. Ich hätte nicht gedacht, dass mir heute noch mit dem Opera auf nur einer Site, die auf sich was hält, jener alte Schwachsinn oder Ahnliches begegnet:

Zugegeben: BMW schließt die Opera-User nicht aus, wie das die Grafik vermuten lässt, sie informiert nur den Opera-User über Inkompatibilität und überlässt es im weiteren dem Opera User, ob er den Browser wechselt oder austestet wie schlecht oder gut die Site wirklich programmiert ist.

Ich habe den Browser übrigens gewechselt, weil der Firefox seit geraumer Zeit ziemlich mies in der Performanz ist und ich Java und Flash mit dem FF meide und lieber mit dem Opera solche Seiten aufsuche. Der Opera setzt seltener aus. Den IE setze ich für’s surfen nur im Notfall ein. BMW fällt nicht unter die Kategorie Notfall. Ich überlege noch, ob ich nach diesem Blogeintrag mir die BMW-Seite noch antun will oder nicht. Ich tendiere zum “oder nicht”!

Wie bei einer Flashsite so üblich keine Direktverlinkung möglich, was aber nicht das schlimmste Übel ist, denn das Formular hielt dem Screenshot 1024×768 nicht stand:

Wie man nur unschwer erkennen kann ist nun der Sendbutton hinterm Horizont verschwunden. Auch wenn ein Klick auf das kleine Hochhaus neben dem spitzen Hochhaus vermutlich die Sendefunktion noch beinhaltet, so ist das Formular damit im Grunde untergegangen. Hier fehlt für kleinere Auflösungen definitiv eine Skrollfunktion oder aber (schließlich ist es eine Flashsite) ein Zoomfaktor.

Wie dem auch sei, das Formular selbst in seinem schlichten gezeichneten Stil ist etwas, das man wohl getroßt auch ins eigene Repertoir aufnehmen kann. Auch Packpapier bzw. brauner Zeichenkarton als solches ist nicht so ungewöhnlich, dass man sich schämen müsste, macht man ein eigenes Design damit. Zeichenelemente als solches sind auch nicht so abwegig. Allein die Idee des gebastelten Kindertheaters mit den Wolken am Bändel und das ganze drum und dran, ist so unique und schön, es fiele mir nicht im Traum ein, das zu plagiatieren. Das finde ich einfach klasse. Fast perfekt, sieht man einmal vom Umstand ab, dass es eine Flashsite ist. Ja dem einfachen HTML fehlen schnickschnack Überblendungen. Ja, ich weiß der IE hat welche in seinen proprietären Filtern … proprietär zählt nicht. Crossbrowser ist da nichts. Allenfalls via Javascript und da durchaus auch als barrierearmes DOM-Scripting möglich und crossbrowserfähig. Damit behält man seinen maschinenlesbaren, marked up Text und kann, wenn man nicht gerade heftig in die Ajax-Kiste greift die Browserhistory erhalten, Bookmarking und Deeplinking erhalten, eben all die Dinge, das Web so stark mit einander vernetzt und kommunikativ macht. Auf diesen Wasserwabble-Effekt (der vermutlich fertig in der Flashbibliothek rumtreibt) muss man mit Javacript nicht verzichten, das ist machbar, alles was es braucht, ist ein verdeckendes, transparentes DIV mit einer horizontal gekachelten Wellengrafik, die sich nach unten aus dem Screen bewegt und dabei die CSS-Position der Hintergrundkachel in der horizontalen vorwärtsschiebt. Relativ einfache Übrung für geübte Javascriptler. BTW: auch die Wolken sind denkbar einfach im barrierenarmen DOM und JS und können bei PNG mit Alphatransparenz effektvoll vor und hinter der Goldengate-Bridge vorbei wandern.

Ich hatte schon den Conditional Comment bei meinen Sites im Einsatz und in 90% der Fälle genügte es den conditional comment, der den IE generell ansprach abzuändern, so dass er nur noch IE der älteren Version kleiner 7 ansprach und die Site wurde dargestellt wie sie sollten. Die restlichen 20% erhielten ein neues Stylesheet, das mit zwei drei Zeilen die Problemchen des IE7 adressierte.

Aus dem Malheur mit den Hacks zu lernen und stärker auf conditional comments zu setzen, traut Microsoft den Webdeisgnern nicht zu. Ergo frieren sie die Entwicklung für alle ihre Browser standardmäßig ein und machen die Weiterentwicklung zur Ausnahme, die expressis verbi speziell per meta-Tag angefordert werden muss. Ich denke ich werde wie in dem neuen Artikel auf A List Apart von Jeremy Keith “They shoot browser, don’t they?” per default IE=edge wählen, so dass ich eine Site nur dann anfassen muss, wenn in Redmond mit dem neuen Browser der Standard wieder einmal gebrochen wird und ich per ‘conditional comment’ für diesen einen Browser Sonderkonditionen definieren darf.

Schließlich wird Mircrosoft auch in Zukunft mit den IE ein Stück Software haben, das mit dem zurecht kommen muss, was wir Webdesigner liefern. Wenn ich per DocType-Deklaration einen gängigen Standard vorgebe mit dem ANY BROWSER zurecht kommen sollte, dann erwarte ich, dass neue Generationen das tun. Das Mehr, das Neue, das Avangardistische in neuen Browsern, wie es immer noch der ‘inline-block’ darstellt, den ich erst so langsam über -moz-gedöns (display:-moz-inline-stack;) im Stylesheet einführen kann man immer noch in separaten Stylesheets via conditional comments einführen, zumindest solange bis die Anweisung in allen gängigen Browsern verstanden wird.

Soweit es mich betrifft ist in Opera und Firefox und Safari der conditional comment längst überfällig. Es ist ja nicht so, dass diese Browser in allen Dingen perfekt sind.

Dem Plugin Thickbox fehlt an dieser Stelle eine Verwaltung, die die zusammengehörigen Bilder in einer Tabelle sammelt und per Ajax zum Blättern anbietet.

Jetzt fehlt noch ein Programmierer, der seine Zeit opfert. *unschuldig guck*

Zugegeben, dem more-Problem könnte man mit folgender Lösung begegnen:

<?php if (!is_single()){ ?> <a href="Link zum Bild" rel="serie-x" title="Bildtitel"> class="thickbox"<span class="hide"> </span></a> ... <?php }?>

Vorausgesetzt natürlich man ist firm genug mit PHP, dass man es wagen kann PHP in Beiträgen zuzulassen. Ich habe die Variante noch nicht getestet, doch wenn Conditional Tags funktioniert wie auf der Seite beschrieben, dann müsste es funktionieren. Dies löst das Problem mit <––more––>. Es ist nicht umsetzbar sämptliche Bildserien auf diese Weise in Beiträge unterzubringen, d.h. vermutlich schon, wenn man so diszipliniert ist, diese Liste separat zu führen und jeweis in den conditional tag per Copy&Paste klatscht.

Hier Bilder aus der KategorieFrüchte und Gemüse D – M auf imagefreedom.org ( Food D – M)

Kiwano Melon

175 x 160 Pixels

Limone

300 x 265 Pixels

Feigen

247 x 164 Pixels

Und so wirds gemacht:

HTML Definitionsliste in den Beitragspost

<dl class="galerie">
  <dt><span><img src="..." alt="" /></span>Bildtitel</dt>
  <dd>Bildbeschreibung</dd>
</dl>

CSS-Eigenschaften für das Stylesheet des Themes Gespaa

dl.galerie
{
border: 1px solid #7a8a99;
background-color: #eff0f2;
width: 142px;
text-align: center;
padding: 5px;
position: relative;
float: left;
margin-right: 10px;
}

dl.galerie dt {font-weight: bold; text-align: center;}

dl.galerie dt span
{
display: block;
text-align: center;
margin: auto;
border: 1px solid #7a8a99;
width: 130px;
height: 130px;
overflow: hidden;
}

dl.galerie dt span img {
  margin: auto;
}

dl.galerie dd
{
margin: 0;
padding: 0;
text-align: center;
}

Das Gespaa bietet in meiner modifizierten Form im Post-Bereich eine Breite von 524px, daraus ergab sich die Breite der Liste und der Abstand zu einander. Hier muss ggf. in Gespaa-Themes mit Sidebar noch nachgefeilt werden.

Und dass das Bild schon einmal den Rahmen sprengen würde sieht man an der Limone:

Die Limone wurde mit margins im <img ...>-Tag per Inlinestyle passend ins <span>-Passpartout gerückt.

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Quelle: Min-Height Fast Hack (vom 21.9.2005) im Blog von Dustin Diaz

Min-width

selector {
  min-width:500px;
  width:auto !important;
  width:500px;
}

… und IE7 kommt damit gut zurecht. Da werde ich in meiner aktuellen Arbeit an einigen Stellen die IE-behaviour im IE-Sheet wieder rauswerfen. Viel zu schnell übersieht man dort die Angaben und vergißt diese mit abzuändern, wenn sich was ändert.

via stylephreak Anthony Eggert, der aktuell sein Weblog neu aufsetzt und viele alte Artikel in der neuste-Artikel-Spalte hat.

Übrigens musste ich feststellen, dass die Lightbox-Technik meinen Surfstil mit “öffnen im nächsten Tab” beeinträchtigt. Sein CSS-Only-Menu verliert dabei das CSS (diese Javascriptlinks sollten gekennzeichnet sein. Hmpfh)

Und bei der Gelegenheit habe ich auch noch einmal das Template überarbeitet. Warum mir das Templatesystem so gut gefällt, ist an dem Beispiel schön zu sehen:

Der Screenshot zeigt wie beim Skrollen der Text unter dem Header verschwindet. Wer das Fenster noch weiter verkleinert, z.B. eine Fensterbreite von 800 Pixel verwendet, der entdeckt, dass das Logo in den Wipfeln der Palme ruht.

Wer hier erst einmal den Dreh raus hat, kann die Dekor-Elemente vollkommen frei im Fenster verteilen und die Dekor-Elemente auch in Bezug zu anderen Elementen setzen. Zugegeben, in diesem Fall war ich was das in Bezug setzen betrifft nicht sehr penibel, denn wer die Schrift in Browsern wie den Firefox um zwei Schritte Vergrößert, der sieht das Ende der Hauptnavigation hinter der Palme hervorblitzen und dies wird mit jedem weiteren Schritt gravierender.

Andereseits, wird es nicht viele Nutzer geben, die mehr als zwei Schritte verwenden. Und die Seite wurde als privat deklariert. Das heißt, dass ich hier und da schon einmal auf den Nutzer preife, wenn dieser mit einem Browser bzw. Browsereinstellungen ankommt, die sich mit dem Design der Site nicht vertragen. Einmal vom Mac-Safari und dem Giftgrün abgesehen, liegt dieser Prozentsatz unter Null. Damit kann ich leben.

Nicht dass ich nicht immer noch der Überzeugung bin, dass “position: absolute” laut W3C genau so funktioniert und mein CSS in dieser Beziehung (k)einen Fehler (je nach Hoster ) aufweist, doch wurde gestern ein Template nach abgeschlossener Entwicklung auf den 1&1-Server meines Kunden geladen und plötzlich gilt diese Regel nicht mehr. Was zum Henker stellt 1&1 auf seinen Servern an, dass plötzlich zwei absolut übereinenander gelegte HTML-Elemente gegeneinander verschoben sind, Standards ihre Gültigkeit verlieren? Und etwas das im Browser (also beim Client auf dessen lokalen Rechner) interpretiert wird, nun vom Hostingplatz abhängig ist.

Logisch, dass 1&1 das Problem beim Designer sieht und ich meine Zeit und meine 14ct/Min nutzlos verschwendet habe. Ich bin fassungslos und reichlich irritiert! Ich habe dank des zeitnahen Hinweises von Mathias Bank (Co-Producer in diesem Projekt), in diesem Fall für 1&1 exklusiv die Positionsanweisung für das zweite Element herausgenommen. Dies müsste eigentlich zu einem Darstellungsfehler führen … zumindest auf jedem anderen Hosting-Platz und ich bin bespannt, wann dies auch bei 1&1 der Fall sein wird. Ich bin im Moment nur froh, dass ich kaum Kunden bei 1&1 habe, denn es erspart Diskussionen mit meinen Kunden, wenn von heute auf morgen die Darstellung der Website zerschossen ist, weil Designregeln wieder gelten.

Zunächst hatte ich ein wenig Probleme mit den IE6, da ich “display: none” der Eigenschaft “visibility: hidden” den Vorzug gab. Alles weitere auf der Demoseite.

Da die Seite mit dem Rahmendesign nicht mehr das Listenkriterium erfüllt wird es nicht in der Auswahl angezeigt.

Sollten Kunden nun probeweise allerdings das Template wechseln, dann können sie diese Einstellung nicht mehr rückgängig machen. Diese Spezialeinstellung kann derzeit nur über den Text-Editor und ftp erreicht werden. Eine entsprechende Verwaltung im Backend für tpl-Files im Template-Ordner ist in Planung.

Nichts desto trotz ein lustiger Web-Tipp für alle, die sich jetzt eine Seite per Onlineformular zusammenbasteln wollen:

Positioning is everything: CSS Source Ordered Variable Border 1-3 Columned Page Maker

Etwas lästig bei diesem Formular ist noch, dass es keinen Colorpicker hat, mit dem man die Farbe per Mouserclick eingeben kann.

Achja: Es ist auch ein guter Weg sich mit CSS und Templates vertraut zu machen.

Merci Esim.

Aber den Firebug zog ich mir und schaute rein.

Meine letzte Arbeit damit einmal angesehen. Ohoh! Was der Firebug hier durchstreicht, hat absolut seinen Sinn und sollte nicht gestrichen sprich gelöscht werden.

Ich würde sagen, auch der Firebug ist nur so gut wie der Profi, der ihn nutzt. Es ist kein Amateur-Tool, das einem das Lernen der Zusammenhänge erspart.

Insgesamt ist der Firebug allerdings ein schönes Werzeug um sich in Webskripts und Seitenbeschreibungen zu orientieren und vermutlich für die Suche nach Fehlern mehr als hilfreich. Danke, Mathias.

Ich benötigte recht lange und viele Versuche und dabei entdeckte ich eine viel bessere Möglichkeit parallel die PHP-Ausgabe im Auge zu behalten und gleichzeitig die Funktion in der Seite zu testen, was bei einem CSS-Aufklappmenü, um das es ging und das den aktuellen Pfad jeweils durch nette kleine Pfeile anzeigen sollte. Ich hatte am Ende zwei Fenster offen. Die Seite selbst und das Quelltextfenster des Firefox. Im Quelltext hatte ich Kommentare mit den PHP-Augaben. Ich konnte also eine ganze Menge unterbringen und der Array wird dabei auch untereinander geschrieben.

Statt:

1. echo "<pre>";
2. print_r($Mein_Array);
3. echo "\$meine_Variable $meine_Variable \n";
4. echo "</pre>";

besser:

1. echo "<!--\n";
2. print_r($Mein_Array);
3. echo "\$meine_Variable $meine_Variable \n";
4. echo "\n//-->";

So kann man zig Sachen ausgeben und stehen lassen und gleichzeitig die Ausgabe der Seite prüfen, ohne dass diese zerschossen wird.

Als gestern durch eine zu scharf gestellte PHP.ini die Ausgabe des Templaterie-Shop verhindert wurde, ersetzte ich den Programmteil (tc-randomizer in einer Mehrfach-Installation mit diversen Pfadanpassungen) der nach der Servermodernisierung nicht mehr funktionierte durch einen Kommentar “Wegen Wartungsarbeiten deaktiviert.” und ließ mir alles in einem HTML-Kommentar ausgeben, was hier an Variablen und Arrays verwendet wurde. So war der Fehler schnell gefunden und in der Zeit als ich nach der Ursache forschte blieb der funktionierende Teil einschließlich der Darstellung intakt. Wer schaut schon in den Quelltext was hier an Kommentaren zu finden ist. Der Prozentsatz ist verschwindend klein und wenn man den Fehler behoben hat, kann man diese Kommentare wieder herausnehmen … wobei ich glaube, ich habe diese sogar noch drin (jupp, habe ich — ich meine dringelassen aber eingeschlossen in /**/ und damit wird es nicht ausgeliefert. Wer jetzt also im Quelltext nachschlug sah Nüschts dergleichen) … es war dann schon spät und ich war zu müde … Hauptsache es tut.

Der obere Entwurf hält mich aktuell beschäftigt. Ich dachte nun schon zwei, drei, dass ich ein fertiges Ergebnis hatte. Doch irgendwas scheint immer zu sein. Ich bin beim dritten Konzept. Ich werde näher darauf in einem eigenen Artikel in der zukünftigen Spielwiese unter tempus creativ eingehen.

Zuletzt ging es nur noch um Seiten-Inhalte, die nicht die gesamte zur Verfügung stehende Breite verwenden und dabei nach rechts über den Notizbuchrand rutschten. Ergo noch einmal ein anderes Konzept. Diesmal mit zwei leeren Blinddivs, die die Abstände regeln und von allen Browsern gleich interpretiert werden sollten. Natürlich ist dem nicht so. So mancher Browserprogrammierer sollte noch einmal sein Schulbuch der 5. Klasse heraussuchen und das Kapitel über Prozentrechnen durcharbeiten … darunter auch die Damen und Herren von Opera. Für Opera kenne ich wenigstens einen Hack, mit dem ich nur den Opera bedienen kann. Ergo habe ich eine Lösung für den Opera. Bleiben zwei Linux-Browser, die in besondere Weise sich gegenseitig ausschließen:

(Klick auf Thumbnail für lesbare Ansicht)

Ich kann mich also nun entscheiden, ob ich kann also den Konqueror oder den Iceweasel bedienen. Aktuell zickt der Phoenix aber ich habe Konqueror und Iceweasel gelöst.

Ich weiß nicht, wer diese Browser verwendet. Ich kann nur vermuten, dass diese so wichtig wie der IE Mac sind und der IE Mac hat es gehabt. Ich bediene diesen Browser nicht mehr.

Ich hätte eine Lösung, die allen Regeln der Mathematik widerspricht und nur ein “Blinddiv” verwendet. Es ist ein Blinddiv mit einer Breite von 10.000 Pixel, was in allen mir bekannten gängigen Auflösungen definitiv mehr als 100% ist. Es spannt den DIV mit dem Inhalt auf, wenn dort nur 3-4 Worte oder ein kleines Bild enthalten ist, das den DIV mit dem Inhalte eben nicht auf seine gesamte mögliche Breite aufspannt. Wobei natürlich der halb-/fast leere DIV bei einem Aufbau der Seite von Rechts mit immer gleichen Prozentwerten gleichgültig wie der Browser diese Prozentwerte interpretiert … dieser DIV also hätte so oder so immer an der selben Position innerhalb des Notizbuchblattes aufhören müssen.

Das Template beruht auf den selben Prinzipien der jüngsten Templates in der Templaterie:

Diese Variante einer Navigation darf man unter die Kategorie “die Rache des Captchas” nehmen. Weder Bot noch Mensch haben eine Chance vor dem Klick zu erfahren, was hinter dem Link steckt. Wer Javascript deaktiviert, wird wie der Bot es nie erfahren. Es hilft bei dieser Navigation die Augen leicht zuzukneifen oder als Brillenträger die Brille abzunehmen. Mit ein wenig unschärfe und Konzentration kann man dann lesen was auf den Schaltflächen steht.

Ich fand es nicht wichtig, wo diese “Meisterwerke” im Netz zu finden sind. Sorry.

Der Ast, die rote Fläche, der helle Rahmen, die Birnen im Hintergrund und der Granatapfel, sein Schatten und seine Spiegelung liegen jeweils auf einer eigenen Ebene und können ein uns ausgeblendet werden, gerade so, wie hier die Texte (Title, Navigation und Blindtext) ausgeblendet wurden (Siehe zum Vergleich erster Entwurf in Step 1).

Noch rasch die PHP für die Bild-Liste mit den Werten in den Image-Ordner kopiert, damit die Werte übersichtlich und im schnellen Zugriff sind.

Moment … was sind das für komische Dateinamen?

Sprechende Dateinnamen für die Layout-Grafiken

Meine Templates folgen einem Schema, so das ich nicht lange überlegen muss, was wo hin gehört und welche Position oder Funktion das Element in der Website hat. Weil ich schreibfaul bin gibt es eine einfache Konvention. Das Kürzel “te” damit mein CSS nicht in Konflikt gerät mit CSS-Anweisungen für Plugins. “w” für den Wrapper, der unmittelbar nach dem Body kommt und den ich wenn es geht versuche zu vermeiden. “c” soweit erforderlich und das ist meistens der Fall, der DIV um den zentralen Inhaltsblock. Gelegentlich gibt es hier numerisch “c1″, “c2″, etc. weitere umschließende DIVs. Diese DIVs können häufig in Seiten, die auf ein CMS verzichten weggelassen werden. Mit einem CMS machen diese Sinn, da sie dem Nutzer ersparen Layout-Klassen den Absätzen zu geben oder gar Layout Elemente zu schreiben.

Nun werden die Elemente zu den Grafiknamen zusammengesetzt. bg_tew.jpg verät mir, dass diese Grafik im CSS als Background für den Wrapper nach dem Body mit der ID “tew” definiert werden wird. wenn ich keine unterschiedlichen Rahmen für diverse DIVs im Template habe, spare ich mir gerne die nährere Kennzeichnung. Die Bezeichnung corner_tl.gif verrät mir, dass es sich um eine Ecke lt sprich left top also links oben handelt. natürlich existieren hier alle vier Ecken. Was also frame_left.gif (zu dem es auch ein ~_top.gif gibt) bedeutet, kann man sich nun schon denken. Es exisitert auch ein frame_h.gif und ist eine der erwähnten Varianten, um flexibel zu bleiben. Dieser Name steht für Rahmen hoirizontal zum Counterpart frame_v.gif für den Rahmen vertikal. deco_?.gif sind Dekoelemente, die alleinstehend in das Template eingearbeitet werden. Häufig haben diese einen extra DIV ganz am Ende der Seite. Mit den Konventionen erübrigt sich schon ein Großteil der Dokumentation für das Template, so dass ich mich auch noch nach Wochen und Monaten schnell darin wieder zurecht finde. Dazu aber in Step 3 mehr ….

Parallel greife ich mit dem Kolorgenerator aus der Grafik die Hex-Werte. Mit dem Kolorgenerator deswegen, weil man mit ihm ganze Paletten leicht in verschiedenen Formaten exportieren kann und so z.B. in das demnächst erscheinende Update von Editland zum Template benutzerdefinierte Schriftfarben ergänzen kann. Hier lautet der Farbklang wie folgt:

•     #ab0038
•     #48041d
•     #1e0008
•     #d97b55
•     #cd3c23
•     #e8d9a1
•     #fff4d1

Damit sind die Vorbereitungen zur HTML-Umsetzung erst einmal abgeschlossen. Es folgt der Step 3 … (… in Kürze)

Siehe auch das Box-Model in Bezug auf Step 3

• DIV 50% mit Floatklasse
• DIV 50% mit Floatklasse
• DIV 100% mit Clear
• DIV 50% mit Floatklasse
• DIV 50% mit Floatklasse
• DIV 100% mit Clear
• P 100% 98/15
• DIV verrutschter Fuß

Wenn der Fuß schon verrutscht, warum nicht über den ersten Block, warum nur über den letzten Absatz? Ich darf also erst einmal experimentieren, wie man diesen Bug behebt. Grrrh.

OK. wenigstens entschädigt mich diese Site (genauer die Illustration auf der Seite) für den Frust und die Extraarbeit: MSIE 7 Bugs

[Nachtrag]
Fair ist fair: Das Problem saß auch hinter dem Monitor. Ein Flüchtigkeitsfehler in den Conditional Comments. Bleibt nur noch der Vorwurf, dass der IE7 gleich zweimal den Conditional Comment falsch interpretierte. Einmal bei der ersten Entwicklung, als ich noch mit dem Blindtext von Peewee am Design feilte und dann noch einmal bei der Fehlersuche, als ich gestern direkt ins Template für das MiniCMS Editland den Text eingab und der Fuß nicht verrutschte.

Ein Teil des Problems hat also nach wie vor die Redmonder Truppe zu verantworten!

Waterfall in Dusky Bay, April 1773

Visuell angezeigt wird, wenn das große Bild für Details vollständig geladen ist. Der Klick auf Teleskop startet einen quadratischen Ausschnitt im Zentrum, den man dann über das Bild ziehen kann.

Eine Schöne Javascript-Lösung. Ist Javascript deaktiviert, bleibt auch die Schaltfläche mit dem Teleskop inaktiv.

Weitere Bilder-Zooms findet man bei Stu Nichols:

1. An image magnifier
   Thumbnail das per Mousover das original einblendet.
2. An image magnifier
   Über Mousover und CSS funktioniert dieser Magnifyer auch ohne Javascript
3. Sliding scale image magnifier
   Statt per Mouseover und CSS über das Bild selbst zu hovern und einen Ausschnitt zu sehen, kann man hier über einen wachenden Balken streichen und das gesamte Bild wird vergrößert.
4. Dynamic enlarging image using only CSS
   Eine Weiterentwicklung stellt Stu Nichols schließlich hier vor. Das Bild wächst langsam an.
5. Image map for detailed information
   Wieder per CSS werden vergrößerte Bildausschnitte eingeblendet. Die vergrößerten Bildausschnitte werden zusätzlich textlich erläutert.

Übrigens auch im Museum gibt den annotated Zoom, also den vergrößerten Bildausschnitt mit Texterläuterung: The New Union: Club, Being a Representation of what took place at a celebrated Dinner, given by a celebrated – society

Danke für den Tipp an Claudia Reiser und an die Quelle im accessify forum.

1. Die EM-Vertreter — gleichgültig mit welchem Browser man die Seite ansteuert, dem Nutzer muss gestattet sein die Schriftgröße seinen Präferenzen und Notwendigkeiten anzupassen.
2. Die PX-Vertreter — gleichgültig mit welchem Browser man die Seite betrachtet, der Nutzer soll ein annähernd verlässliches Ergebnis haben. So dass Proportionen, Umbrüche und Bild-Text-Verhältnisse wenigstens ein wenig klakulierbar sind.

Beide Seiten haben ihre Vor- und Nachteile. Als ich mich für die eine oder andere Variante entschied, waren die Ergebnisse in den Browsern noch ein grausames Durcheinander. Von Browser zu Browsererhielt man ganz unterschiedliche Ergebnisse, so dass ich em und small oder big sofort verwarf. Heute ergab ein Pixel unterschied, mein Firefox war statt auf 16 auf 15 Standard-Schriftgröße eingestellt. Die Schrift war in bester Rezeptbeschreibungsmanier oder in der Manier des Kleingedruckten eines Vertrages, also gerade noch so lesbar. Ein guter Grund mal wieder hinzusehen.

Weitere Beispiele finden sich im Webhandbuch auf einer Beispielseite.

Auch wenn auf der Beispielseite, auf der ich meine favorisierten Schriftgrößen einrichtete, im Ergebnis nun keine Katastrophalen Unterschiede zu Tage brachte, so hat mich das Erlebnis von heute morgen dennoch in meinem Entschluss bestätigt.

Einen Artikel zu Webprojekt-Templates für Einsteiger wurde im Webhandbuch der templaterie veröffentlicht:

Wozu ist ein Website-Template gut?

Für alle die bereits Flash8 einsetzen.

Was sIFR ist und wann man sIFR und wann Grafiken geeigneter sind, habe ich Frankfurter Laubfrosch sIFR und Schriftbilder im Vergleich // Webtypografie mit sIFR

Via Forenbeitrag im MrType aus meiner Statistik

1. <link rel="stylesheet" type="text/x-opera-css;charset=iso-8859-1"
href="opera.css" />

Damit sollte ich zukünftig den Code nicht mehr verlegen .. aber ich denke ich werde diese Zeile auch noch in der Clip-Library meines Texteditors hinterlegen. So gelegentlich will eben auch dieser Browser seine Extrawurst haben.

via blog.der-link.de