000
13.11.2007, 20:23 Uhr
xXx
Devil
|
Also erstmal der Code ... ist evtl. etwas komplexer aber egal:
| Code: |
#content {
margin-top: 2px;
background-color: #FFFFFF;
padding: 10px;
min-height: 200px;
height: 100%;
color: #262626;
text-align: justify;
}
#content #editorial_image {
/*display: block;*/
width: 620px;
height: 250px;
position: relative;
background: url('../images/editorial_001.png') no-repeat;
margin-bottom: 20px; /* siehe *.desc a */
}
#content #editorial_image *.desc {
display: none;
width: 100px;
background: none;
border: 2px #262626 solid;
z-index: 20;
}
#content #editorial_image:hover *.desc {
display: inline;
}
#content #editorial_image:hover *.desc a {
display: none;
top: 242px;
left: 1px;
position: absolute;
width: 609px;
height: 10px;
padding: 5px;
text-decoration: none;
background-color: #262626;
color: #FFFFFF;
}
#content #editorial_image:hover *.desc:hover a {
display: inline;
}
|
So ... das ist nen bissel rumgetrickse, sollte aber noch standardkonform sein.
| Code: |
<div id="editorial_image">
<span class="desc" style="left: 55px; top: 50px; height: 90px;"><a href="#data">data</a></span>
<span class="desc" style="left: 110px; top: 0px; height: 90px;"><a href="#bar">bar</a></span>
<span class="desc" style="left: 170px; top: 0px; height: 90px;"><a href="#foo">foo</a></span>
</div>
|
... So ... also dadurch soll erreicht werden, dass wenn man über das Bild(<div id="editorial_image"> geht, die <span>-Elemente sichtbar werden (in Form von Rahmen). Wenn man nun innerhalb einer dieser Rahmen ist, soll sich unter dem Bild der Hyperlink, der als Anker im entsprechenden <span>-Element angegeben ist, zeigen (als grauer Balken mit weißer Schrift ...).
Also das geht auch soweit, nur dass die Bilder nicht mehr an der korrekten Position auf dem Bild sind und auch nicht die korrekte Breite/Höhe haben. Jemand eine Idee woran das liegen könnte? 
Also wenn ich bei *.desc a auch als position relativ angebe, haben die Rahmen die korrekte Breite/Höhe sind aber nicht an der richtigen Stelle und der Balken mit dem Anker ist auch an einer falschen Stelle  |
