Re: [css-d] Image caption width
On Jun 2, 2008, at 10:53 PM, Jukka K. Korpela wrote:
Tracey Adams 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.
That appears to be the situation at present, I'm afraid. On the other
hand, since images should have their width and height set, for
speed of
rendering, it should be easy to add a matching width for a block
containing the image.
I could use tables but I'd like to avoid that.
Using a single-cell table, with the caption written in the caption
element, seems to be the simplest way to achieve the goal. For some
explanations, see
http://www.cs.tut.fi/~jkorpela/www/captions.html
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
I have found out how to do it and it's pretty simple. Use an inline
style=width with your image style.
style=width:300px;
As in the example below.
.imgLeft {
float:left;
padding:.5em;
font-size:.8em;
font-family: Arial, san-serif;
}
div class=imgLeft style=width:300px;your image/div
http://public.ca.sandia.gov/crf/research/combustionProcesses/
coalResearch.php
Thank you so much,
Tracey
--
__
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/
Re: [css-d] Image caption width
I forgot in my original message to state where to put the caption,
see below for example.
style=width:300px;
As in the example below.
.imgLeft {
float:left;
padding:.5em;
font-size:.8em;
font-family: Arial, san-serif;
}
div class=imgLeft style=width:300px;img src=images/
your_image /caption/div
http://public.ca.sandia.gov/crf/research/combustionProcesses/
coalResearch.php
Thank you so much,
Tracey
--
__
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/
Re: [css-d] Image caption width
Tracey Adams wrote: I have found out how to do it and it's pretty simple. Use an inline style=width with your image style. I don't think it's relevant how we set an explicit px valued width; we could set it on the caption text directly (if we also set display: block for it), or on its block-level container, and we could use inline styles or an external style sheet (or style element) with suitable class attributes. What matters is that if you set an explicit px valued width, then you have hard-wired the image's width into the document or its style sheet. People often want to avoid that. On the other hand, as I mentioned, it is generally useful to specify the dimensions of images in markup or CSS anyway. Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ 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/
[css-d] Image caption width
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. I could use tables but I'd like to avoid that. I'd appreciate any help you can give me. Tracey __ 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/
Re: [css-d] Image caption width
- Original Message - From: Tracey Adams To: css-d@lists.css-discuss.org Sent: Monday, June 02, 2008 8:54 PM Subject: [css-d] Image caption width 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. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus __ 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/
Re: [css-d] Image caption width
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=captionCycling 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=captionEntire 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/
Re: [css-d] Image caption width
Tracey Adams 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. That appears to be the situation at present, I'm afraid. On the other hand, since images should have their width and height set, for speed of rendering, it should be easy to add a matching width for a block containing the image. I could use tables but I'd like to avoid that. Using a single-cell table, with the caption written in the caption element, seems to be the simplest way to achieve the goal. For some explanations, see http://www.cs.tut.fi/~jkorpela/www/captions.html Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ 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/
