Log in

View Full Version : display series of images


cway
07-21-2008, 08:21 PM
I am trying to display a series of images, side-by-side and on top of each other, with a little text below each image.
Just like how image would display without any css at all.
I do not want to use a table, because then the images would not wrap upon browser width change.
Does anybody have any ideas?
Thanks,
Cway
TheJoshMan
07-21-2008, 09:15 PM
The CSS:


<style type="text/css">
.container{
position:relative;
top:0px;
left:0px;
width:800px;
background:#404040;
padding:15px;
margin:0 0 0 0;
}

.container ul li{
display:inline;
list-style-type:none;
padding:0 0 0 0;
margin:0 0 0 0;
}

.container img{
border:2px;
border-style:solid;
border-color:white;
padding:4px;
}
</style>


The HTML


<div class="container">
<ul>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
<li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
</ul>
</div>
Nile
07-21-2008, 09:25 PM
He also wants text below the images Nyne Lyves.
TheJoshMan
07-21-2008, 09:26 PM
ah, oops! My bad, I guess I missed that little snippet eh?
TheJoshMan
07-21-2008, 10:02 PM
Ok, so let's try it again shall we?

The CSS:


<style type="text/css">
body{
margin:0;
padding:0;
background:#404040;
font-family:georgia;
color:#E1D1BB;
}

dl {
text-align:center;
font-size:.95em;
margin-top:25px;
}

dt,dd {
width:10.5em;
float:left;
}

dt {
margin-bottom:5.5em;
}

dd {
margin:90px 0 0 -10.5em;
}

img {
vertical-align:bottom;
border:1px;
border-style:solid;
border-color:#909090;
padding:2px;
background:white;
}

em {
display:block;
font-weight:bold;
margin-bottom:5px;
}

dl a:hover img,dl a:active img,dl a:focus img {
background:#ff0000;
}

</style>


The HTML:


<dl>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
<dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
<dd><em>Photo Name</em> Caption Text</dd>
</dl>;)
cway
07-21-2008, 11:46 PM
First of all, thank you very much for the insanely quick action.
We are really close, here.
If I could just get the text below each image centered and, when you slowly resize your browser window, there's some funky stuff happening - the text get separated from the image and is way out in left field.
Any ideas here?
TheJoshMan
07-21-2008, 11:48 PM
link to page in question?
cway
07-21-2008, 11:59 PM
http://www.theteatable.com/Merchant2/merchant.mvc?Screen=teas
TheJoshMan
07-21-2008, 11:59 PM
what browser are you viewing it in? I've tested it in IE 7 and FF 3 and neither are showing the problems you mentioned. The text is centered directly beneath the images, and the text stays there and doesn't jump around on resize. May I see a link to the page you're using it on?
TheJoshMan
07-22-2008, 12:00 AM
sorry, disregard last post. Didn't realize you'd already posted while I was typing.
TheJoshMan
07-22-2008, 12:07 AM
I viewed the page, i'm not seeing the text jump around. Also, you should remove the "hspace" and "vspace" attributes from your images as the padding is already set in the css I posted with the HTML
cway
07-22-2008, 12:17 AM
Attached is what happens on my end when I resized my window.
Happens in both XP IE7 and Mac FF3.
How do you think I should go about centering the text?
1919
TheJoshMan
07-22-2008, 12:22 AM
lemme take another look
may be a bit before i post again, gotta eat too.
TheJoshMan
07-22-2008, 12:52 AM
use this as your CSS



*{
margin:0;
padding:0;
}

dl {
text-align:center;
font-size:.95em;
margin-top:25px;
}

dt,dd {
width:10.5em;
float:left;
}

dt {
margin-bottom:5.5em;
}

dd {
margin:155px 0 0 -10.5em;
}

img {
vertical-align:bottom;
padding:2px;
border:0px;
}

em {
display:block;
font-weight:bold;
margin-bottom:5px;
}

dl a:hover img,dl a:active img,dl a:focus img {
background:#6E7A62;
}




and this as your HTML



<dl>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=AT"><img src="http://www.theteatable.com/Merchant2/graphics/afternoon_tn.jpg" alt="Afternoon Teas" ></a></dt>
<dd>Afternoon Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=artisan"><img src="http://www.theteatable.com/Merchant2/graphics/artisan_tn.jpg" alt="Artisan Teas" ></a></dt>
<dd>Artisan Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=bestsellers"><img src="http://www.theteatable.com/Merchant2/graphics/best_sellers_tn.jpg" alt="Best Selling Teas" ></a></dt>
<dd>Best Selling Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=FlavoredBlackTeasandBlends"><img src="http://www.theteatable.com/Merchant2/graphics/black_flavored_tn.jpg" alt="Black Teas - Flavored and Blends" ></a></dt>
<dd>Flavored &amp; Blended Black Teas</dd>

<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=BlackTeasUnflavored"><img src="http://www.theteatable.com/Merchant2/graphics/black_unflavored_tn.jpg" alt="Black Teas - Unflavored and Single Estate" ></a></dt>
<dd>Unflavored &amp; Single Estate Black Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=BFT"><img src="http://www.theteatable.com/Merchant2/graphics/breakfast_tn.jpg" alt="Breakfast Teas" ></a></dt>
<dd>Breakfast Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=Chai"><img src="http://www.theteatable.com/Merchant2/graphics/chai_tn.jpg" alt="Chai Teas" ></a></dt>
<dd>Chai</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=darjeeling"><img src="http://www.theteatable.com/Merchant2/graphics/darjeeling_tn.jpg" alt="Darjeeling Teas" ></a></dt>
<dd>Darjeeling</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=DecaffeinatedLooseTeas"><img src="http://www.theteatable.com/Merchant2/graphics/decaf_tn.jpg" alt="Decaffeinated Loose Teas" ></a></dt>
<dd>Decaffeinated Loose Teas</dd>

<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=EG"><img src="http://www.theteatable.com/Merchant2/graphics/earl_grey_tn.jpg" alt="Earl Grey Teas" ></a></dt>
<dd>Earl Grey</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=FlavoredGreenTeas"><img src="http://www.theteatable.com/Merchant2/graphics/green_flavored_tn.jpg" alt="Green Teas - Flavored and Scented" ></a></dt>
<dd>Flavored Green Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=GreenTeaUnflavored"><img src="http://www.theteatable.com/Merchant2/graphics/green_unflavored_tn.jpg" alt="Green Teas - Unflavored/Unscented" ></a></dt>
<dd>Unflavored Green Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=allherbalteas"><img src="http://www.theteatable.com/Merchant2/graphics/herbal_tn.jpg" alt="Herbal Teas" ></a></dt>
<dd>Herbal Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=IcedTeas"><img src="http://www.theteatable.com/Merchant2/graphics/iced_tea_tn.jpg" alt="Iced Teas" ></a></dt>
<dd>Iced Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=jasmine"><img src="http://www.theteatable.com/Merchant2/graphics/jasmine_tn.jpg" alt="Jasmine Teas" ></a></dt>

<dd>Jasmine Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=OolongTeas"><img src="http://www.theteatable.com/Merchant2/graphics/oolong_tn.jpg" alt="Oolong Teas" ></a></dt>
<dd>Oolong Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=OrganicTeas"><img src="http://www.theteatable.com/Merchant2/graphics/organic_tn.jpg" alt="Organic Teas" ></a></dt>
<dd>Organic Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=rareteas"><img src="http://www.theteatable.com/Merchant2/graphics/exotic_tn.jpg" alt="Rare and Exotic Teas" ></a></dt>
<dd>Rare &amp; Exotic Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=Rooibos"><img src="http://www.theteatable.com/Merchant2/graphics/rooibos_tn.jpg" alt="Rooibos Teas" ></a></dt>
<dd>Rooibos Teas</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=TeaBags"><img src="http://www.theteatable.com/Merchant2/graphics/bagged_tn.jpg" alt="Tea Bags" ></a></dt>

<dd>Tea Bags</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=TeaSamplers"><img src="http://www.theteatable.com/Merchant2/graphics/sampler_tn.jpg" alt="Tea Samplers" ></a></dt>
<dd>Tea Samplers</dd>
<dt><a href="http://www.theteatable.com/Merchant2/merchant.mvc?Screen=CTGY&amp;Category_Code=WhiteTeas"><img src="http://www.theteatable.com/Merchant2/graphics/white_tn.jpg" alt="White Teas" ></a></dt>
<dd>White Teas</dd>
</dl>
cway
07-22-2008, 01:18 AM
I added a width to the dt due to some overlapping in FF3 Mac and we're good.
TheJoshMan
07-22-2008, 01:24 AM
glad to hear it!

good luck!
cway
07-22-2008, 04:04 PM
I spoke too soon.
There's other text on the page, below my new series of thumbnails, that wants to wrap around the series of thumbnails.
I tried making a <table> and put the thumbnails inside their own row and putting the text inside it's own row, but then the text in the last row of images disappears in IE7 on XP.
Any suggestions?
Thanks,
Cway
TheJoshMan
07-22-2008, 11:51 PM
taking a look, I'll get back with you soon.
TheJoshMan
07-23-2008, 12:53 AM
Ok, is this more of what you are looking for? See attached screenshot.:)
cway
07-23-2008, 02:14 PM
Wanting 2 rows - above row with all the thumbnails, below row with with rest of the content, text.
Looks great in FF3 Mac.
See attached.
TheJoshMan
07-23-2008, 10:23 PM
Oh! That's even easier! Here, just find the </dl> tag and put this after it:



</dl>
<p style="padding: 8px; float: right;">
<img hspace="6" height="112" border="0" align="right" width="150" vspace="2" alt="camellia sinensis tea plant" src="graphics/leaves.jpg"/>
<b>
<big>How to order tea on our web site:</big>
<br/>
</b>
We sell our loose tea by the ounce. You may order any number of ounces you like. Price breaks are given for most teas at 4 oz., 8 oz., 16 oz., and 32 oz. To see the volume price table for any tea, just click on the tea name or photo. This will also show you a larger photo and give a full description of the tea. Just enter the number of ounces you'd like in the Quantity field on the product's detail page. If you need separate packages of any one tea, say 2 4-oz bags of Earl Grey, put 4 oz. in your basket, then put another 4 oz. in your basket. This will show up as two separate items in your basket and will indicate to us how you'd like your tea bagged.
</p>
<br style="clear: both;"/>
cway
07-23-2008, 11:06 PM
That's better!
Thanks!
Cway