Webdesign. Design fürs Web. Gedanken von Nadja Müller-Schade
News, Tipps und Tricks, Quelltext, Relevantes zu X/HTML und CSS
Eine Neuigkeit/Neuheit des heutigen Tages scheint wohl Zen Coding zu sein: Ein Plugin für verschiedene Entwicklungsumgebungen, darunter Textmate, Netbeans und Coda, das ein schnelleres Schreiben von Quelltext erlaubt. Genutzt wird dazu ein eigens entwickelter Shortcode, den man nachher per Klick in “vollwertiges” HTML oder CSS umwandeln kann.
Die gesamte Palette der Möglichkeiten gibt es auf der [...]
Was es nicht alles gibt. 1001 Niche Content Management Systems. Via.
Immer hilfreich beim Entwickeln, vor allem, wenn man die Webdarstellung im Internet Explorer 7 kontrollieren will, aber nur den kürzlich veröffentlichten IE8 nutzen kann. Ohne Standalone-Versionen kann man auch diese Anweisung in den zu testenden Quelltext einbauen.
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
Und schon benimmt sich der IE8 wie ein IE7.
Eine weitgehend unbenutzte CSS-Eigenschaft ist table-layout. Eric Wendelin zeigt in einem kurzen Beitrag, welchen Nutzen man damit aber erzielen kann: Use the table-layout CSS property to speed up table rendering.
/* Set table to “fixed” (fastest render) layout */
.fixed_table {
table-layout: fixed;
}
/* Set table to “auto” (best fit) layout. This is the default */
.auto_table [...]
Wieder eine kleine Gedächtnisstütze:
Die absolute Position eines Elements wird relativ zum Elternelement berechnet, wenn dieses ebenfalls positioniert wird. Andernfalls dient der Seiteninhalt (<body>) als Referenz.
Folgende Anweisungen im CSS…
Übermut tut selten gut. Und auch bei Standards kann man zu tief in die Markupkiste greifen. Das betrifft auch die korrekte Auszeichnung von Logos.
Ich bin heute beim Überarbeiten eines bestehenden Templates über eine Aufzählung mit Partnern gestoßen, deren Logos allesamt als Hintergrundbilder der jeweiligen Absätze (ja, mittels inline-Anweisungen) definiert waren. Beim Hinzufügen eines float-Elementes verschwanden [...]
Manchmal ist es gut, immer wieder an Abläufe und Vorgehensweisen erinnert zu werden. Daher hier die Erinnerung an die richtige Auszeichnung von Radiobuttons.
Warum?
Weil dem Benutzer so Schwierigkeiten beim Ausfüllen eines Formulars erspart bleiben.
Der Text sollte dem Element zugeordnet sein, v.a. für Screenreaderbenutzer.
Der User klickt zur Auswahl oft auf den Text nicht auf den Radio-Button.
So sieht [...]
Manchmal kommt man mit einem Template nicht weit. Aber anstatt eine zweite Vorlage zu erstellen, genügt oft ein kleiner Kniff, um das Aussehen auf einigen Seiten anzupassen.
Ein einfaches Beispiel:
Eine Kundenwebsite, basierend auf einem einfachen CMS, enthält eine horizontale Navigation mit etwa 4-5 Unterpunkten – lediglich eine Seite besitzt mehr als 10 Navigationspunkte. Da diese mit [...]
Sehr schlicht ist die Brotkrumen-Navigation der apple.com-Website:
Und dieses Menü lässt sich ganz leicht per CSS selbst gestalten. Dazu verwenden wir folgendes HTML-Gerüst:
<div class=”breadcrumbs”>
<a href=”/”>Home</a>
<span>></span>
<a href=”/”>Beispiel</a>
<span>></span>
<em>Breadcrumbs</em>
</div>
Bei deaktiviertem CSS wird der Aufbau deutlich:
Home > Beispiel > Breadcrumbs [...]
Wenn es um Formulare geht verwendet man oft input-Elemente zum Abschicken. Und meist muss man sich auf das browserseitige Aussehen verlassen, denn eine wirklich einfache Gestaltung per CSS gibt es nicht. Dabei gibt es sie doch: Buttons.
Beide Elemente funktionieren in Formularen:
Submit
Das Element button wird lediglich im Safari optisch anders behandelt als input type=”submit” – diese [...]
