dtp: positionierung von grafiken und text übereinander

SELF-Forum

positionierung von grafiken und text übereinander

dtp
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. positionierung von grafiken und text übereinander

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo dtp,

    da kann ich dir fast nur dasselbe raten wie tunichtgut.

    Arbeite mit ineinander verschachtelten Block-Elementen und weise diesen positionierte Hintergrundbilder zu. Wenn du deine linke Navigation floaten lässt, brauchst du auch keine Tabelle:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  
  "http://www.w3.org/tr/html4/loose.dtd">  
<html>  
<head>  
<title></title>  
<style type="text/css">  
[code lang=css]  
#Menu {  
 background:url(http://dtpweb.dt.funpic.de/stuff/HP/layout/layout_07_04_small.gif) repeat-y;  
 width:250px;  
 float:left;  
}  
  
#MenuHead {  
 background:url(http://dtpweb.dt.funpic.de/stuff/HP/layout/layout_05_02.gif) no-repeat;  
}  
  
#MenuFoot {  
 background:url(http://dtpweb.dt.funpic.de/stuff/HP/layout/layout_09_06.gif) no-repeat 0 100%;  
 padding:10px 20px;  
}

    </style>
    </head>
    <body>
    <div id="Menu">
     <div id="MenuHead">
      <div id="MenuFoot">
       <ol>
        <li>Hier</li>
        <li>kannst</li>
        <li>du</li>
        <li>so</li>
        <li>viele</li>
        <li>Punkte</li>
        <li>unterbringen</li>
        <li>wie</li>
        <li>du</li>
        <li>magst!</li>
       </ol>
      </div>
     </div>
    </div>
    <div id="Content">Hier der Content</div>
    </body>
    </html>
    [/code]

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. positionierung von grafiken und text übereinander

      dtp
      – Informationen zu den Bewertungsregeln

      danke für die hilfe!
      ich wusste echt nicht weiter...

      mfg
      dtp

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln