Hoverbox HELP!!

[therise03]

Ok so I want to use the hoverbox css gallery to display images on my site. The problem is that I put the hover box li elements into a div class so I can have control over where I place them, but when I put the <li> elements into the div, they overlap what is underneath them, such as another section for something else. Whats the deal with that? It seems like the positioning properties of hoverbox are conflicting with my floated layout. Does anyone know how to "tame" hoverbox so you can just add a small picture gallery into another section of your site, or into another div element ?

example code:

<div id="hoverboxcontainer">

<ul class="hoverbox">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a></li>
</ul>

</div> <!--close hoverboxcontainer-->



<div id="asectionbelow">
blah blah blah
</div>


* hover box elements seem to overlap my div below * Any help, ideas, greatly appreciated!

 

[FathomJH]

Without seeing all your code, I'm not sure exactly what's happening. Anytime you float anything, you then want to "clear" that float (i.e. - clear: both. That may be causing the overlap with your other code.

You can also give this a try in your code, along with the "clear,"

<li>
<a href="#"><img src="img/photo02.jpg" alt="description" class="preview" />
<span><img src="img/photo02.jpg" alt="description" /></span></a></li>

The css would be something along the lines of:

li a:hover span { background-image:url(img/photo02.jpg); }

Hope this helps.

 

[therise03]

close...but not there yet...

ok close, but no cigar let me give a little more insight into my question...


so my layout is two floated columns, and a center piece. Inside the center piece is where all the content goes. So I have a class that hold weekly updates and below them I want to add a small gallery with the hoverbox function. and do this for all the weekly updates so my code looks like this


<div id="left"> <!--floated left-->
content
</div>

<div id="right"> <!--floated right-->
content
</div>

<div id="center">

<div class="weeklyupdate">
text
</div>

--hoverbox gallery--

<div class="weeklyupdate">
text
</div>

--hoverbox gallery--

</div> <!--close center div-->


I tried your advice and tried clearing both on the weeklyupdate div class but what that did was bring my center div id and dropped it right below the bottom of the right and left div id's. I will say that when I did it, the hoverbox gallery did NOT overlap my second weeklyupdate div class which I liked...but on the other hand, my whole center div id just drops out all the way below the columns.

I hope my code is a bit better understood now along with my situation