pictures with captions? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

socks -> pictures with captions? (4/15/2004 17:38:28)

CSS novice here. Does anyone know a CSS method for inserting a picture, with caption underneath, into a block of unrelated text, like what you might see in a newspaper column? The problem is aligning the picture/caption block, then making the main text flow around it, similar to what happens when text flows around an aligned picture in HTML. Simple to do with a nested table, but I have been banging my head with CSS. I have been experimenting with DIV and SPAN tags, and the FLOAT property. Example:

.leftpic {width:150px; text-align: center; font-size:8pt; padding:3px; border: 1px solid #666666; margin-top:5px; margin-right: 5px; float:left;}

<span class=leftpic>
<img src="xyz.jpg" width=150>
Caption text goes here. It should appear directly under the picture, with a line break at 150px. A border encloses both picture and caption text, visually separating it from the main text, which should appear above, below and to the right of the border.
</span>

This works reasonably well for the first picture in the column, but subsequent pictures are each offset to the right of the previous one -- imagine a long, narrow newspaper column where all the pictures, instead of aligning vertically on the left, stagger down like a set of stairs. I believe this is a property of FLOAT.

Seems like this would be a relatively common situation. Does anyone know a better way to do this?

Thanks.



jaybee -> RE: pictures with captions? (4/15/2004 18:47:20)

Have you tried putting a <p>aragraph in between each one?



socks -> RE: pictures with captions? (4/15/2004 19:47:35)

Yes, I tried separating items with <p>. My little CSS guidebook suggests that consecutive uses of the FLOAT property may exhibit this behavior. I'm wondering if there's a workaround.



jaybee -> RE: pictures with captions? (4/16/2004 3:35:54)

I'll have a proper think about this later and Mrs Moderator Maam might be on before then to help. Off the top of my head, (having just crawled out of bed) how about separate divs?

Not having seen your layout it's a bit difficult to tell.



Giomanach -> RE: pictures with captions? (4/16/2004 3:39:57)

Umm, hows about just a link <br>eak? (Sorry for stealing the style thingy JB) It would also have to be within a table cell or Div layer.

<table>
<tr>
<td class="leftpic">
<img src="xyz.jpg" width=150> <br>
Caption text goes here. It should appear directly under the picture, with a line break at 150px. A border encloses both picture and caption text, visually separating it from the main text, which should appear above, below and to the right of the border.
</td></tr>
</table>



d a v e -> RE: pictures with captions? (4/16/2004 4:23:36)

use a div and then place the next div further down the text so that when it is floated it is further down.
if you have an example page it would be easier to see what the problem is - it sounds like your not putting the div far enough down in the flow of tha main text and it it is floating next to the one 'above' it.

8pt text is very small - especially on a mac where you'd be lucky to read it, it's also a print unit and you would be better with pixels or relative units like percentages or ems.

can you post a link to what you have so far?



d a v e -> RE: pictures with captions? (4/16/2004 4:40:23)

ok i think it needs a "clear" in the rule so it clears the bottom of any div above that's a bit close, thus avoiding the stepped effect
see http://members.surfeu.fi/dave_pirjo/test-area/captions.html

(if you take the 'clear:left;' out of the rule then the second mug steps out under the mug above, so mug 2's left side is lined up with mug 1's right side.)



jaybee -> RE: pictures with captions? (4/16/2004 5:00:39)

What a likkle star you are.

That's a nice picture of a mug BTW [:D]



jaybee -> RE: pictures with captions? (4/16/2004 5:03:17)

quote:

ORIGINAL: Giomanach

Umm, hows about just a link <br>eak? (Sorry for stealing the style thingy JB)


That's OK, steal away.

PS, if you want XHTML compliant then it's <br />



d a v e -> RE: pictures with captions? (4/16/2004 5:13:16)

i thought it was better than my ugly mug ;)



socks -> RE: pictures with captions? (4/16/2004 5:59:02)

Thanks for all your replies. As it turns out, a simple <br clear=all> tag inserted after a block of main text does make consecutive pictures line up correctly, as does just having enough text to completely wrap around the picture. But this little code snippet is for a group weblog; most of the participants aren't proficient coders. I was looking for a CSS solution that would implement automatically. I suspect I'm asking for too much. As usual. Appreciate your help.



c1sissy -> RE: pictures with captions? (4/16/2004 6:45:53)

HI Socks, welcome to the forums.
Sorry I wasn't about last night, Sons girlfriend was over for dinner and we had a really good time. I was not really on the computer last night. My apologies for taking so long to get to you.

Here is one link for you
http://css.maxdesign.com.au/floatutorial/

I'm searching for another one that deals specifically with pictures and such. Just having difficulty locating it.

ahh, here it is, this link deals specificaly with graphics and css
http://www.realworldstyle.com/thumb_float.html
I hope that one of these helps you out.

<edit><br clear=all> Instead of using this, gorilla has pointed out that this is not what you should use. Instead of this, in the div that you want cleared, use in your styles clear: both(etc...); works great I have already used it.</edit>



d a v e -> RE: pictures with captions? (4/16/2004 6:46:47)

didn't my solution work for you then?
i had the same 'stepping' problem as you until i put in the clear:left as in the url i put in my message above - that is auotmatic :)

( http://members.surfeu.fi/dave_pirjo/test-area/captions.html )



jaybee -> RE: pictures with captions? (4/16/2004 6:48:26)

Have you had a look at the code behind Eric Meyer's blog Here

Some of his archive pages have pics in them, float right. This guy knows what he's doing so you could try asking him and then tell all of us what he says [:D]



d a v e -> RE: pictures with captions? (4/16/2004 7:12:15)

well my solution is based on what i know from eric's first book!
but have a look at his stuff anyway. I just got his second book http://www.ericmeyeroncss.com/



c1sissy -> RE: pictures with captions? (4/16/2004 7:20:20)

quote:

eric's first book!


I also, among others, have his first book as well. I have been looking at several others, but need to wait[&o]



jaybee -> RE: pictures with captions? (4/16/2004 7:27:20)

quote:

well my solution is based on what i know from eric's first book!


Sorry Dave, I didn't mean to imply you didn't know what you were talking about. When I last posted there was no sign of your or Mrs Moderator Maam's postings. They seem to have popped up in between mine and socks.

I'm blaming our Proxy server, it's been on strike most of the morning.



d a v e -> RE: pictures with captions? (4/16/2004 7:30:40)

no worries :)
it often goes like that when someone else slips in a reply when you're not looking! i was just curious whether my solution worked for them or not.



socks -> RE: pictures with captions? (4/16/2004 19:55:00)

Sincere thanks for the helpful respondes. The CLEAR:LEFT property worked great. You guys are amazing.

Can I run another one by you?

In the same caption as before, is there a way to do away with the width declaration for the DIV or SPAN block but still get the text to break at the edge of the picture? The picture width should determine block width and the optimal text break point, but without actually setting a fixed width, text won't break at the picture's edge -- it just keeps on running. Is there a way around this? A way for the DIV or SPAN block to "inherit" a fixed width from the picture itself?

Yeah, I know it sounds impossible.

Thanks again.



d a v e -> RE: pictures with captions? (4/17/2004 4:20:47)

off the top of my head you could try setting the div to the same width as the pic
or
put the text in it's own div (nested in the picture div) and set it to 100% might work
or
set the picture div to 100% and see if that works...
or post a specific example we can play with..



c1sissy -> RE: pictures with captions? (4/17/2004 4:45:13)

quote:

put the text in it's own div (nested in the picture div) and set it to 100% might work


This sounds like it might be the best way to do it. I did search some online last night for a answer, but could not find anything.



d a v e -> RE: pictures with captions? (4/17/2004 5:08:18)

you could also try width:inherit to see if it will take the width from he parent container - i.e. the div that takes the width of the pic, but i'm guessing.



c1sissy -> RE: pictures with captions? (4/17/2004 6:56:34)

Dave, I know that i had seen a layout done in css with graphics similar to what is being described. I have looked at all my bookmarks for css and redone several searches but can't seem to find it.

[:@]Needless to say it is making me crazy because I can't find this page! ARRGGHHH!!!



d a v e -> RE: pictures with captions? (4/17/2004 8:58:18)

the text does break at the picture edge, but it only does so if you specify a width.
I can't get it to work without... even by putting the text in it's own nested div
what's the problem with specifying the width of the div anyway? or have you got that many different size images that it will be a problem?



c1sissy -> RE: pictures with captions? (4/17/2004 9:06:42)

quote:

or have you got that many different size images


This question is most likely going to be off topic a tad, but isn't better to have your images all the same size? Just a one of those curious questions on my end.



socks -> RE: pictures with captions? (4/17/2004 9:56:17)

To answer Dave and C1sissy:

Yes, unfortunately there will be different size images. Not only that, this effort is for a multi-user web log, and most of the contributors are non-techies. I was hoping to automate as much of the code as possible since I'm already pushing the comprehension envelope. In fact I'm certain some contributors will never get beyond posting simple text.

I tried the suggestions about nested DIVs and inherited width without success. Bottom line is that without a fixed primary container width, there's no width information for the caption container to "inherit". THe primary DIV block containing the picture and caption will always see the caption text as the widest element and tries to accomodate it. In effect, I'm asking the impossible -- I want a parent container to inherit the width of an element that isn't even the widest thing inside it. Even I know this is nuts.

Guess I'll just create 3 or 4 fixed width styles with obvious class names like "150left" or "250right", tell people to size pictures accordingly and go with the the best fit. It's not elegant but it's the best I can do. Ugh.

I haven't checked all the links suggested here but I will. If I find a better method, I'll post it. In the meantime, with all your help I'm still way ahead of where I started. Thanks again everybody.



d a v e -> RE: pictures with captions? (4/17/2004 10:25:29)

well really you shouldn't have more than 2 or 3 different sizes, rather than numerous haphazard sizes - you wouldn't get many different sizes in a newspaper!
all you need are say small, medium, large (if that) and in portrait/landscape flavours, so you'd be looking at 6 styles, possibly 3 if you had the width of the portrait the same as the width of smaller landscapes. it's far better to specifiy sizes (i.e. widths) because then the photos have a consistent look to them.

really it's not 'elegant' to have so many more picture sizes. I understand that your contirbutors aren't the most web savvy, but then that's all the more reason to give them some guidelines and restrictions e.g. a few fixed widths.

good luck!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
9.570313E-02