I want some CSS3 code that draws a box with rounded corners - in the box I put an image and a (optional) caption;
box, image, caption will all be formatted in CSS-sheet;
I would prefer the image to get rounded corners as well - there is a jQuery plugin that does so, but any other solution is fine as well - I just can not convert a few 100 existing images into png’s - so, a plugin/coding solution is needed;
dropshadow around the images would be nice: depending on how it renders and how feasible it is;
In my page I want to be able to wrap image and caption within some class (or element) and all of the above being applied, with the text floating around to the imgbox. Russ Weakly gives a solution here: http://www.maxdesign.com.au/articles/definition/ (Styled Definition list example 5). I would prefer a shorter way, but his image shows what I want.
My content area is 550px wide, the box should be 270px wide and I want to be able to position an imgbox either on the left (text float on the right), on the right or 2 boxes next to each other.
I have most of the code-parts (and examples/URLS) and several ‘versions’, but I can’t get it to work in one structured way - either the borders are rounded within a <div>, but not in the <dl> that I need to have the text float around it… etc. etc.
Can anybody assist me with this? Or know some brighter mind? This shouldn’t be too much work, but after a day of trial and error I give up…
As I mention in that page, I have about 850 legacy images on that site. Also, I edited an image in Gimp, and it was a pain to get the right dimensions: the original image is 260px wide - it should remain 260 wide, as otherwise the box is not correct anymore: my page is 550 px wide, so the box can be 275px wide - because of the padding, the image needs to remain 260. But perhaps there is a better way in Photoshop - also to do it in one batch, keeping the .png size (in kb) and quality in balance?
I only ‘care’ about IE 7 & 8 (6.0 I don’t want to cater for) - IE9.0 will support CSS3, but it might take a few years before the majority has upgraded (esp. since so many are still using the dreaded 6.0 - often in companies).
It’s all a matter of ‘taste’: I want the site to have/get a ‘smooth’ look - square images and boxes are not really helping, so I finally took the plunge to fix it …
Thanks - I posted it here as I did the CSS3 Live course (obviously I didn’t pass…) and it is a box property thing - mainly… But if you think it suits in CSS forum better, that’s fine with me.
I will work on some doc to show what I have - will post it here, together with .css.
And yes, Marketplace migth be a route as well - I don’t mind paying for it, but I’m kind of wary of the (cut-throat) frenzy on sites like that…
I think that the general CSS forum would be better for you, as Ralph says… that’s where all kind of people “get together” and not only the students of CSS3. These forums are not seen by people that are not doing the course.
People will need to look at what’s been done. We’re not here to do your job but to help you understand why it isn’t working and maybe we all learn something from it.
If all what you want is round the corners of all those images and you want them work in every browser… well, as you indirectly suggested probably the best method is changing the picture and make it rounded… and if you have photoshop, the software can do it automatically for you and that will take care of your rounded corners.
Personally, I don’t care if it looks different in older browsers, as long as it looks nice and organized, so I’m happy if it looks squared in IE and rounded in others. That ensures me that I can use a CSS only solution.
Let a member of the staff when you have the code ready to move the thread.