|
| |
|
|
socks
Posts: 17
Joined: 3/7/2002
From:
Status: offline
 |
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.
|
|
|
|
socks
Posts: 17
Joined: 3/7/2002
From:
Status: offline
|
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.
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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?
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: pictures with captions? - 4/16/2004 5:13:16
i thought it was better than my ugly mug ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
socks
Posts: 17
Joined: 3/7/2002
From:
Status: offline
|
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
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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>
< Message edited by c1sissy -- 4/16/2004 7:07:22 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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 )
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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/
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
socks
Posts: 17
Joined: 3/7/2002
From:
Status: offline
|
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.
< Message edited by socks -- 4/16/2004 20:49:59 >
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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..
_____________________________
David Prescott
Gekko web design
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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?
_____________________________
David Prescott
Gekko web design
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
socks
Posts: 17
Joined: 3/7/2002
From:
Status: offline
|
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
Posts: 4086
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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!
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Needless to say it is making me crazy because I can't find this page! ARRGGHHH!!!
