...

View Full Version : positioning div



quartzy
12-10-2010, 12:11 AM
I have uploaded a test page with great difficulty onto another site: http://www.puddypaws.co.uk/test/test.html

If you scroll down the page, you will see a gallery but I cannot get it to sit in the middle of the border box along with the mini slides at the side. I also would like a border of 1px solid #CCC and padding: 3px; around the mini slide images but it is not happening. This is a script adapted from CSS Play but maybe I have ruined it now with trying to fix it. I made it with 2 cols of mini slides as the other way using arrows images I could not do, this is my own way. Appreciate any help been struggling over a couple of days now.

Excavator
12-10-2010, 12:25 AM
Hello quartzy,
I don't think you want those images centered. Remove the margin:0 auto; for sure, the position:relative; I think means nothing here, remove that as well.
Like this -

#gallery #fullsize div {width:775px; height:550px; padding-top:70px; position:relative;}
#gallery #fullsize div img {
clear:both;
display:block;
/*margin:0 auto;*/
border:1px solid #eee;
width:480px;
height:360px;
/*position:relative;*/
background:#fff;
padding:10px;
}


You will need to adjust your left:xx; on your absolute positioned ul that holds your thumbnails.
Try something like this -

#gallery #slides {
position:absolute;
/*right:10px; */
left: 545px;
top:70px;
height:500px;
width:92px;
text-align:left;
z-index:500;
}

quartzy
12-10-2010, 11:06 AM
thanks Ex. I now have them lined up correctly, however I am having problems with lining up the captions at the bottom, if I do text align center they centre to the whole box and not just the large image as I want. Also the mini slides box has a wider margin on the right that I dont want. Can you hlep me? Same url http://www.puddypaws.co.uk/test.test.html As this is supposed to be elastic, I dont really want to add margin or padding to line up the captions.

I have now fixed the captions, but the wider margin at the end of the slides is something I cannot do.

RESOLVED

Excavator
12-10-2010, 01:19 PM
I've always found it easier to put caption and image in their own div together. They just never line up right otherwise.

See captions here (http://nopeople.com/CSS%20tips/image%20captions/index.html).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum