nicht angemeldet
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