PDA

View Full Version : Image gallery



j05hr
Jul 19th, 2010, 02:21 PM
Hi,

I made an image gallery taken from this site

http://bokehman.com/rollover/

In mine, if you use a smaller screen or make your browser window smaller, the image comes out of the border where as theirs stays still.

Here is the page

http://printco.org/design.html

Here is my code.

HTML:


<div id="contentLeft">
<h3>Design Services</h3>

<p>Our job is to bring ideas to life. We offer a complete range of design services bespoke to your requirements, taking ideas from start to finish adding inspiration along the way.</p>

<p>Printco are one of the UK's leading printing and solutions group using clean efficient processes. We help organizations innovate and manage change to improve their customer interactions and strengthen their brand.</p>

<p>Specialising in visual communication, our team of creative designers can assist you with ideas as to how you can improve your business and promote your services.</p>
<a href="#"><img src="images/adnlawthumb.jpg" alt="" id="thumb" /><span><img src="images/adnlaw.jpg" alt="" /></span></a>
<a href="#"><img src="images/ascthumb.jpg" alt="" id="thumb" /><span><img src="images/asc.jpg" alt="" /></span></a>
<a href="#"><img src="images/betterspecsthumb.jpg" alt="" id="thumb" /><span><img src="images/betterspecs.jpg" alt="" /></span></a>
<a href="#"><img src="images/coffeethumb.jpg" alt="" id="thumb" /><span><img src="images/coffee.jpg" alt="" /></span></a>
<a href="#"><img src="images/heartthumb.jpg" alt="" id="thumb" /><span><img src="images/heart.jpg" alt="" /></span></a>
<a href="#"><img src="images/chemistreethumb.jpg" alt="" id="thumb" /><span><img src="images/chemistree.jpg" alt="" /></span></a>
<a href="#"><img src="images/flowerstudiothumb.jpg" alt="" id="thumb" /><span><img src="images/flowerstudio.jpg" alt="" /></span></a>
<a href="#"><img src="images/r2ethumb.jpg" alt="" id="thumb" /><span><img src="images/r2e.jpg" alt="" /></span></a>
<a href="#"><img src="images/stationerythumb.jpg" alt="" id="thumb" /><span><img src="images/stationery.jpg" alt="" /></span></a>
</div>


CSS:



#contentLeft a span {
display: none;
}

#contentLeft a:hover span {
display: block;
position: absolute;
width: 160px;
height: 120px;
top:250px;
left:605px;
border: 0;
}

abduraooft
Jul 19th, 2010, 02:45 PM
Set a smaller value for left, say left:520px;

j05hr
Jul 19th, 2010, 02:49 PM
But then it goes over the border on the other side

http://printco.org/web.html

How have they got theirs to stay still no matter how much you restrict the size of the window?

Thanks,
Josh

abduraooft
Jul 19th, 2010, 02:56 PM
Try setting position:relative; to #content and then adjusting the properties of a:hover span to left:420px; top:50px;

(You'd need to drop the unnecessary floats applied to #header and #navigation)

j05hr
Jul 19th, 2010, 03:10 PM
Try setting position:relative; to #content and then adjusting the properties of a:hover span to left:420px; top:50px;

(You'd need to drop the unnecessary floats applied to #header and #navigation)

That didn't work either, would it not just work the same way they used it in their gallery?

Scriptet
Jul 19th, 2010, 07:56 PM
You have to add position:relaitve; so that the images are absolutley positioned relative to the container, without this they are being absolutley positioned relative to the browser window..which causes the changes when the browser window is adjusted..even the example has position:relative; hence why you cannot see the problem here.