Ich hab’s dann doch getan. Ich habe mir eine WMF 1 geleistet. Der kleinste Kaffeepad-Vollautomat, den es wohl derzeit auf dem Markt gibt.

Da ich recht oft in den verschiedensten Seminar- und Tagungshäusern nächtige, steht mir weder direkt nach dem Aufstehen noch in der Zeit nach 18:30 Uhr ein annehmbarer Kaffee zur Verfügung. Mittlerweile liegt die Latte diesbezüglich recht hoch - Schuld haben die Kaffeeautomaten im Büro und @home. Ehrlich, nach kurzer Zeit schmeckt der “normale” Kaffee nicht mehr gut.

Ausgepackt und eingerichtet war das Maschinchen schnell. Leider war der WMF 1 kein Testpad im Paket beigelegt, also bin ich noch schnell in den Supermarkt gesprungen und habe eine Packung Pads der Sorte Café Creme erstanden.

Achtung: Es passen nur die schlanken Pads in den Padhalter, die voluminösen Cappucino-Pads haben bei mir nicht gepasst. Die erste Tasse war schnell aufgebrüht. Dabei hielt sich die Lautstärke in moderaten Grenzen. Das Ergebnis war ein wirklich leckerer Kaffee mit prima Crema. Er hätte etwas mehr “Wumms” haben können, aber ich denke, da muss ich mich mal etwas mehr mit den verschiedenen Pads beschäftigen. So bin ich erst einmal sehr zufrieden und die “Feuertaufe” am vergangenen Wochenende hat die WMF 1 mit Bravour bestanden. Ich musste mir jetzt bloß zwei weitere WMF 1 Tassen nachkaufen - man ist mit ihr sehr begehrt *g*.

Für Verzeichnisse, Linksammlungen und nicht zuletzt für das Druckstylesheet: Mit der Eigenschaft content und der Pseudoeigenschaft after ist es ohne Markup möglich, das Linkziel darzustellen.

a.clink:after {
   	content: " (" attr(href) ") ";
   	color: #5C1;
	font-size: 0.78em;
}

So sieht’s aus.

Ausgedruckt per passendem Print-Stylesheet erscheint dann hinter dem Anchor Text (Verweistext) die Url, die ansonsten nicht sichtbar wäre. Die Sache funktioniert nicht im IE, der content ignoriert und folglich nur den Anchor Text darstellt.

Ok, das war’s. Nach 3 Monaten habe ich aufgegeben: eine Apple Slim Tastatur ist nichts für mich. Irgendetwas stimmt nicht an der Reaktionszeit, wahrscheinlich meiner. Vom Design her ist das Teil nicht leicht zu toppen, aber sie vermittelte mir, dass ich es mit Softtouch-Tasten zu tun habe. Das sind sie aber nicht und meiner Erfahrung nach braucht das Keyboard einen härteren Anschlag, um nicht hin und wieder mal ein Zeichen zu “vergessen”. Also gab ich meine Tastatur der Kathrin und tippe im Büro wieder mit dem Apple Pro Keyboard. Die ist aber qualitativ auch nicht unbedingt der Brüller. Zudem ist sie spätestens nach 3 Tagen nicht mehr schön - wenn sich erst einmal diverse Kekskrümel und andere Rückstände unübersehbar im transparenten Gehäuse auffinden.

Als ich noch PC-User sein musste, war ich mit den Cherry-Tastaturen immer zufrieden. Vielleicht lag das auch daran, dass manch anderes so mies und man froh über jede Hard- bzw. Software war, die funktioniert hat. Ich denke, ich werde mir Anfang November das Cherry Initial for Mac genauer anschauen. Vielleicht ist das eine Alternative für mich.

Michael Jendryschik und Nicolai Schwarz organisieren am 03. November den Webmontag in Dortmund. Die Themen Mikroformate und Twitter interessieren mich beide und auf beiden Gebieten habe ich Lücken. Von daher passt’s also prima. Die Teilnehmerliste präsentiert sich übersichtlich und das finde ich gar nicht mal schlecht. Sehr wahrscheinlich bleibt es dann nicht nur beim sympathischen Motto “Ankommen, Tach sagen …”, sondern man hat die Chance zu weitergehenden Gesprächen. Details über Ort, Zeitpunkt und Ablauf fndet man im Beitrag auf Michaels Blog.

Leider ist es bislang zu keinem 2ten Webmontag in Bochum gekommen, was seinerzeit ein nettes Treffen war. Schön, dass ich jetzt mitbekommen habe, dass die werte Nachbarstadt in die Bresche springt *g*
Ich habe mich mal als Vielleicht-Teilnehmer eingetragen, aber es kristallisiert sich heraus, dass ich den Termin halten kann. Fein, da bin ich mal gespannt. Ein Paar Kollegen kommt vielleicht mit.

Um zu erreichen, dass ein float innerhalb eines Containers von diesem eingeschlossen wird, gibt es mehrere Methoden. Für mich etwas unverständlich wird das Thema zum Teil lebhaft und mit nahezu missionarischem Eifer diskutiert. Ich möchte die mir bekannten CSS-Techniken hier einmal kurz vorstellen, werde das aber weitestgehend wertfrei halten. Ich habe alle Techniken schon benutzt und einen klaren Favoriten habe ich eigentlich nicht.

Markup method: Clearing floats durch zusätzliches Markup

Wie der Name schon sagt, ist das keine reine CSS-Technik. Man erzeugt zusätzlichen, für das Layout bedeutungslosen Code.

HTML

<div class="container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
	<div class="clear"></div>
</div>

CSS

div.container {

}

div.float {
	float: left;
	width: 30%;
}

div.clear {
	clear: both;
	height: 0;
}

Für Puristen ist das nichts. Der Vorteil dieser Methode liegt aber in ihrer Übersichtlichkeit. Man kann sehr leicht Fehler vermeiden oder nachvollziehen.

Aslett/PIE Method: Clearing Floats durch Generierung von Content

Die Idee: Durch die Pseudoklasse :after generiert man Inhalt, dem man ein clear:both zuweist. Man muss noch ein “wenig” basteln, um die Methode crossbrowserfähig zu bekommen. Zudem möchte man den generierten Inhalt auch nicht sehen. Der aktuelle Stand von Tony Asletts Methode sieht 2 Stylesheets vor, wobei das zweite den Internet Explorer betrifft und per conditional comment vor den anderen Browsern (inkl. MAC/IE) verborgen wird.

HTML

<div class="clearfix container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
</div>

Allgemeines CSS

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

/* for IE/Mac */
.clearfix {
	display: inline-block;
}

CSS für IE über conditional comments

.clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
}

Ich bin nach wie vor beeindruckt von der Cleverness dieser Methode.

Float (Nearly) Everything: Clearing unnötig wenn (fast) alles floated

Steve Smith von orderedlist fand 2004 heraus, dass man ein float nicht clearen muss, wenn das Elternelement ebenfalls als float definiert wurde. Eine ausführliche Beschreibung seiner Methode findet sich auf seiner Seite.

Overflow Methode

Eine attraktive Methode. Man weist dem Elternelement das Attribut overflow zu. Hierbei nutzen manche den Wert auto, andere verwenden lieber hidden.

HTML

<div class="container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
</div>

CSS mit overflow:auto

div.container {
	overflow: auto;
	width: 100%; /* gibt IE hasLayout */
}

div.float {
	float: left;
	width: 30%;
}

CSS mit overflow:hidden

div.container {
	overflow: hidden;
	width: 100%; /* gibt IE hasLayout */
}

div.float {
	float: left;
	width: 30%;
}

Das Vorhaben existiert seit dem Verkauf von gulli im Februar: als LexaT wieder etwas auf lexat.org zu schreiben. Die unmittelbare post-gulli-Ära erwies sich dann aber wesentlich arbeitsreicher und unbesinnlicher als wir uns das gewünscht hatten. Es fehlte an Kraft und Zeit. Nun sind einige Dinge ins rechte Licht gerückt und ich gedenke, der Absicht Taten folgen zu lassen.

Thematisch werde ich mehr über meine Arbeit schreiben, über Web- und Projektentwicklung, Frontends, Browser, Besucher und natürlich über Teamarbeit. Mit 43 Jahren nehme ich mir das Recht heraus, über Web-Lifestyle zu schreiben und dabei denjenigen der Menschen unter 30 Jahre unberücksichtigt zu lassen

Äußerlich erscheint lexat.org in neuem Gewand. Der unaufgeräumte Stil des alten Designs passt nicht mehr zum neuen Anspruch, es bleibt aber bei einem recht ähnlichen Farbschema. Auf den Relaunch werde ich aber später noch eingehen. Oben noch ein Screenshot vom alten lexat.org.

Dies ist ein Testpost aus Textmate in HTML.
Seit einiger Zeit ist Textmate der Editor meiner Wahl und nun möchte ich damit auch die Postings in diesem Blog schreiben bzw. editieren. Den Einstieg habe ich recht einfach mit Hilfe des Blogging-Bundle Screencasts geschafft.

Lies den Rest des Artikels »