Putting captions on Photos

[twhit...@gmail.com]

I have ran into a problem as far a putting a caption under a photo in
Blueprint. I can get the text on the page but cannot seem to get the
caption directly under the photo. The following is the current coding
(this coding works in CSS without Blueprint but not once you do it in
Blueprint):





<p><img src="flag.jpg"><br />
"Caption!"</p>
</body>
</html>


With this the photo is floated to the left and the text is on the line
above the photo in the center of the page.
When I create and HTML page without Blueprint the caption is under the
photo, when Blueprint is added to the page images are forced to the
left and my caption no longer appears under the image. I am looking
for the best way to have the caption displayed under the image.
If anyone has any ideas I welcome and greatly appreciate them.


Timothy White

[Christian Montoya]

I think a quick fix would be to wrap the whole thing in a DIV instead of a P.

--
--
Christian Montoya
christianmontoya.net

[twhit...@gmail.com]

I have tried using a DIV instead of a P as per your suggestion and
still get the same result of having the caption centered on the top
line with the photo floated to the left on the second line.


On Nov 6, 3:16 pm, "Christian Montoya" <siro...@gmail.com> wrote:
> On Thu, Nov 6, 2008 at 2:56 PM, twhite12...@gmail.com

[Chris Hunt]

I would probably wrap it in a div and add the selector "align:center"
and then put a span around the caption and add the selector "margin:0px
auto". If you want the code let me know. Saying that I ain't tried it
out but it should work!

~Chris

[Lukie]

Good evening twhite12304,

It was foretold that on 06/11/2008 @ 11:56:24 GMT-0800 (PST) (which
was 17:56:24 where I live) twhite12304 would write:

<snipped a bit>

tgc> I am looking for the best way to have the caption displayed under
tgc> the image.

Something like this?

http://www.dzinelabs.com/Pages/gallery.php

--
Best regards,
Lukie

-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Nescafé no es café. (Instant coffee is not coffee.)" - (Mexican
Saying).
--------------------------------------------

[Chris Hunt]

Nice one Luke.

Looking at that and my last comment it would seem that the span would be
redundant.

To the original poster, you should get firebug if you haven't already
got it. You can then inspect the code...

Hope this helps.

~Chris

[Christian Montoya]

Listen you two. This is a BLUEPRINT CSS FRAMEWORK list. If your
answers don't involve Blueprint, then don't post. You are not helping
Timothy, the original poster, with his problem. You are only providing
irrelevant information.

Tim, I would remove the lines from Blueprint CSS that float images, or
add a class to that so that it doesn't affect all images on the page.
I am thinking about changing the code so that this is the case anyway;
it always annoyed me that BP floats images by default. Hope that
helps.

[twhit...@gmail.com]

I really appreciate all of the help and input I have received here.
This is what I have come up with, it can be done a couple different
ways. This is the code so that hopefully it will help someone else in
the future ( with notes added in the code as comments).


<div class="container">

<!-- two ways to do it: one with background-image... -->
<div class="first span-4" style="background-image: url(flag.jpg)">
&nbsp; <!-- something has to be in the div, I guess?!! WD-rpw
11-6-08 -->
</div>
<div class="clear first span-4 first">
<p>God Bless America!</p>
</div>

<!-- and one with img-inside-a-div [I have found this to be the best
method]-->
<div class="clear first span-4">
<img src="flag.jpg">
</div>
<div class="clear first span-4">
<span>Caption 2</span>
</div>


</div>

<!-- BUT, we can make it work:
<http://groups.google.com/group/blueprintcss/msg/bc05e35d728073fb>

Tim, I would remove the lines from Blueprint CSS that float images,
or

add a class to that [in the rendered blueprint css files] so that it

doesn't affect all images on the page.
I am thinking about changing the code so that this is the case anyway;
it always annoyed me that BP floats images by default. Hope that
helps.

Christian Montoya
christianmontoya.net

With these changes, images and captions work in blueprint like they do
elsewhere
-->
<img class="" src="img2.jpg">
<p>Last!!!</p>
</body>
</html>


Thanks to all,
Timothy White
Wilcox Development Solutions

On Nov 6, 4:17 pm, "Christian Montoya" <siro...@gmail.com> wrote:

[Lukie]

Good evening Christian,

It was foretold that on 06/11/2008 @ 16:17:44 GMT-0500 (which was

19:17:44 where I live) Christian Montoya would write:

<snipped a bit>

CM> Listen you two. This is a BLUEPRINT CSS FRAMEWORK list. If your
CM> answers don't involve Blueprint, then don't post. You are not helping
CM> Timothy, the original poster, with his problem. You are only providing
CM> irrelevant information.

Sorry but i thought that i had seen messages here with solutions that
envolves custom css outside the BP framework ... i'm sure that 'once in a
while' you'll have to use some own css ... i was just trying to help
the original poster.

To quote yourself from message BP #2218:

"You would do this in your custom CSS, give the first div an ID like
"content1" and do:

#content1 {
margin-bottom:16px; // or w/e amount you want"

So what's wrong with giving the original poster a demo how you can
achieve what he wants? It can be incorporated in his BP framework
... probably needs some custom css.

Can't see how that's irrelevant?

--
Best regards,
Lukie

-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Statistics have shown that the death rate in the army rises notably
in times of war." - Alphonse Allais (1854-1905) - French writer
--------------------------------------------

[Christian Montoya]

On Thu, Nov 6, 2008 at 5:04 PM, Lukie <luk...@yahoo.co.uk> wrote:
>
> Good evening Christian,
>
> It was foretold that on 06/11/2008 @ 16:17:44 GMT-0500 (which was
> 19:17:44 where I live) Christian Montoya would write:
>
> <snipped a bit>
>
> CM> Listen you two. This is a BLUEPRINT CSS FRAMEWORK list. If your
> CM> answers don't involve Blueprint, then don't post. You are not helping
> CM> Timothy, the original poster, with his problem. You are only providing
> CM> irrelevant information.
>
> Sorry but i thought that i had seen messages here with solutions that
> envolves custom css outside the BP framework ... i'm sure that 'once in a
> while' you'll have to use some own css ... i was just trying to help
> the original poster.
>
> To quote yourself from message BP #2218:
>
> "You would do this in your custom CSS, give the first div an ID like
> "content1" and do:
>
> #content1 {
> margin-bottom:16px; // or w/e amount you want"
>
>
> So what's wrong with giving the original poster a demo how you can
> achieve what he wants? It can be incorporated in his BP framework
> ... probably needs some custom css.
>
> Can't see how that's irrelevant?
>

Lukie,

Yes, but you linked to an example that didn't use Blueprint, making it
not entirely helpful.

[Lukie]

Good evening Christian,

It was foretold that on 06/11/2008 @ 17:23:28 GMT-0500 (which was
20:23:28 where I live) Christian Montoya would write:

CM> Yes, but you linked to an example that didn't use Blueprint, making it
CM> not entirely helpful.

I thought that by seeing the structure and code it would be more
helpful than just copy and paste :-)

You can't always link to a BP example when custom css is needed.

For future reference, i'll paste if necessary ;-)

--
Best regards,
Lukie

-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Buy old masters. They fetch a better price than old mistresses." -
attributed to Lord Beaverbrook(1879-1964).
--------------------------------------------

[Christian Montoya]

On Thu, Nov 6, 2008 at 5:52 PM, Lukie <luk...@yahoo.co.uk> wrote:
>
> Good evening Christian,
>
> It was foretold that on 06/11/2008 @ 17:23:28 GMT-0500 (which was
> 20:23:28 where I live) Christian Montoya would write:
>
> CM> Yes, but you linked to an example that didn't use Blueprint, making it
> CM> not entirely helpful.
>
> I thought that by seeing the structure and code it would be more
> helpful than just copy and paste :-)
>
> You can't always link to a BP example when custom css is needed.
>
> For future reference, i'll paste if necessary ;-)

OK, all understood, I don't want anyone to think I'm saying no to
help, it's just that examples without Blueprint in the CSS can be very
confusing or misleading.

[iro...@googlemail.com]

You might want to take a look at my approach of image captions at
www.erikpoehler.com.
Basically what i do is use Javascript to display the alt attribute,
very much like the old js tooltips. Only thing i do different is to
display the caption within/above the image (while it only works for
short captions).