Problem mit Ausrichtung von Div-Bereichen

[Martin]

Hallo,

Ich habe ein Problem mit der Positionierung von Elementen über CSS.

Es geht darum, folgendes Layout zu realisieren:

+--------------------------------+
| Filmstreifen                   |
+--------------------------------+
| Vorschaubilder                 |
+--------------------------------+
| Filmstreifen                   |
+--------------------------------+
| Pfeile und Leiste zum Scrollen |
+--------------------------------+

Der HTML-Code sieht folgendermassen aus:

<div id="hold">
  <div id="FilmstreifenOben"></div>
  <div id="wn">
    <div id="lyr1">
      <table border="0" cellpadding="0" cellspacing="0" id="t1">
        <tr>
          <td style='border: 1px solid #ffffff'><img border='0' src='pic/pic/klein/0_Tina/0_Einzelfotos/0_Kinderfotos/0.png'></td>
          <td style='border: 1px solid #ffffff'><img border='0' src='pic/pic/klein/0_Tina/0_Einzelfotos/0_Kinderfotos/0.png'></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="FilmstreifenUnten"></div>
  <div id="scrollbar">
    <div id="left"><a href="#" onclick="return false" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseout="dw_scrollObj.stopScroll('wn')" onmouseover="dw_scrollObj.initScroll('wn','left')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img height=11 src="pic/nav/btn-lft.gif" width=11></a></div>
    <div id="track">
      <div id="dragBar"></div>
    </div>
    <div id="right"><a href="#" onclick="return false" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseout="dw_scrollObj.stopScroll('wn')" onmouseover="dw_scrollObj.initScroll('wn','right')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img alt="" height=11 src="pic/nav/btn-rt.gif" width=11></a></div>
  </div>
</div>

Und der zugehörige CSS-Teil:

div#hold
{
  position: relative;
  width:    300px;
  height:   200px;
  z-index:  100;
  overflow: hidden;
  background-color: #ff0000
}

div#FilmstreifenOben,
div#FilmstreifenUnten
{
  position:          absolute;
  width:             300px;
  height:            10px;
  left:              0px;
  background:        url(pic/gfx/L_filmstreifen.png);
  background-repeat: repeat-x
}

div#FilmstreifenOben
{
  bottom: 88px
}

div#FilmstreifenUnten
{
  bottom: 16px
}

div#wn
{
  position: absolute;
  width:    300px;
  height:   62px;
  clip:     rect (0px 300px 62px 0px);
  left:     0px;
  bottom:   40px;
  z-index:  1;
  overflow: hidden
}

div#lyr1
{
  position:   absolute;
  left:       0px;
  bottom:     40px;
  visibility: hidden;
  z-index:    1
}

div#scrollbar
{
  position:  absolute;
  width:     300px;
  height:    11px;
  left:      0px;
  bottom:    0px;
  font-size: 1px;
  z-index:   2
}

div#track
{
  position:   absolute;
  width:      276px;
  height:     11px;
  left:       12px;
  top:        0px;
  background: url(/images/nav/track.gif) #336;
  z-index:    1
}

div#dragbar
{
  position:         absolute;
  width:            20px;
  height:           9px;
  left:             1px;
  top:              1px;
  background-color: #ceced6;
  z-index: 1
}

div#left
{
  position: absolute;
  left:     0px;
  top:      0px;
  z-index:  2
}

div#right
{
  position: absolute;
  right:    0px;
  top:      0px;
  z-index:  3
}

a img
{
  border: none
}

Als Resultat habe ich aber leider nur, dass die scrollbaren Vorschaubilder immer am oberen Rand des Containers "kleben" und nicht, wie beabsichtigt, zwischen den beiden Div-Bereichen "Filmstreifen" angezeigt werden.

Ich habe aber - aktuell nur noch experimentell und noch nicht genau positioniert - den Abstand der scrollbaren Vorschaubilder vom unteren Rand angegeben.

Einen Link zum Ansehen kann ich Euch leider nicht bieten, da ich die Homepage noch auf meinem Rechner programmiere.

Wo liegt der Fehler ?

Vielen Dank für Eure Antworten.

Gruss, Martin

[Jeena Paradies]

Hallo,

+--------------------------------+
| Filmstreifen                   |
+--------------------------------+
| Vorschaubilder                 |
+--------------------------------+
| Filmstreifen                   |
+--------------------------------+
| Pfeile und Leiste zum Scrollen |
+--------------------------------+

Also so etwas würde ich einfach untereinander schreiben

<div class="filmstreifen"></div>
<div class="vorschaubilder"></div>
<div class="filmstreifen"></div>
<div class="pfeile"></div>

Dadurch dass divs ja Blockelemente sind werden sie einfach untereinander angezeigt, ohne dass man sie überhaupt absolut positionieren muss. Ich vermeide persönlich absolute Positionierung immer wo es geht. Somit bekomme ich nie Probleme mit verschiedenen Fenstergrößen und so weiter.

Grüße
Jeena Paradies