Was wollen wir mit diesem Rezept erreichen? Wir wollen eine hübsche, horizontale Navigation mit dem Sliding Doors Effekt; das mit möglichst wenig Markup und dazu noch so flexibel wie möglich. So soll es dann bei uns nachher aussehen:

Das Ergebnis

Und hier noch die Live-Ansicht der HTML-Seite.

Fangen wir mit dem Markup an. Der HTML-Teil für unsere Navigation ist nur eine Unordered List:

<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>&Uuml;ber mich</a></li>
<li><a href=”#”>Bilder</a></li>
<li><a href=”#”>Kontakt</a></li>
<li><a href=”#”>Extra langer Link</a></li>
</ul>

Das war schon der gesamte HTML-Teil. Beginnen wir nun mit dem Styling per CSS. Fangen wir mit dem ul-Tag an:

ul {
list-style: none;
width: auto;
height: auto;
overflow: hidden;
}

Das overflow: hidden; dient dazu, den Float der Listenelement ohne zusätzliches Markup wieder aufzulösen. Denn die einzelnen Listenelemente werden wir mittels float: left nebeneinander setzen:

li {
float: left;
width: auto;
margin-right: 2px;
background: url(images/right.jpg) no-repeat right;
}

Der Hintergrund ist die rechte Tür unserer Sliding Door:

Nun brauchen wir noch die linke Kante unserer Sliding Door, dann sind wir auch schon fertig:

li a {
width: auto;
height: 27px;
line-height: 27px;
padding: 0px 20px;
background: url(images/left) no-repeat left;
color: # 333;
}

Das Bild für die linke Tür:

Wie es funktioniert:

Wir haben dem Listenelement ein Hintergrundbild mit ausreichender Breite und einem no-repeat Befehl gegeben. Außerdem soll das Bild rechts im Listenelement angeschlagen werden. Verbreitert sich das Listenfeld auf Grund eines längeren Link-Textes so wird einfach mehr vom Hintergrundbild sichtbar.

Der Hintergrund des eigentlichen Links ist das linke Bild der Sliding Door und links angeschlagen. Es liegt über dem Hintergrund des Listenelements und verdeckt diesen. Dadurch wandert dieses Ende immer mit der Größe des Feldes mit. Durch den Befehl des paddings kann man zusätzlich den Innenabstand verändern und den Linktext zentrieren.

Alle Zutaten zu diesem Rezept herunterladen

Ich wollte eine horizontale Navigation erstellen, die zentriert im Head der Seite dargestellt werden sollte. Semantisch korrekt natürlich als eine unordered list. Hier das reine HTML:

<div id=”navbar”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Das wurde dann mit folgendem CSS gestylt:

#nav {
width: 100%;
height: 30px;
position: relative;
overflow: hidden;
}

Nun stylen wir die eigentliche Navigation:

#nav ul {
position: relative;
list-style: none;
left: 50%;
}

#nav ul li {
position: relative;
right: 50%;
float: left;
}

Das wars schon. Die einzelnen Navigationspunkte werden jetzt alle nebeneinander stehen und gleichzeitig im Container “nav” zentriert sein.

Heute veröffentlicht Pixel-Kingdom ein neues kostenloses Webseiten Template. Reines CSS, valides HTML und CSS. Von der Struktur auch für WordPress geeignet. Das Template kann kostenlos für kommerzielle und nicht kommerzielle Zwecke verwendet werden. Allerdings muss der Hinweis im Copyright Hinweis im Footer zusammen mit dem Link zu Pixel Kingdom erhalten bleiben. Diesen kann man aber entfernen, wenn man eine Kopie des Templates kauft. Dazu einfach eine Mail an info@pixel-kingdom.com schreiben.

Hier gehts zum Download

Hier gehts zum Demo

Was heißt im Bereich Webdesign “schlecht” überhaupt? Oder besser gefragt: Was heißt “schlechtes Design”? In Gesprächen hört man häufig folgendes Argument: “Wenn mir die Webseite gefällt, ist dass doch völlig okay!”. Nein, setzen, 6! Leider daneben, denn eine Webseite dient nicht dem eigenen Vergnügen, sondern soll den Kunden ansprechen.

1. Wenn mit einer Webseite Geld verdient werden soll, spielt es keine Rolle, ob die Webseite dem Betreiber persönlich gefällt oder nicht. Das hört sich vielleicht seltsam an, aber wenn die Webseite einer Gruppe gefallen soll, dann ist es die Gruppe von Menschen, die später Geld auf der Webseite lässt. Und das sind immer die Kunden, nicht der Besitzer. Ergo: Die Webseite sollte in erster Linie dem potentiellen Kunden gefallen, nicht dem Betreiber. Wenn die Webseite dem Betreiber ebenfalls gefällt: gut so.
2. Sicherlich gefällt dem “normalen” Menschen seine selbstgestaltete Werbung oder Webseite. Das Internet ist voll mit tollen Schriftarten, kleinen Cliparts, blinkenden Gifs und Flash-Animationen… Damit wird alles vollgepackt und deshalb sieht es toll aus. Nein, tuts nicht, definitiv nicht. Ein ehrlicher Vergleich zwischen der eigenen Webseite mit all diesen tollen Sachen und einer proffessionell erstellten Webseite wirds zeigen: Es kommt nicht nur auf das “wie” sondern auch auf das “wieviel” an. Wie bei Bademoden: Weniger ist mehr .
3. Das Internet und gängige Fachzeitschriften sind voll mit Angeboten, mit deren Hilfe man innerhalb von 2 Minuten und ohne jegliche Programmiertechnik eine tolle Webseite mit allen erdenklichen Funktionen erstellen kann. Oh Gott, man stelle sich so etwas im Bereich von Autos vor: Bau dir innerhalb von einem Tag ein Auto ohne Vorkenntnisse zusammen… Spass beiseite. Wohin so etwas führt, durfte ich während meiner Zeit bei einer Suchmaschinenoptimierungsfirma sehen. Webseiten, die nicht nur optisch eine Katastrophe waren sondern auch programmiertechnisch. Da wurde alles wild zusammengeklatsch, teilweise war das HTML-Markup so zerschossen das der W3C Validator die Flügel von sich streckte… Summa Summarum: Nicht nur die Gestaltung, sondern auch die Programmierung ist wichtig.

Wieso das Ganze? Punkt 1 und 2 meiner Aufzählung dreht sich um die visuelle Gestaltung einer Webseite. Wieso ist die wichtig? Eine gut gestaltete Webseite vermittelt dem Besucher das Gefühl von Seriosität, Sicherheit und Proffessionalität. Alles drei wichtige Gefühle bei einer Kaufentscheidung. Wer kauft nicht lieber in einem seriösen Geschäft ein, als in einer Ramschbude?

Punkt 3 meiner Aufzählung dreht sich um die Programmierung einer Webseite. Es langt nicht nur, eine hübsche Webseite sein Eigen zu nennen, diese Webseite muss auch gefunden werden. Dazu muss sie für Suchmaschinen optimiert werden. Sowohl der Code, als auch die Geschwindigkeit einer Webseite ist dafür ausschlaggebend. Wieso? Auf die Frage hin, welches die Limits für Google seien, antwortete ein Mitarbeiter der bekanntesten Suchmaschine: “Strom und Bandbreite”. Das wiederum bedeutet, dass Google (und nicht nur Google) Webseiten mit kurzen Ladezeiten eindeutig bevorzugt, was wiederum bedeutet, dass solche Webseiten eine höhere Chance auf ein gutes Ranking haben.

Was aber hat das nun alles mit dem Titel des Posts zu tun? Eigentlich ist alles, was ich hier beschrieben und erklärt habe leicht zu verstehen und einleuchtend, dennoch halten sich viele Webseiten entweder aus Unwissenheit oder aus irgendeinem anderen Grund nicht an diese simplen Regeln.

Hauptgrund hierfür ist meiner Meinung nach, dass viele Webseiten immer noch vom “Sohn des Chefs der Personalabteilung” zuhause gebastelt werden, weil es auf den ersten Blick billiger ist, als einen Profi damit zu beauftragen. Denn “Webdesigner” kann sich jeder schimpfen. Die Berufsbezeichnung des Webdesigners ist nicht geschützt, was wiederum bedeutet, dass sich auch der 14 jährige Sohn des Chefs der Personalabteilung so nennen darf. Und was bedeutet das wiederum? Das die Berufsbezeichnung “Webdesigner” kein Qualitätsmerkmal ist. Obwohl ich als Webdesigner arbeite und auch eine Ausbildung zum Mediengestalter Fachrichtung Design Nonprint hinter mir habe, werde ich einen Teufel tun und mich Webdesigner nennen.

Was bleibt also für die Zukunft? Ein Meilenstein für die Entwicklung des Berufes “Webdesigner” wäre eine verbindliche Ausbildung, nicht so etwas, wie es heutzutage als Nebenprodukt der Mediengestalter Print angeboten wird. Besonders im Raum Trier noch eine Katastrophe. Denn nicht nur das Gestalten gehört zum täglichen Brot des Webdesigners, sondern auch das semantisch korrekte Schreiben von HTML/CSS Code, Webprogrammierung und Suchmaschinenoptimierung. Das sind drei riesige Schlachtfelder, die man mit zwei Stunden “Multimedia” auf der Berufsschule nicht abarbeiten kann. Notwendig wäre also ein eigener Unterricht.

In der Zwischenzeit werde ich mich weiter anders nennen und warten, bis die Berufsbezeichnung des Webdesigners geschützt wird.

1. Man benutzt die “Conditional Comments” und gibt dem Internet Explorer 6 sein eigenes, nur für ihn erstelltes Stylesheet. Das ist eine gängige Methode, ohne Frage. Allerdings muss dafür eine eigene CSS Datei ins Web geladen werden.
2. Man weiss, wieso es das Webdesign im Internet Explorer zerhaut. Diese Gründe werde ich jetzt im Einzelnen besprechen bevor ich mich dranbegebe, meine eigene Seite im IE6 zu betrachten (Gott sei mir gnädig!).

Problem:

Der Container des Inhaltes und der Container der Navigation passen nicht mehr nebeneinander

Der Internet Explorer 6 hat die dumme Angewohnheit, bei floatenden Boxen den angegebenen Margin Wert zu verdoppeln:

#content {
float: left;
margin-right: 10px;
}

Aus dem oben geschilderten Beispiel macht der IE6 einen Margin-right Wert von 20px, was zwangsläufig dazu führt, dass sich die Navigation statt an der Seite unter dem Content platziert.

Die Hilfe:

Einfach die CSS-Anweisungen für den Content-Container mit einem “display: inline;” ersetzen. Dadurch ergeben sich keinerlei Nachteile in anderen Browsern und der Internet Explorer 6 wird den Margin Wert so übernehmen, wie der Webdesigner es sich vorgestellt hat.

Wieso?

Sobald ein Element des Webdesigns über den Wert “float” verfügt, wird diesem vom Internet Explorer 6 automatisch der “Display”-Wert “Block” gegeben. Dadurch doppeln sich die Margin Werte und das Design wird zerhauen. Wird der Display Wert allerdings auf “inline” gestellt, entfällt diese Zuweisung. Tja, der Internet Explorer…