»Webseiten mit HTML« gratis für CSSHilfe-Leser

Media_httpwwwcsshilfedemedienwebseitenmithtml20081009175913jpg_njaganrjqaruncm
Für Einsteiger in das Thema Webdesign hält terrashop wieder ein besonderes Schmankerl bereit: Bis zum 31.10.2008, 23:59 Uhr können CSSHilfe-Leser das Buch »Webseiten mit HTML« von Elizabeth Castro komplett kostenlos bestellen. Danach kostet es wieder 4,95€. Die Autorin hat das Buch für Leute wie ihre Freundin Kissy geschrieben, die etwas im Web veröffentlichen möchten, ohne dabei jedoch gleich zu HTML-Experten zu werden. Es werden HTML, XHTML und CSS behandelt und am Ende jedes Kapitels gibt es zusätzliche Tipps und Tricks. Außerdem bietet das Buch Referenztabellen für Zeichen, HTML, CSS und Farben. Es stehen Leseprobe und Inhaltsverzeichnis im PDF-Format zur Verfügung. Wer »Webseiten mit HTML« gratis bestellen (und nur die Versandkosten tragen) möchte, folgt diesem Link. Vielen Dank an terrashop!

Buchaktion: »CSS - Die praktische Referenz«

Dank terrashop können CSSHilfe-Leser das Buch »CSS - Die praktische Referenz « von Stephanie Hölzl bis einschließlich 15. Juli 2008 für den Preis von nur 1,00 Euro ergattern.

Aus dem Inhalt:

Media_httpwwwcsshilfedemedienskitched20080624103851jpg_elimpssngnrjxvd
  • Einführung
  • CSS-Grundlagen
  • Selektoren und Kaskadierung
  • Boxen, Rahmen, Abstand, Hintergrund
  • Typografie: Gestaltung mit Schrift
  • Listen und automatischer Inhalt
  • Tabellen
  • Visuelle Formatierung u. Positionierung
  • Andere Ausgabemedien
  • Weitere Techniken, Tipps und Tricks

Für viele Webdesigner und Entwickler sind Cascading Style Sheets zu einem unverzichtbaren Mittel für gutes, browserübergreifendes Webdesign geworden. Initiativen wie beispielsweise "Zen Garden" zeigen, dass man mit "trockenem" CSS-Code wirklich Kreatives erschaffen kann.

Wenn man allerdings nicht alle Elemente und Klassen im Kopf hat, braucht man eine kompakte, umfassende und übersichtliche Referenz wie diese. Das fundierte und professionelle Nachschlagewerk im praktischen Format bietet alle Funktionen und Befehle im schnellen Zugriff: thematisch und alphabetisch sortiert und mit ausführlichem Index.

Was ist zu tun? Einfach diese terrashop-Gutschein-Seite besuchen und den Code csshilfe01 für den Kauf verwenden.

Oft vergessene Methoden für Hintergründe und Links

webmasterpro.de präsentiert zwei Tutorials, die bisher noch selten benutzte Methoden genauer vorstellen. Selten benutzt vor allem deshalb, weil der Internet Explorer 6 hierbei nicht mitspielt. Zukünftig könnten beide Methoden wieder interessanter werden, da der Internet Explorer ab Version 7 beide Methoden unterstützt. CSS 3 mit etwaigen noch besser geeigneten Ansätzen, lassen wir mal außen vor. Bis dahin ist noch ein Weilchen. Die beiden Artikel:

YAML 3 und der YAML Builder

Bei "YAML":http://yaml.de (Yet Another Multicolumn Layout) hat sich in den letzten Monaten viel getan. Hier ein kleines news-update. YAML, das von Dirk Jesse entwickelte *CSS Framework*, liegt inzwischen in der Version 3 vor. Seit der Version 2 feilte Dirk an etlichen Verbesserungen, die YAML funktionaler denn je gemacht haben. So wurde die Druckausgabe wesentlich verbessert, alle Dateien auf die Zeichenkodierung "UTF-8" umgestellt und CSS-Kommentare nach CSSDOC-Standard eingeführt. Die YAML Dateien selbst wurden hier und da überarbeitet und von kleineren Bugs befreit. Nachzulesen ist alles im "YAML Changelog 3.x":http://www.yaml.de/de/dokumentation/changelog/version-3x.html. Kurzum YAML ist besser denn je - aber auch, zugegebener Maßen, recht komplex.
Media_httpwwwyamldeuploadsrtemagiccybuilder10beta1pngpng_sqhebgbbhxgliah
Sich in den einzelnen Dateien auszukennen, diese auf das gewünschte Layout zu ändern und die verschiedenen Anpassungen vorzunehmen, erfordert schon ein wenig input an Zeit und Know-how. Hier kommt inzwischen der "YAML-Builder":http://builder.yaml.de/ zur Hilfe. Es handelt sich dabei um ein Tool mit dem dynamisch das Grundlayout kreiert werden kann. Dieses Tool sollte man auf keinen Fall verpassen! Es liegt zur Zeit noch in Beta vor, wird aber weiter entwickelt und ist die coolste YAML Hilfe schlechthin. Nachdem man die einzelnen Einstellungen vorgenommen hat, spuckt der Builder den zugehörigen CSS Code aus, den man dann nur noch in die entsprechenden Dateien kopieren muß. Voll Funktionsfähig sollte der YAML Builder unter Firefox, dem IE7, Opera 9 und dem Safari 3 sein. Last und least kam Anfang des Jahres die, von Dirk Jesse, überarbeitete Fassung des Buches *CSS-Layouts, Praxislösungen mit YAML 3.0* heraus. Schon die "erste Ausgabe":http://www.csshilfe.de/2007/01/rezension-css-layouts-praxisloesungen-mit-yaml.php überzeugte auf der ganzen Linie.
Media_httpwwwgalileocomputingdedownloadcover9783836211352gif_pucgzwatifcjkhy
Die nun vorliegende wurde auf den neuesten Stand von YAML gebracht und insgesamt besser strukturiert. Jesse hat zudem einige neue Themen aufgegriffen und hinzugefügt:
  • Entwurfskonzepte zur Layoutentwicklung (Progressive Enhancement, Graceful Degradation)
  • Konzepte für ein Reset CSS (Standard CSS der Browser, Vorstellung und Diskussion der Ansätze von Eric Meyers und der bei YAML verwendeten Lösung)
  • Stylsheets besser kommentieren (Einführung in CSSDOC)
  • Grid-Layouts als visuelles Gestaltungskonzept (Konzeptvorstellung, fixe und flexible Lösungsansätze)
  • Parsing- und CSS-Bugs (Das IE-Float Modell, Arbeit mit dem IE7, weitere Bug-Hinweise und -fixes für verschiedene Browser)
Dem Buch liegt eine DVD sowie eine wirklich exzellente Referenzkarte, die den Aufbau von YAML sehr gut visualisiert, bei. Auf der DVD befindet sich:
  • das YAML Paket
  • alle Code-Beispiele aus dem Buch
  • eine virtuelle Maschine auf Basis von Ubuntu mit vorinstalliertem TYPO3 samt YAML-Template zum Austesten des Templates ohne Installationsaufwand
  • den Videomittschnitt des Vortrags zu YAML vom Multimediatreff im September 2007 in Köln
Eine ausführliche Beschreibung des Buches hat Dirk in seinem "Blog veröffentlicht":http://blog.highresolution.info/index.php?/highresolution/comments/css_layouts_aktualisierte_und_erweiterete_auflage/. Mit ca. Euro 34 ist man dabei. Die Investition lohnt sich für alle angehenden, professionellen Webentwickler zu 100%.

»Eric Meyer on CSS« gratis für CSSHilfe-Besucher

Media_httpwwwcsshilfedemedienericmeyeroncss20080303085217jpg_ekidrjuditgtjno
Eine Kooperation mit Terrashop ermöglicht es uns, das Buch »Eric Meyer on CSS. Mastering the Language of Web Design« in der US-Originalausgabe bis zum 10.3.2008, 00:00 Uhr kostenlos für alle Leser anzubieten. Allein die Versandkosten fallen für die Bestellung an. Was muss man tun? Ganz einfach: Diesen Link für die Bestellung verwenden! Bestellt werden kann maximal 1 Exemplar dieses Artikels pro Bestellung. Es sind 100 Exemplare reserviert worden! Update 04.03.2008: Alle Bücher sind weg und somit ist die Aktion leider schon vorzeitig zu beenden. Vielen Dank, Terrashop! Ich hoffe, wir können bald wieder eine ähnliche Aktion anbieten.

Thumbnails per CSS vergrößern

Css Globe präsentiert mit Create Resizing Thumbnails Using Overflow Property eine Technik, die es ermöglicht, Thumbnails beim Überfahren mit der Maus zu vergrößern. Dabei wird pures CSS und kein JavaScript verwendet.
Media_httpwwwcsshilfedemedienresizingpercss20080303082252jpg_hfkxcijfgoquthh

The idea behind this is, to place an image into a certain container. Since we're talking about thumbnails that container would be an <a> tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container's actual area will be visible. The rest of it will be hidden. On a:hover we set the container's overflow to visible, and reveal entire image.

Das Ganze gibt es als Demo und Zip-Datei.

Tipps für sexy Stylesheets

Jina Bolton hat die Ergebnisse einer Befragung von Experten auf Vitamin veröffentlicht: Creating Sexy Stylesheets

Das Ergebnis ist eine Sammlung von Tipps und Erklärungen die dabei behilflich sind, leicht verständliche, gut wartbare und schließlich effiziente Stylesheets zu schreiben. Die angesprochenen Punkte in der Kurzfassung:

  • Kein CSS im Quellcode
  • Semantik
  • Kommentieren
  • Hackmanagement
  • Organisation und Gruppierung
  • Frameworks
  • Kompromisse zwischen Lesbarkeit und Komprimierung
  • Vertrautheit mit dem Editor
  • Versionskontrolle
  • Styleguides

Alle Jahre wieder: Der Adventskalender der Webkrauts

Media_httpwwwwebkrautsdewpcontentuploads200711quickies3002jpg_sctzcgjcffqeceh
Wissen satt rund um das Thema Webentwicklung gibt es ab dem 1. Dezember bei den Webkrauts:

In diesem Jahr soll es nicht nur um Webstandards gehen. Wir haben das Themenspektrum erweitert und präsentieren euch verschiedene Themen, die für Webworker interessant sind. Von Semantik, Tabellen und Überschriften geht es über Flash und Grafiken bis hin zu Schriften und Entwurfsarbeiten. In diesem Jahr haben wir uns bemüht, längere Texte bereits auf das ganze Jahr zu verteilen, und bieten euch im Adventskalender kürzere, knackige Texte an, die bei uns unter dem Namen "Advents-Quickies" laufen. Ab 1. Dezember hier auf webkrauts.de.

Wer Werbematerialien braucht, um selbst auf dieses schöne Projet hinzuweisen, findet eine eine Auswahl an Bannern bei den Krauts.