positionierung von grafiken und text übereinander

[dtp]

hallo!

ich mache gerade ein neues layout für meine homepage und stehe nun vor einem problem. aber zunächst mal ein paar infos *g*

das layout betseht aus einer navigationsspalte und einem danebenliegenden hauptteil, wo der inhalt rein kommt.
die navi leiste, wie auch der hauptteil, bestehen aus drei grafiken die übereinander angeordnet sind. dabei soll die mittlere immer wiederholt werden, sodass die seite dynamisch "verlängerbar" ist. die obere und untere grafik beinhaltet eine art farbverlauf.
ich habe nun zwei div-elemente definiert, sodass der text in der navileiste schon auf gleicher höhe anfängt wie die oberste grafik. mit z-index lässt sich das gut regeln.

problem:
die dritte grafik unten soll auch sozusagen vom navi-text(bzw content im hauptteil) "überschrieben" werden. das kann ich gut mit dem bottom attribut machen und die grafik wird auch "überschrieben".
im hauptteil steht nun jede menge content, dadurch verlängert sich auch automatisch die navi-leiste. dadurch, wird die mittlere grafik unterhalb der untersten weiter wiederholt.
komischerweise ist das auch bei dem hauptteil so.

aber ich glaube gucks euch lieber mal an, weil diese beschreibung vielleicht nicht die beste ist...

http://dtpweb.dt.funpic.de/stuff/HP/dtpweb.html/

und hier ein bisschen code:

  
<tr>  
    <td style="background-image:url(layout/layout_07_04_small.gif);width:249px;" valign="top">  
      <div style="position:relative;top:30px;left:27px;z-index:1">  
        <!-- navi inhalt... -->  
        <div style="position:absolute;top:-30px;left:-27px;z-index:-1">  
          <img src="layout/layout_05_02.gif" height="122">  
        </div>  
        <div style="position:relative;bottom:95px;left:-27px;z-index:-1">  
          <img src="layout/layout_09_06.gif" height="125">  
        </div>  
      </div>  
    </td>  
    <td style="background-image:url(layout/layout_08_05_small.gif);width:667px;" valign="top">  
      <div style="position:relative;top:30px;left:27px;z-index:1">  
        <!-- content -->  
        <div style="position:absolute;top:-30px;left:-27px;z-index:-1">  
          <img src="layout/layout_06_03.gif" height="122">  
        </div>  
        <div style="position:relative;bottom:95px;left:-27px;z-index:-1">  
          <img src="layout/layout_10_07.gif" height="125">  
        </div>  
      </div>  
    </td>  
  </tr>  

habt ihr irgend eine idee wie man genanntes problem lösen kann oder irgendwie anders das umsetzen kann was ich mir vorstelle?
ich danke schonmal für antworten!

dtp