Hallo,

ich verzweifel gerade an folgender Problemstellung:

Auf der Seite sollen sich verschiedene DIVs nebeneinander befinden:

Code :

1 2 3 4

.project{ float:left; margin:0px 20px 40px 0px; }

Die Breite dieser DIVs richtet sich nach der Breite der Bilder, die in das DIV "image" geladen werden.

Allerdings brauche ich ein weiters DIV "hover-effect", das genau so groß ist, wie das Bild und exakt über dem Bild liegt. So funktioniert es einigermaßen, aber das DIV "hover-effect" ist immer ca. 20px länger als das Bild!?

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.project{     float:left;     margin:0px 20px 40px 0px;     /*background-color:#F00;*/ } .project:hover{     cursor:pointer; } .images{ } .hover-effect{     position:relative;     z-index:3;     top:0px;     left:0px;     height:100%;     background-image:url(../../img/plus.gif);     background-repeat:no-repeat;     background-position:center; }   <div class="project">     <div class="images">         <div class="image"><img src="/img/img.png" width="692" height="277"/></div>         <div class="hover-effect">&nbsp;</div>     </div>     <br class="clear" /> </div>

Es wäre klasse, wenn jemand eine Lösung wüsste!

Problem ist gelöst. Ich lade später eine Beispieldatei hoch.

Zitat von philipp_m (vor drei Tagen)

Ich lade später eine Beispieldatei hoch.

"später" ist zeitlich ein doch deeeehnbarer Ausdruck

Stimmt. Ich meinte aber eigentlich schon das Später am selben Abend. Ich bin nur nicht mehr dazu gekommen. Hier nun die Datei.