Alan K Baker wrote:
> I am having a problem with keeping the captions under images to the
> width of the image and not all the way across the page. I've tried a
> number of things and the only thing I've found that sort of works is
> to set a width limit in my caption css. Of course that has only
> limited success. My images cannot practically be all the same width.
> For awhile I was making css image boxes in different widths but that
> got ridiculous...............................
>
> Not such a bad thing especially if IE6 will be used a lot and you have
> many/large images. I was having a lot of problems with IE6 'timing out' on
> sometimes slow connection speeds, due to the use of a lot of images. This was
> totally cured by defining the size of each image as a class in the CSS, so
> that the browser doesn't have to calculate it from the image file.
>
> Regards,
>
> Alan.
>
>
With varying image sizes it is certainly more complicated to maintain
consistency. You might be able to build your CSS to house the largest
possible image, then center others to fit centered within the space; the
following CSS/HTML is used to position 2 images side by side and center
the captions. Maybe not doable in your situation, but a little server
side scripting (php) can also net you the image dimensions, and with
those you would have to do some calculations and use inline CSS. If the
caption (or font) gets too large it will open a new line but remain
within the caption space and centered.
<p>
<div class="center_caption">
<img src="images/195x260pics/p1.jpg" alt="Cycling Configuration with
Seatback Slanted" title="Cycling Configuration with Seatback Slanted">
<span class="caption">Cycling Configuration with Seatback Slanted</span>
</div>
<div class="center_caption">
<img src="images/195x260pics/p2.jpg" alt="Entire Machine with Seatback
Flat" title="Entire Machine with Seatback Flat" >
<span class="caption">Entire Machine with Seatback Flat</span>
</div>
</p>
The CSS:
.center_caption {
width: 260px;
float: right;
float: left;
text-align: center;
border: 1px solid #777;
margin: 5px;
}
.center_caption img {
width: 260px;
padding: 0px;
border: 0px;
margin: 0px;
}
.center_caption .caption {
padding: .2em;
background: #eee;
border-top: 1px solid #555;
display: block;
}
See the example at: www.abriderfitness.com/photo_gallery.php which also
incorporates the Eric Meyer horizontal drop-down menu (with csshover.htc).
--
Bob Meetin
dotted i - Internet Strategies & Solutions
www.dottedi.biz
303-926-0167
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
