Making the most of your sidebars - pop out descriptions. - Talk About Selling

Gabriel Crowe · #1 12-10-2009, 02:56 PM

First, some code:

HTML Code:

<style type="text/css">
/*.infocontainer			{border-bottom:1px solid #900;width:200px;}*/
.infobox 				{position:relative;border:0px solid #000; background-color:#CCC;width:202px;height:102px;padding:5px;width:200px;}
.infobox img 			{position:relative;z-index:2;}
.infobox .more			{display:none;}
.infobox:hover .more    {display:block;position:absolute;z-index:1;left:0px;top:0px;width:300px;height:100px;padding:0px 0px 0px 100px;border:1px solid #900;background-color:#FFEFEF;}
body    { font-size: 0.9em; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }
</style>

<div class="infocontainer">

	<div class="infobox"><img height="75" src="http://www.uktactical.com/product_images/d/t-shirt-tan500__69117_thumb.jpg">
	<div>Short Description</div>
	<div class="more">This is a long description with another image<br> <img height="50" src="http://www.uktactical.com/product_images/z/tee-black-zoom-700x300__45608_thumb.jpg"></div>
	</div>
	<div class="infobox"><img height="75" src="http://www.uktactical.com/product_images/d/t-shirt-tan500__69117_thumb.jpg">
	<div>Short Description</div>
	<div class="more">This is a long description with a <a href="#">link</a> you can hover over and a button that does bugger all: <button>Add To Cart</button></div>
	</div>
	<div class="infobox"><img height="75" src="http://www.uktactical.com/product_images/d/t-shirt-tan500__69117_thumb.jpg">
	<div>Short Description</div>
	<div class="more">This is a longer description with a <a href="#">link</a> you can hover over. Lots of text can go here, and more images, and an add to cart button.</div>
	</div>


</div>

Paste this into a temp document and have a look.
http://www.interact-studio.co.uk/scr...10-12_1558.swf

I think this might work well with any ecommerce package, since its such simple html.

Darren · #2 12-10-2009, 03:03 PM

nice gabe, yet another thing i need to look at, is it possible to make it pop out left

Gabriel Crowe · #3 12-10-2009, 03:23 PM

editing the css for

.infobox:hover .more

so that left:-300px might do it. i think.

Gabriel Crowe · #4 12-10-2009, 03:30 PM

prolly something like this:

HTML Code:

<style type="text/css">
.infocontainer			{border-bottom:1px solid #000;width:200px;float:right;}
.infobox 				{position:relative;border:0px solid #000; background-color:#CCC;width:200px;height:100px;padding:5px;width:200px;}
.infobox img 			{position:relative;z-index:2;float:right;}
.infobox .more			{display:none; }
.infobox:hover .more    {display:block;position:absolute;z-index:1;left:-196px;top:0px;width:300px;height:100px;padding:5px 100px 5px 5px;border:1px solid #900;background-color:#FFEFEF;}
body    { font-size: 0.9em; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }
</style>

<div class="infocontainer">

	<div class="infobox">
	
	<div>Short Description</div>
	<img height="75" src="http://www.uktactical.com/product_images/d/t-shirt-tan500__69117_thumb.jpg">
	<div class="more">This is a long description with another image<br> <img height="50" src="http://www.uktactical.com/product_images/z/tee-black-zoom-700x300__45608_thumb.jpg"></div>
	
	</div>
	<div class="infobox">
	
	<div>Short Description</div>
	<img height="75" src="http://www.uktactical.com/product_images/d/t-shirt-tan500__69117_thumb.jpg">
	<div class="more">This is a long description with a <a href="#">link</a> you can hover over and a button that does bugger all: <button>Add To Cart</button></div>

	</div>
	<div class="infobox">

	<div>Short Description</div>
	<img height="75" src="http://www.uktactical.com/product_images/d/t-shirt-tan500__69117_thumb.jpg">
	<div class="more">This is a longer description with a <a href="#">link</a> you can hover over. Lots of text can go here, and more images, and an add to cart button.</div>
	</div>


</div>
<div style="clear:both;"></div>

Goz · #5 13-10-2009, 07:28 AM

Thanks for this, Gabe, you posted at just the right moment for a site I'm building.

I've amended your code - http://www.elysium-dev.co.uk/commercial-cleaning.html - to use in the table at the bottom of the page. But there's an interesting effect.... if you hover over any of the blue links (which indicate there's some content there) it shows the hidden content but doesn't cover over any blue links that are underneath.....

perhaps I'll be able to figure it out now I've had some sleep!!

Gabriel Crowe · #6 13-10-2009, 08:36 AM

its the z-order.

put the hover elements 'z-index' to a silly high value.

Goz · #7 13-10-2009, 10:46 AM

that's what I thought, Gabe, but that didn't work.

I've pissed around all morning trying to get it to work "correctly" so I've decided to bodge it!

Quarm · #8 13-10-2009, 02:07 PM

To add a z-index, the element MUST be positioned. Go relative if it isn't already positioned.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

The Following 2 Users Gave Goat Points to Gabriel Crowe For This Post:
Darren (12-10-2009), Goz (12-10-2009)