Forum Moderators: not2easy
I was wondering if anybody knew a way to acommodate for using CSS to give a polaroid type effect around an image that changes in size (due to the fact that users upload differently sized images) being both portait and landscape with varied widths. As you can see the CSS code is a variation on the CSS List APart code.
At the moment I have only found one way to do this, which is by using tables so that I can rely upon the "caption" code and align="bottom". What can I say I'm not in love with tables but I can't find a way in CSS to get around this.
I suppose you could say in a perfect world I would ask people to only upload images that are 256 pixels by 184 pixels and landscape only. However I don't think that CSS should define the way web sites work to that extent really. This however means I'm a bit stuck. Due the lack of my CSS knowledge I have had to revert as you can see below to a solution that relies upon tables and CSS. It works for nearly all kinds of images but is not valid XHTML 1.0 Strict!
When I use CSS if I can't define the width then everything goes to pot with the display. This is most probably more of an indication of how bad I am at CSS more than anything else so I thought I'd ask here.
It seems people post the code of what they do mostly rather than link to an example and I didn't understand in the terms of the forum whether linking to an example was frowned upon. So here is the code :
The html code :
For an image with caption :
<table class="article_rimg center article_image_layout" border="0" cellspacing="0" cellpadding="0"><tr><td><div class="wraparticle crushrow"><img src="http://www.domainname.net/image_path/imagename.jpg" alt="Image Alt" /></div></td></tr><caption align="bottom">Image Caption</caption></table>
For an image without cpation :
<div class="article_rimg crushrow"><div class="wrap1 crushrow"><div class="wrap2 crushrow"><div class="wrap3 crushrow"><img src="http://www.domainname.net/image_path/imagename2.jpg" alt="Image Alt" /></div></div></div></div>
The CSS :
.article_rimg {
float:right;
padding: 0px 0px 0px 4px;
}
.crushrow {
line-height: 0em; font-size: 0pt;
border-spacing: 0 0;
vertical-align: baseline;
border: 0;
border-style: none;
}
.article_image_layout caption {
caption-side: bottom;
font-size: 11px; color: #506981; font-family: Arial, Helvetica, sans-serif;
}
.wraparticle {
margin: 4px 4px 0px 4px;
}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float:left;
background:url(/images/shadow2.gif) right bottom no-repeat;
}
.wrap2 {
background:url(/images/corner_bl2.gif) left bottom no-repeat;
}
.wrap3 {
padding:0 5px 5px 0;
background:url(/images/corner_tr2.gif) right top no-repeat;
}
I'd be very greatful if anybody could help in my ongoing process of changing the site from html and tables to xhtml and CSS :)
Thanks, John
PS : just realised that the caption-side: bottom; code was when I was trying to figure a CSS way around things but this doesn't work in some browsers.
Assuming you're using php to output the images, this is probably all the information you need. Unless you can generalize the final sizes of the images a bit, you won't be able to use classes to set the sized, you'll have to use inline styles. Try this out--I haven't customized it to the markup you've listed but it'll be simple for you to adapt to your purposes:
CSS
.photo { padding:20px; border:1px solid #eaeaea; }
.photo p { text-align:center; color:#333; }
PHP
// Information about the image:
$imageLocation = 'path/to/image.gif';
$imageAltText = 'Lorem ipsum dolor';
$imageCaption = 'Lorem ipsum dolor sit';
$imageInformation = getImageSize($imageLocation);
$imageWidth = $imageInformation[0];
$widthAndHeightString = $imageInformation[3];// Output the html:
echo '<div class="photo" style="' . $imageWidth . 'px;">';
echo '<img src="' . $imageLocation . '" ' . $widthAndHeightString . '
alt="' . $imageAltText . '" />';
echo '<p>' . $imageCaption . '</p>';
echo '</div>';
If the image is 300px wide x 150px tall, this outputs the following html:
<div class="photo" style="width:300px;">
<img src="path/to/image.gif" width="300" height="150" alt="Lorem ipsum dolor" />
<p>Lorem ipsum dolor sit</p>
</div>
-b
Yes it does look like it's my lucky day :) I'll have to figure out how I can implement this. I do use PHP for a random image generator in the page header so I'll have to see how this can help me with the CSS.
Am I right though on the assumption that there is no other way in CSS to have captions (that wrap) under images that vary in sizes?
Thanks ever so much for your help I'll have to take a look at this code ASAP,
John
