nicht angemeldet
ich bin mal so frei und mach dir dafür einen css-schnipsel - aber ich muss jetzt erst mal kurz weg ;)
so, ausgehen von meinem ursprünglichen vorschlag für deinen quelltext hab ich das hier gemacht
example1.html
wie du siehst, ist hier von design noch nichts zu sehen - lediglich struktur ist da (das wofür html gut ist) in einer imho klugen, logischen abfolge (wenn auch etwas unvollständig)
zu diesem zeitpunkt muss dir das design scheissegal sein - der inhalt muss gut "aussehen", ohne stylesheet muss die seite für einen benutzer bedienbar sein
der nächste schritt ist es, die strukturbildenden elemente in etwa so hinzurücken, wie es das layout erfordert - das geht fast immer ohne etwas im html zu verändern (auch in diesem fall)
siehe dazu example2.html - die strukturbildenden elemente sind in verschiedenen grautönen gefärbt, damit man die verschachtelung ansehen kann
mehr sollte man vorerst nicht machen, das ganze sollte natürlich von den abmessungen zum design passen, ab hier muss man also sein köpfchen anstrengen (mit zunehmender erfahrung immer weniger) zur arbeitserleichterung färbt man alles bunt ein - manche verwenden auch gepunktete rahmen (von denen rate ich allerdings ab, da sie im box-model zur breite des elements dazugerechnet werden - das könnte bei pixelgenauen layouts zu problemen führen, da man das auch wärenden dem testen immer bedenken muss)
wie du siehst hab ich noch kein weiteres element im html-quelltext hinzugefügt
wenn das soweit steht, kann man mit verschiedenen browsertests beginnen: pseudoinhalt rein und raus, viewport kleiner und größer machen, das ganze in verschiedenen browsern ansehen usw - wenn alles passt und das layout überall gleich aussieht (das ist in diesem stadium eigentlich bis auf die texte eigentlich problemlos möglich) kann man weiter zum nächsten schritt
jedes element bekommt jetzt hintergrundbilder:
example3.html diese sollten so gewählt werden, dass sie jedem element den hintergrund verpassen, den sie zum großteil haben werden (in der regel also sich widerholende hintergrundgrafiken) - ich hab mir dafür mal deine ausgeliehen, auch wenn diese für den zweck eigentlich z groß bemessen sind oder teilweise ungünstig ausgeschnitten wurde - wie gesagt, hier ist etwas nachdenken gefragt: du musst das layout sinnvoll zerschneiden, damit jedes element das richtige hintergrundbild bekommt
auch das wird wieder getestet (wie beim vorherigen schritt) um zu sehen was passiert, ob die verläufe alle bei unterschiedlichen größen passgenau sind (bei den von mir verwendeten grafiken aus deinem layout ist das natürlich nicht der fall - du musst drauf achten, dass es so wenig überlappungen wie möglich gibt und sich widerholende grafiken (wie zb der hintergrund des html-elements) so klein wie möglich sind und wirklich nahtlos aneinanderliegen können
im übrigen solltest du die bilder aufgrund ihrer selektoren benennen, da jedes element ohnehin nur ein hintergrunbild haben kann, ist das ein meiner erfahrung nach sehr effizentes systeme - das hintergrundbild von <body /> heisst also body.png - das hintergrundbild des divs mit der id "inhalt" heisst inhalt.png - usw
jedenfalls haben wir jetzt festgestellt, dass wir ein problem haben - die kästen selbst haben in deinem fall oben und unten auch einen rahmen (der aber nicht durch das sich widerholende hintergrundbild abgedeckt werden kann) bei flüssigen layouts kommt jetzt eine beliebige "runde ecken"-technik zum einsatz (sprich 4 ineinanderliegende elemente), in deinem fall reichen 2 weitere (da wir in summe nur 3 grafiken brauchen)
diese könnte man zwar mittels css als pseudo-element erzeugen, aber leider spielen da manche "browser mit blauem e im logo" nicht mit ;) - darum werden echte elemente eingefügt, wie in diesem beispiel:
example4.html
das sollte aber nur da gemacht werden, wo es wirklich notwendig ist und nicht, weil man sich nicht zu helfen weiss
im falle deiner navigation zb brauchst du keine elemente einfügen - du hast einerseits die 2 li-elemente aussen herum (die bekommen den oberen teil, wie in meinem beispiel), das darinliegende ul-element bekommt den unteren teil und die wiederum darinliegen li-elemente (also die eigentlichen menüpunkte) bekommen dann den sich widerholenden hintergrund (mit den gepunkteten strichen)
alternativ kannst du auch das äusserste li-element mit einem verlauf versorgen, das span-element (also die "überschrift" der ebene) so verwenden wie ich das im inhalt getan habe und das ul-element dann den unteren teil erledigen lassen - möglichkeiten gibts da mehrere
die beste vorgehensweise ist in den meisten fällen von aussen nach innen zu arbeiten bzw noch besser zuvor alle standardelemente zu formatiere (textabsätze, überschriften, listen usw)
so, und jetzt hoffe ich, dass du damit was anfangen kannst und ich nicht umsonst geschrieben habe :D