4 Replies Latest reply: Aug 24, 2009 11:43 AM by Zabeth69 RSS

    floating div on top of other div which has image inside. Please help

    luadke Community Member

      Hi,

      the page is http://blackpaint.co.uk/BlackPaint09/films/

      I am trying to make it so the "SlantedWritingFilms" DIV floats on top of the image which is in the same DIV - without it pushing the image down.

      Perhaps its easier to look at the code:

       

       

      .SlantedWritingFilms {
           position:relative;
           font-family: Georgia, "Times New Roman", Times, serif;
           font-size: 20px;
           font-weight: 100;
           font-style: italic;
           color: #000;
           letter-spacing: 3px;
           padding-right: 20px;
           padding-bottom: 4px;
           padding-left: 9px;
           padding-top: 5px;
           top: 0px;
           -webkit-border-bottom-right-radius: 1ex 1ex;
           background-image: url(../images/Semi-transparent.png);
           left: 0px;
           visibility: visible;
           z-index: 5;
      }     


      .FilmStill {
           background-color: #000;
           width: 375px;
           height: 140px;
           margin-left: 30%;
           margin-top: auto;
           margin-right: auto;
           margin-bottom: auto;
          border-style: none;
      }

       

      and HTML

       

        <div class="FilmStill">
       
           <span class="class1">
      <span class="SlantedWritingFilms"><a rel="shadowbox;width=2000;height=1000;options={flashVars:{clip_id:1280592,autoplay:'true'}}" title="Eyelids" href="http://vimeo.com/moogaloop.swf">
      Eyelids
      </a></span>
      </span>

         <a rel="shadowbox;width=2000;height=1000;options={flashVars:{clip_id:1280592,autoplay:'true'}}" title="Eyelids" href="http://vimeo.com/moogaloop.swf" id="triggereyelids" ><img src="../images/buttons/eyelids-button.jpg" width="375" height="140" border="0"/></a><div class="tooltip"><span class="HoverWritingParagraph">A short experiment of a film</span><br />
      <br />
      <span class="HoverWritingHeading">2007<br />
      Dur: 2min30</span>
      </div>
      </div>

       

      I'm sure this is a simple one - but I cannot find the answers!

      Thanks a lot for help