horizontal css scroll gallery with captions

33tpm
33tpm used Ask the Experts™
on
Hello,

I am completely new at css and trying to build a simple horizontal scroll gallery.
Finally the images line up nicely but I just cant get the captations to work (underneath - justify left)..
I also have not been able to determine the spacing between the images.

Any help would be highly appreciated

Thank you
Tom

the css

#content {

margin-top: 200px;
margin-left: 300px;
width: auto;
height: auto;
border-width: 25px;
white-space: nowrap;
}


the html


<div id="content">
<img src="images/001.jpg"/>
<img src="images/002.jpg"/>
</div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Try the below for the spacing.
#content img {
margin-right: 10px;
}

Open in new window

Commented:
Do I understand correctly that you wish to place captions beneath the images? If so try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#content {
margin-top: 200px;
margin-left: 300px;
width: auto;
height: auto;
border-width: 25px;
white-space: nowrap;
}
.offsetParent { position:relative; } /* set the offset parent for the captions */
.caption { position:absolute; bottom:-20px;left:0;}
#content span {padding-left:20px;padding-right:20px;} /* set space left and right of images, use also to align the captions */
</style>
</head>
<body>
<div id="content"
><span class="offsetParent"><img src="images/001.jpg"/><div class="caption">Caption 1</div></span
><span class="offsetParent"><img src="images/002.jpg"/><div class="caption">Caption 2</div></span
></div>
</body>
</html>


Please note that putting whitespace between the image elements influences the space between them. To prevent this you have a couple of options:

Format as single line:
<div id="content"><img src="images/001.jpg"/><img src="images/002.jpg"/></div>

Put the line break inside the tags:
<div id="content"
><img src="images/001.jpg"
/><img src="images/002.jpg"
/></div>

Or put the line breaks inside the comments:
<div id="content"><!--
--><img src="images/001.jpg"/><!--
--><img src="images/002.jpg"/><!--
--></div>


I hope this helps

Author

Commented:
works beautifully !!! THANK YOU!! :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial