Die Navigations Grafik

Diese hier ist nicht transparent, es soll hier nur verdeutlicht werden wie die Grafik aussieht.

Der HTML Aufbau der Navigation

Ein Recht simpler Aufbau hier. Eine Liste mit fünf Listenpunkten die die jeweiligen Navigationspunkte darstellen. Jeder hat eine eigene "klasse" (man könnte auch ID's nutzen) und wenn man auf der jeweiligen Seite ist wird der klasse eine zweite zugewiesen die angibt das der Aktivstatus abgerufen werden soll. Der Rest ist einfach der Link und der Text der zwischen dem Link-Tag steht wird nicht angezeigt (kommen wir noch im CSS Teil drauf zu sprechen).

<ul id="main-navi">
<li><a class="start start-akt" href="index.html">Start</a></li>
<li><a class="portfolio" href="index.html">Portfolio</a></li>
<li><a class="blog" href="index.html">Blog</a></li>
<li><a class="about" href="index.html">About</a></li>
<li><a class="contact" href="index.html">Contact</a></li>
</ul>

Die CSS Formatierung der Navigation

Hier gibt es schon ein wenig mehr zu schreiben aber wenn man es sicher genauer anschaut sieht man das es im Grunde immer das gleiche ist und sich nur immer ein paar Werte ändern. Aber geschrieben muss es trotzdem werden. Sollte im Grunde alles selbsterklärend sein. Zwei Sachen die vielleicht nicht jedem klar sind habe ich mit Kommentaren versehen.

ul#main-navi {
width:650px;
height:429px;
float:left;
padding:79px 0 0 340px;
background:url(../images/head.jpg) left top no-repeat;
}

ul#main-navi li {
float:left;
margin:0 10px 0 0;
}

ul#main-navi li a.start , ul#main-navi li a.portfolio , 
ul#main-navi li a.blog , ul#main-navi li a.about , ul#main-navi li a.contact {
display:block;
height:60px;
text-indent:-9999px; 

/* verschiebt den nach links das er nicht sichtbar aber dennoch da ist */
}

ul#main-navi li a.start {
background:url(../images/main-navi.png) -20px 0 no-repeat;
/* erster Wert ist von Links und der zweite Wert von oben gerechnet */
width:91px;
}

ul#main-navi li a.start:hover {
background-position:-20px -60px;
}

ul#main-navi li a.start-akt {
background-position:-20px -120px;
}

ul#main-navi li a.portfolio {
background:url(../images/main-navi.png) -119px 0 no-repeat;
width:141px;
}

ul#main-navi li a.portfolio:hover {
background-position:-119px -60px;
}

ul#main-navi li a.portfolio-akt {
background-position:-119px -120px;
}

ul#main-navi li a.blog {
background:url(../images/main-navi.png) -270px 0 no-repeat;
width:103px;
}

ul#main-navi li a.blog:hover {
background-position:-270px -60px;
}

ul#main-navi li a.blog-akt {
background-position:-270px -120px;
}

ul#main-navi li a.about {
background:url(../images/main-navi.png) -384px 0 no-repeat;
width:101px;
}

ul#main-navi li a.about:hover {
background-position:-384px -60px;
}

ul#main-navi li a.about-akt {
background-position:-384px -120px;
}

ul#main-navi li a.contact {
background:url(../images/main-navi.png) -496px 0 no-repeat;
width:101px;
}

ul#main-navi li a.contact:hover {
background-position:-496px -60px;
}

ul#main-navi li a.contact-akt {
background-position:-496px -120px;
}

Vorteile dieser Methode

Ganz klar der, dass man nur eine Grafik verwenden muss und diese auch nur einmal geladen werden muss. Man hat keine hänger wenn man mit der Maus über das Menü geht da die Grafik ja schon beim ersten Laden der Seite mitgeladen wird und dann immer nur verschoben wird. Das ganze wird auch übersichtlicher da man nur noch eine Grafik hat die man bei Bedarf anpassen muss und nicht mehr ein oder zwei Hände voll Grafiken.

Nachteile dieser Methode

Wenn man es wirklich mal ändern muss das Menü dann muss man ein wenig am CSS basteln falls sich irgendwelche Größen geändert haben sollten. Sonst kann ich keine weiter feststellen. Wer welche kennt kann diese ja Lautstark in den Kommentaren preis geben.

Das Ergebnis könnt ihr nun anschauen bzw. downloaden

Vielleicht war es ja dem ein oder anderen Hilfreich...
LIVE DEMO DOWNLOAD

Es muss was neues her

Von daher war lange die überlegung was ich ändern kann um Arbeitsabläufe zu vereinfachen. Auch war die Frage ob das alte Design bestehen bleiben sollte oder ob auch hier was gemacht werden sollte. Es kam auf zweiteres hinaus und somit wurde Photoshop gestartet und wild drauf los gewerkelt.

Vorgeschmack?

Eins war klar: Es sollte heller und freundlicher werden. Holz ist schön und Seiten die dieses Element nutzen sind meist wunderschön und es macht spaß diese zu betrachten. Aber es sollte beim Redesign nicht mehr die tragende Rolle spielen. Alte Sachen sind aber dennoch wieder zu finden. Einerseits gehören sie ein wenig dazu und andereseits passten sie auch ganz gut zum neuen Design.

Technisch auf höchstem Niveau?

Vielleicht würde ich sagen...
Mit viel Hilfe der tollen Seite von Frank Bueltge wurde an so einigen Stellen wirklich viel gemacht. So ist der Arbeitsaufwand nun um einiges geringer und das ganze ist auch hundert mal flexibler als vorher. Auch ein bisschen JQuery kommt nun zum Einsatz welches dem ganzen noch ein wenig mehr Lebendigkeit gibt.

Hauptziel der neuen Seite?

Das Portfolio sollte wieder mehr in den Vordergrund rücken. Die aktuelle Seite hier ist sehr Bloglastig und das wollte ich ändern. Primär soll es nicht um das Bloggen gehen. Die Arbeiten haben Priorität und das sollte ganz gut klappen mit dem neuen Design

Wann ist es fertig

It's done when it's done :) OK, sagen wir mal so. Es ist so gut wie fertig aber wann es genau online gehen wird ist noch nicht klar. Vielleicht aber schon nächstes Wochenende, es hängt davon ab wie gut ich vorran komme.