Zebrastreifen im CSS

tempa wrote this 01:02:

Irgendwie ist es doof, dass CSS selbst Modulo nicht zu kennen scheint … zumindest habe ich nichts gefunden. Es gibt zahlreiche Javascriptlösungen. Hier jene auf A List apart: Zebra Tables

Und das ist meine Lösung per PHP:

  1. <tr<?php $num = ($num+1); echo ($num % 2) ? '' : ' class="odd"';?>>
  2. <td>SP1R1 Zelleninhalt</td>
  3. <td>SP2R1 Zelleninhalt</td>
  4. <td>SP3R1 Zelleninhalt</td>
  5. </tr>
  6. <tr<?php $num = ($num+1); echo ($num % 2) ? '' : ' class="odd"';?>>
  7. <td>SP1R2 Zelleninhalt</td>
  8. <td>SP2R2 Zelleninhalt</td>
  9. <td>SP3R2 Zelleninhalt</td>
  10. </tr>

Das geht vermutlich eleganter, aber immerhin, es ist immer die selbe Zeile so dass man sich keine Gedanken machen muss, ob dies nun eine gerade oder ungerade Zeile ist und man kann jederzeit zwischenrein eine Zeile einfügen. Die Streifen bleiben erhalten.

Ursprünglich gepostet am 23. Oktober 06, 03:34 in meinem Blog „Silkester erzählt“.

Update:

CSS3 bietet für diese beliebte Listendarstellung mittlerweile nth-child siehe W3C Pseudoklassen (6.6.5.2. : nth-child() pseudo-class)

  1. foo:nth-child(even) { backrgound-color: "#999" }
  2. foo:nth-child(odd) { backrgound-color: "#CCC" }

nth-child wird in fast allen aktuellen Browsern unterstützt. Unbeachtet bleibt die Pseudo-Klasse im IE, selbst im IE8. Für IE gibt es den folgenden Heckmeck:

  1. /* li:nth-child(2) */
  2. li:first-child + li {}/*Works for IE8*/

Was ist ein Template?

tempa wrote this 00:21:

Wozu ist ein Template gut?

Gestern [geschrieben am 24 Okt. 2006] fiel mir nicht schlecht die Kinnlade herunter, als ich hörte, dass bei der Vorstellung zur Planung von größeren Projekten ein Punkt sich mit der Design-Änderung während des Projektverlaufs und der daraus resultierenden, stundenlangen Anpassung des bis dahin fertigen Zwischenstandes befasste. Da es sich dabei auch noch um einen ehemaligen Interessenten handelte, also die Templaterie bekannt sein dürfte, habe ich offensichtlich noch ein Problem Sinn und Zweck von Templates zu transportieren.

Ein Template ist ein Grid, ein Raster, eine Matrix, ein Rahmen, in den veränderliche Inhalte eingefüllt werden können. Ein gutes Template besteht nicht nur aus modularen Kopf- und Fußzeilen oder einem Seitenstreifen, den man beliebig austauschen kann. Ein gutes Template berücksichtigt auch Seitenstrukturen. Das gestrige Beispiel – eine Seite mit Kochrezepten – ist dabei eine wunderbare Ausgangssituation.

Ein Kochrezept besteht aus:

  1. Titel des Rezeptes
  2. Kategorieen wie z.B. Land, Vegetarisch,
    Dunkles Fleisch, Menufolge, etc.
  3. Abbildung des aufgetafelten Gerichtes
  4. Liste der Zutaten
  5. evt. Liste der Gerätschaften
  6. Arbeitsanweisung in x Schritten inklusive Illustrationen
  7. Rezept-Historie, Quellen, Einkauftipps

Das sind sieben verschiedene Elemente mit unterschiedlichen Anforderungen und Positionierungen und Rahmenbedingungen, welche sich in HTML-Strukturen wiederspiegeln. Jeder HTML-Struktur kann eine ID oder eine Klasse zugeordnet werden und zu jeder HTML-Struktur, zu jeder ID und zu jeder Klasse werden in der CSS Designanweisungen hinterlegt.

Was bringt es ein, ein Template von A-Z
durchzuplanen und umzusetzen?

Gerade in größeren Projekten ist die Planung und Identifizierung der Objekte, Elemente und Bausteine essentiell, um:

  1. Design-Entwicklung und Projektinhalte zusammenstellen parallel beginnen zu können
  2. Frei zu sein in der Design-Entwicklung und sich z.B. auf Sponsorenfarben einstellen zu können
  3. Im Design den Modetrends auch in den kleinen Details folgen zu können, und damit frisch und aktuell zu wirken.
  4. !Most important: Sich das stundenlange Fieseln mit Design-Änderungen in 100ten und 1.000den von Textstellen zu ersparen.

Planung und die Verwendung von Semantik für Layout-Anforderungen ist nicht nur eine Spielerei mit dem man einen CSS-Zengarden ins Netz stellen kann. Es ist bares Geld, das man spart, weil man vorher ein wenig mehr Zeit in die Meta-Ebene (dem was ist was und was bedeutet was …, welche Mengen, Grade der Bedeutsamkeit, etc.) steckt und kontinuierlich der Versuchung wiedersteht, mal g’schwind einen Inlinestyle oder schlimmer einen Font-Tag zur Gestaltung zu verwenden.

Ursprünglich gepostet am 24. Oktober 06, 13:52 in meinem Blog “Silkester erzählt”.

PHP: regex kurz notiert

tempa wrote this 23:33:

Ich treibe mich noch immer bei den PHP-Freaks herum. Jetzt im Regex-Tutorial (link lost). Die Regeln sind klar und einfach zusammengefasst und hier ist ein guter Platz, um die Audrücke für mich nochmal zu notieren:

REGEX-Metacharacters (~Ausdrücke)
Ausdruck Bedeutung
Kleine Übersicht der Regex-Audrücke
^ „Start der Zeile“/innerhalb eines Ausdrucks bedeutet es ’nicht‘
$ „Ende der Zeile“ bzw. genauer „bis zu einer neuen Zeile Zeichen“
Sobald ein Zeilenwechsel (n) im String vorkommt, ergibt ‚$‘ einenTreffer.
* „Zero (kein) oder mehr Treffer“ oder anders ausgedrückt egal wieviel,egal was
+ „Wenigstens ein Treffer muss sein“ also fast egal wieviel, egal was
? = optional, „kann vorkommen“
() Ausdrücke gruppieren
| = oder (a|b) bedeutet klein A oder klein B
. bedeutet ein beliebiges Zeichen
[] kennzeichnet eine Zeichenklasse [0-9] Zahlen 0-9 oder [a-z] Kleinbuchstaben A-Z
(latin-1…Umlaute und Sonderzeichen nicht eingeschlossen.)
{n,m} wenigsten ’n‘ Vorkommen und maximal ‚m‘ Vorkommen

Weiter geht es mit Teil Zwei dieses Tutorials auf PHP-Freak hier: Introduction to regular expressions (#2): ERE POSIX (link lost)

Ursprünglich gepostet am 1. November 06, 05:56 in meinem Blog „Silkester erzählt“.

Es ist nicht alle Hoffnung verloren

tempa wrote this 17:30:

Es ist noch nicht alle Hoffnung für die Redmonder verloren. Nachdem die Redmonder angekündigt hatten, dass sie ohne Targeting-Metatag mit ihrem IE8 den Kopf in den IE7-Sand stecken wollten, gab es mit Recht einiges Rumoren unter den Webdesignern (auch hier). Wer seinen Job ernst nimmt, der bemüht sich mit den Seiten aktuell zu bleiben und gemäß den Standards eine Webseite in bestmöglicher Weise zu schreiben. Wer seinen Job ernst nimmt versucht hier und da die neuen Feature einzelner Browser einzubauen, wenn diese dem Design und der Funktion dienen.

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!

Linktipps: Intensivkurs CSS

tempa wrote this 00:34:

Wer sich intensiv in CSS einarbeiten möchte, dem seien die folgenden Links ans Herz gelegt:

  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:

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.

Böses Karma! BMW diskriminiert Opera-Nutzer.

tempa wrote this 07:12:

Überraschung! Statt nun mich vom Flash der BMW-Site quälen zu lassen, werde ich in HTML 4.01 Layouttabelle und Javascript inline darüber informiert, dass die Programmierer der Site nicht in Lage waren, alle gängigen Browser in das Besuchererlebnis einzuschließen. Siehe Screenshot (1:1-Ansicht via Klick auf die Vorschau)

BMW informiert Opera-User, ihr Browser sei inkompatibel.

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:

Wir müssen draussen bleiben, Opera!

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“!

Ein handgezeichnetes Flashformular

tempa wrote this 14:43:

Smashingmagazine stellt Websites vor, die Handzeichnungen für Webdesign-Elemente verwenden. Hierbei handelt es sich überwiegend um Flashsites. Und zugegeben die Zeichnungen sind schön, es macht Spaß die Seiten abzuklappern. Mel Kadel zeichnet herrlich (übrigens keine Flashsite, sonder iFrame und Javascript). Auch (diesmal Flashsite) Heather Sloane macht Spass. Preise für gutes Webdesign habe ich bisher aber noch nicht gesehen (ich habe nicht alle angesehen, manche Vorschau reizt mich schlicht nicht). Gute Zeichner sind nicht notwendigerweise gute Webdesigner. In meinem persönlich favorisierten Fenster 1280×1024 begeisterte mich das Kontaktformular von Christian Sparrow:

Formular gezeichnet

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:

Formular wie eine Kinderpapptheaterbühne gestaltet

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, (mehr …)

Microsoft spricht den Webdesignern die Lernfähigkeit ab

tempa wrote this 14:47:

Mit dem Microsoft Internet Explorer Version 7, kurz MSIE7 ider auch IE7, wurden erstmalig Websites von einem Browser aus dem Hause Microsoft fast wie von standard-konformen Browsern dargestellt. Websites, die stark auf Hacks im CSS gesetzt hatten mussten stark nachgearbeitet werden.

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. 🙂

Thickbox-Plugin — die mangelnde Logik der Bildfolge

tempa wrote this 06:21:

Thickbox bietet die Möglichkeit Bilderserien über rel="serie-x" mit einander zu verknüpfen. Dies ist rein auf Javascript basiert und bezieht sich stets auf die Bilder die aktuell in der Seite angezeigt werden. In WordPress verteilen sich diese Bildserien über mehrere Seiten und schon ein schichtes <––more––> wirft die ganze Idee der Bildfolge aus dem Konzept. Geschweige denn Bildfolgen über mehrere Blogbeiträge, ggf. über Monate und Jahre zu einer stattlichen Zahl angewachsen.

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*

Unschuldig Pfeiffffh

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.

DL-Galerie im Stylesheet des Themes Gespaa ergänzt

tempa wrote this 15:51:

Für den letzten Beitrag benötigte ich eine geignete Darstellungsform, an der ich in meinen intensiven Surf- und Recherchetouren der letzten Tage zufällig vorbeikam. Maxdesign Definition lists – misused or misunderstood?, der die Methode widerum auf Pomage „Les listes de définitions : mal utilisées ou mal comprises ?“ fand und den Artikel übersetzte. Die Methode entsprach nicht ganz meinen Bedürfnissen. Dadurch dass dem Bild die Maße zugewiesen werden, wäre ich darauf angewiesen gewesen, das Bild entsprechend den Maßen zuzuschneiden oder zu verkleinern. Beim Bloggen habe ich aber des öfteren das Bedürfnis einfach nur schnell zu publizieren (weswegen der Rohling als Codeschnipsel auch in meinen Quicktags ist.) und will mich nicht lange mit Bildzuschnitten aufhalten. Wenn das Bild ca von den Maßen passt, soll das genügen. Insbesondere im letzten Thema, wäre eine Verkleinerung den Bildes noch einmal eine Verfälschung von Originalbild zu den komprimierten Bildern gewesen. In diesem Besonderen Fall, war die Verkleinerung sowohl im Bildbearbeitungsprogramm sowie über die CSS-Eigenschaften denkbar ungeeignet. Ich führte also ein Span ein, dass ich über die Eigenschaft display: block; und der Eigenschaft overflow: hidden; zum Passpartout des Bildes gestaltete und das die Maße vorgibt.

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

Kiwano Melon PNG ca 35KBKiwano Melon
175 x 160 Pixels
Lime public domain freeimage.orgLimone
300 x 265 Pixels
Feigen von freeimage.orgFeigen
247 x 164 Pixels

Und so wirds gemacht: (mehr …)

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM