Vertical Align

Ich persönlich finde diese Startseiten mit Links wie “Hier klicken, um Website XY zu betreten” ja höchst überflüssig. Warum soll der Besucher noch ein weiteres mal klicken müssen, um die Seite zu “betreten”? Anscheinend hatte er doch sowieso die Absicht, sich die Website anzusehen, sonst hätte er sie ja nicht aufgerufen. Wenn man jemanden anruft, ertönt ja auch keine Ansage, die sagt: “Hier ist das Telefon von XY. Wenn Sie jetzt wirklich mit XY telefonieren möchten, sagen Sie bitte ‘Weiter’.”

Trotzdem kann es vorkommen, dass man so eine Startseite bauen muss, z.B. wenn man nur ein Design umsetzt, das jemand anders vorgibt. Und dann ist es meistens auch noch so, dass das, was auf der Startseite stehen soll, mittig auf der Seite positioniert sein soll. Ist man in einer solchen Lage, hat man es meist mit einem der gefürchtetsten Probleme beim Gestalten mit validem XHTML und CSS zu tun: Vertikale Zentrierung.

Weiterlesen …

heise online: Chance verpasst

Fazit: Wäre das neue Design ein Pferd, dann müsste man’s erschießen.

Das Design selber stört mich am neuen heise online nicht. Es ist vielleicht nicht perfekt, sicher lässt sich darüber streiten - aber wirklich schlechter als das alte ist es nun auch nicht. Es ist natürlich gewöhnungsbedürftig, denn der Mensch gewöhnt sich ja bekanntlich an alles und jede Umstellung ist da nur unbequem.

Aber.

Und genau darauf trifft obiges Zitat zu: die Technik. Es wieder ein Tabellenlayout. Es gibt wieder noch nicht einmal einen Doctype. Der Code entspricht wieder keinem Standard. Kurz: Diese Chance hat heise online ohne Not verspielt, mit der Entschuldigung, dass man den Code “jetzt noch deutlicher auf einen möglichst barrierefreien Zugriff ausgerichtet” habe. Bitte!?

Achja, den Verfasser des Zitats muss ich ja noch nennen: Er heißt Sebastian und sein Kommentar auf heise online ist sehr lesenswert.

Vielleicht fällt dieses Posting etwas launisch aus, aber irgendwie weiß ich bei diesem Thema nicht so richtig, ob man darüber lachen oder weinen soll - bei (fast) jeder anderen Seite wäre es ja relativ egal, ob jetzt Tabelle oder semantisches Markup, ob nun Doctype oder nicht. Aber von heise online darf durfte man ja wohl mehr erwarten.

Na dann: Gute Nacht.

p:first-line

der ie hat ein problem damit, das pseudo-element first-line korrekt in bezug auf die darstellung über die gesamte browserbreite darzustellen.

es gibt einen - leider aber nicht in css2 validen - workaround dafür

dieser wird zwar vom w3c in css3 dargestellt und ist auch erst ab css3 valide (der ie unterstützt css3 in diesem fall bereits):

p:first-line { background-color: red; }
p::first-line { background-color: lime; }

tja, der trick mit dem doppelten doppelpunkt!

Grafische Buttons für Formulare

Manchmal kann man stundenlang grübeln und kommt nicht weiter. Danach einfach mal drüber schlafen, wenn es wichtig ist, beschäftigt sich das Gehirn damit in der Nacht - und siehe da, es findet eine Lösung ;)

Bisher wusste ich zwar, dass man Absende-Buttons per HTML als Image einbinden kann, selbiges wollte aber natürlich nicht für Abbrechen- und Durchsuchen-Buttons funktionieren -> aber jetzt hab ich eine Lösung (keine Ahnung, wahrscheinlich bin ich nicht der erste mit dieser Lösung, aber egal):

Hier die benötigten CSS-Definitionen:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
.absenden {
background-color: transparent;
background-image: url(absenden.gif);
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 20px;
font-size: 0px; /* damit nn7 keine ersatzschrift anzeigt */
border: 0px solid white;
}
.abbrechen {
background-color: transparent;
background-image: url(abbrechen.gif);
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 20px;
font-size: 0px; /* nn7 */
border: 0px solid white;
}

Wichtig dabei ist es, die Values der Buttons mit einem maskierten Leerzeichen zu versehen, da Netscape 7 ansonsten eine “Ersatzbeschriftung” anzeigt!

Standardmäßig zeigen die Browser den Default-Cursor (Pfeil) an. Nachdem die CSS-Definition cursor: hand; nicht spezifiziert und somit nicht valide ist, kann man sich hier - wenn man das will - mit einem grafischen Cursor (*.ico) helfen ;)

Gegen Zweckentfremdung von Tags

Ein guter Rat von Alp Uçkan, via Usability Inside.

Vertical-Align II

Bezugnehmend auf dieses Posting vom 20.10.2003 möchte ich noch eine ergänzende Quelle auf der Website von “Web-Page-Design” für die Positionierung mithilfe von Vertical-Align nennen.

XML-Feed


Login