[CSS] Element nicht die richtige Breite

[devDevil]

Also erstmal der Code ... ist evtl. etwas komplexer aber egal:

 #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.
Nutzen tue ich das dann so:

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

Mit dem Quellscript 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

Mfg devDevil

 

[Maik]

Hi,

versuch es mal hiermit, damit die Boxen die vordefinierte Höhe/Breite annehmen:

#content #editorial_image:hover *.desc {
    display: block;
}

 

[devDevil]

Hmm ich dachte das zwischendurch ausprobiert zu haben ... komisch. Auf jedenfall zeigt er die Elemente jetzt schonmal mit korrekter Breite / Höhe an. Ist wohl jetzt noch was im CSS-Code dazu gekommen ... ist aber unwichtig:

#content #editorial_image:hover *.desc a:before {
    text-transform: uppercase;
    color: #666666;
    content: attr(job) " ";
}

...

Ehm das Problem was jetzt noch besteht ist dass er die Elemente jetzt nicht an der richtigen Position anzeigt :/ Also sie werden alle an der linken Seite untereinander ausgerichtet. Ein position:relative in #content #editorial_image *.desc würde natürlich zumindest für eine teilweise verbesserung führen, damit aber die absolute position von a wiederum zerstören.
Jemand eine idee? DANKE!

 

[Maik]

Die Positionsangaben top,right,bottom und left, wie auch die Schichtpositionierung z-index-Eigenschaft greifen nur in Verbindung mit der position-Eigenschaft.

Kann man sich die Seite denn mal "live" anschauen?

 

[devDevil]

Hmm mal mal schnell ne neue Seite angelegt, wo du es dir "live" angucken kannst
http://root.devilentertainment.de/tmp/index.html

 

[Maik]

Hi,

die absolute Position der Links wird in diesem Fall für jeden einzelnen individuell festgelegt, damit sie an derselben Position unterhalb des Bildes angezeigt werden.

Nur mal so als Denkanstoß für die ersten drei, basierend auf den derzeitigen Positionsangaben der <span>-Tags:

#content #image:hover *.desc {
         display: block;
         position:relative;
}

#content #image:hover *.desc a {
         display: none;
         /*top: 300px;*/ /* auskommentiert = deaktiviert */
         /*left: 1px;*/ /* auskommentiert = deaktiviert */
         position: absolute;
         width: 467px;
         height: 10px;
         padding: 5px;
         text-decoration: none;
         background-color: #262626;
         color: #FFFFFF;
}

#ank1 { left:-56px; top:248px; }
#ank2 { left:-111px; top:204px; }
#ank3 { left:-171px; top:90px; }

<a href="#ank1" id="ank1" job="{- Job -}">...</a>
<a href="#ank2" id="ank2" job="{- Job -}">...</a>
<a href="#ank3" id="ank3" job="{- Job -}">...</a>