Mouse Over Effekt über Img

[norah]

@gunnar

ok, sorry :-(
momentan stehen nur zwei Referenzen nebeneinander obwohl drei auf jeden fall passen müssten. (hab ich nochmals per screenshot ausgemessen)

Ich habe versucht:
-float:left im CSS
-dem div referenzen eine width von 924px zu geben
-<nobr> nach <ul id="referenzen"> und nach dem dritten </li> element
-whitspace:"nowrap" und einem <br> nach der dritten Referenz im html (das steht jetzt noch im code)

Leider führt alles zum selben Ergebnis --> nach der zweiten Referenz wird umbrochen.

Mein html Code sieht nun so aus:

<ul id="referenzen">  
  <li>  
    <a href="projekt1">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 1</figcaption>  
      </figure>  
    </a>  
  </li>  
  <li>  
    <a href="projekt2">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 2</figcaption>  
      </figure>  
  </li>  
  <li>  
    <a href="projekt3">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 3</figcaption>  
      </figure>  
      <white-space="nowrap">  
  </li>  
   <br>  
  <li>  
    <a href="projekt4">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 4</figcaption>  
      </figure>  
    </a>  
  </li>  
  <li>  
    <a href="projekt5">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 5</figcaption>  
      </figure>  
  </li>  
  <li>  
    <a href="projekt6">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 6</figcaption>  
      </figure>  
  </li>  
</ul>

mein css so:

#referenzen  
{  
        list-style: none;  
        overflow: hidden;  
		margin: 0 0 8px 0;  
		padding: 0;  
		float:left;  
}  
  
#referenzen li  
{  
        float: left;  
		margin: 8px 8px 8px 0;  
}  
  
#referenzen figure  
{  
        margin: 0;  
        overflow: hidden;  
        position: relative;  
}  
  
#referenzen a, #referenzen img  
{  
        color: black;  
        display: block;  
}  
  
#referenzen figcaption  
{  
        background: rgba(255, 255, 255, 0.5);  
        left: -10000px;  
        padding: 1em;  
        position: absolute;  
        top: 0;  
        width: 100%;  
}  
  
#referenzen a:hover figcaption  
{  
        left: 0;  
}  

ich hoffe das war jetzt besser erklärt und zeigt, dass ichs versucht hab.
lg norah