Design umsetzten?!

Hallo,
ich habe in den letzten Tagen ein neues Design für meine Homepage "entwickelt" (natürlich ist es nicht ganz fertig, da man ja nicht alles bei Photoshop mit einbaun kann^^).

Hier seht ihr meinen Entwurf:

[Blockierte Grafik: http://s3.directupload.net/images/110304/temp/9tduu96k.jpg]

Ich wollte nun schonmal ein paar Tipps haben von euch, bevor ich mich selbst ran mache und das Ganze umsetze^^
Wie ich das nun alles am Besten mit den einzelnen Div's und Float's mache
Der Doctype sollte am besten Strict sein

Achso, wichtig ist vllt noch, dass das ganze auf einem CMS läuft, also müssen dann am Ende halt noch ein paar "Funktionen" davon mit rein.

Liebe Grüße

Naja direkt Fragen habe ich im Moment eigentlich noch nicht
Naja da werde ich mich morgen mal ransetzten und in bisl was zusammentippen
Wenn ich der Meinung bin, dass es fertig ist, werde ich es hier mal posten und ihr könnt ja dann sagen, was ich falsch gemacht habe

Lg

Hey,
danke für den Tipp

Jetzt habe ich schon das erste Problem

Die Navigation von Websitebaker wird so eingefügt:

<ul>
<li><span class="menu_current"><a href="http://nadidz.square7.de" target="_top"  class="menu_current"> Home </a></span>
</li>
<li><span class="menu_default"><a href="http://nadidz.square7.de/pages/test1.php" target="_top"  class="menu_default"> Test1 </a></span>
</li>




</ul>

Wie man auf meiner Grafik erkennen kann, soll nun jeder Menüpunkt eine einzelne Grafik bekommen, also habe ich mir gedacht, dass ich jedem <li> eine Hintergrundgrafik zuordnen muss:

#menu li {
    background:url(images/navi.png) no-repeat;
    display:inline;
    list-style-type:none;
    padding-left:10px;
}

Aber das funktioniert nicht (wäre ja auch zu schön gewesen ^^)
Wie soll ich das jetzt umsetzen?

So sieht gerade der ganze Code vom Menü aus:

#menu {
    float:right;
    position:relative;
    width:113px;
    height:217px;
}




#menu li {
    background:url(images/navi.png) no-repeat;
    display:inline;
    list-style-type:none;
    padding-left:10px;
}




#menu a {
    font-size:16px;
    font-family:arial;
    color:#FFFFFF;
    text-decoration:none;
}

Und hier meine Page, wo ich teste:
<!-- m --><a class="postlink" href="http://nadidz.square7.de/">http://nadidz.square7.de/</a><!-- m -->

lg

Juhu, es hat geklappt^^

Habe das jetzt so gemacht, wie du es gesagt hast

#menu li {
    float:right;
    position:relative;
    display:block;
    height:217px;
    width:113px;
    background:url(images/navi.png) no-repeat;
    list-style-type:none;
    padding-left:10px;
}

Jetzt habe ich nur das Problem, dass die Schrift ganz oben hängt^^ Jetzt wollte ich die mit padding runterholen, aber das geht ja irgendwie bei Links nicht (aus meiner Erfahrung :D)

PS: das mit dem current kann ich nicht rausnehmen, weil das der Part ist, der vom CMS selbst eingefügt wird Sicherlich kann man das irgendwo ändern, aber im Moment stört es mich nicht so sehr

Lg

Hey, das hat funktioniert. Was es alles für Tags und so gibt, die ich noch nicht kenne, dass ist echt bewundernswert
Nur irgendwie habe ich das Problem, dass meine Navigation falsch angeordnet wird. Der Quelltext, welcher wieder vom CMS eingefügt wird, ist richtig rum, aber das was als erstes stehen soll, wird als letztes angezeigt?!

Habt ihr eine Idee, woran das liegt?

Lg

Hey,
tut mir leid, dass ich mich erst jetzt wieder melde, aber in der Woche habe ich nur wenig Zeit wegen Schule, Fahrschule und Arbeit

Hier der Code zum Menü:

#menu li {
    float:right;
    position:relative;
    display:block;
    height:217px;
    width:113px;
    background:url(images/navi.png) no-repeat;
    list-style-type:none;
    padding-left:10px;
    line-height:400px;
}




#menu a {
    font-size:16px;
    font-family:arial;
    color:#FFFFFF;
    text-decoration:none;
}

Lg