Captions

[Harvey]

Can someone tell me why this isn't working?

<span style="font-size:80%; text-align:center">caption</span>

I get the font at 80% but the caption isn't centered.

When I do this:

<span style="font-size:80%"><center>caption</center></span>

it works, but I know I'm not supposed to use the center tag anymore.

[Hugo <Nabble>]

You should use a DIV, not a SPAN.
DIVs are block elements and SPANs are inline elements.

[Harvey]

That does work.

For some reason in our magazine the span tag does work. Not sure why. I just copied and pasted from the magazine and it worked.  The magazine span tag is within an htag. Does that matter?

[Pedro]

When you use an inline tag its width fits the words inside it. So, "text-align" doesn't have effect on inline tags.

[Pedro]

Hi,
I think it works with right or left float, doesn't matter the image size.

<div style="text-align:center; float:left; padding:5px " >
<nabble_img src="yourImage.jpg" border="0"/>
<div>caption text</div>
</div>

you have to insert your image without any float, and put a div with your caption text under it. Then, surround them with a div with "text-align:center", your float(right or left) to place the image where you want and a padding, so your text won't "touch" the image.
You can use css and put these style attributes in a class.

[GregChapman]

Harvey44 wrote

For some reason in our magazine the span tag does work. Not sure why. I just copied and pasted from the magazine and it worked.  The magazine span tag is within an tag. Does that matter?

I can't access the magazine (without registering - and I'm conscious that I'm in danger of being one of "too many cooks" that's just going to confuse you with conflicting suggestions!), so can't give a definitive answer, but it's almost certainly a case of inheritance.

Maybe, in the magazine, one of the parent tags already has a centred style and the reality is that the "text-align: center" in the span actually has no effect. What you see is the effect of the styling of the parent tag's styling.

[Harvey]

Pedro <Nabble> wrote

Hi,
I think it works with right or left float, doesn't matter the image size.

<div style="text-align:center; float:left; padding:5px " >
<img src="http://nabble-support.1.n2.nabble.com/file/n7430703/yourImage.jpg" border="0"/>
<div>caption text</div>
</div>

you have to insert your image without any float, and put a div with your caption text under it. Then, surround them with a div with "text-align:center", your float(right or left) to place the image where you want and a padding, so your text won't "touch" the image.
You can use css and put these style attributes in a class.

That looks like a "simple" solution (meaning it doesn't have a lot of code), but honestly I don't understand it.  I have a small amount of HTML knowledge and almost no knowledge of CSS.

[GregChapman]

Hi Harvey,

Here's an explanation:

Line #1:

<div style="text-align:center; float:left; padding:5px " >

div :
Create a box on the page. A div is a type of box, known as a block, that normally will start beneath the previous block and fill the full width of the box in which it is contained.

style=" :
Apply the following styling features to the box. These may over-ride and defaults or styling features inherited from the boxes in which this one is contained.

text-align:center; :
Centre any text found within this box

float:left; :
Take this box out of the "normal flow"  (i.e. remove the requirement for this block to start beneath the previous block and fill the available width) and align it with the left margin of the box in which it is contained. As this box is floated, following blocks will be allowed to wrap around this floated box and follow immediately the previous block in normal flow.

padding:5px :
Add some spacing around the content of the box, but inside the area where a border could be placed. (This space is in contrast with "margin" spacing that falls between any border and a neighbouring box.)

Line #2:

<img src="http://nabble-support.1.n2.nabble.com/file/n7430703/yourImage.jpg" border="0"/>

img :
Insert an image at this point in the document. Because the image is placed within a floated div, the div has no predetermined width and will expand to accommodate the its content.

src= :
Find the file to use for this image at the following location.

border="0" :
Don't add a border to this image

Line #3:

<div>caption text</div>

div:
Create a further block on the page. Note that this one is fully contained within the earlier div, so any inheritable styling features will be applied to this box. Text alignment is inheritable so there is no need to specify text alignment here.

Note that there is nothing to restrict the width of this box. If the caption text is sufficiently long, this box will expand to accommodate it, also forcing the parent box containing the image to expand. To stop such expansion one or more < br> tags will be needed to force the text to wrap appropriately.

/div :
Closes the caption box

Line: #4:

</div>

/div :
Closes the image box, thereby keeping image and caption together.

[Harvey]

I don't have the skills to understand most of what has been posted above.  Would it be possible to create a feature that would create captions for you the way wordpress works? You just enter the caption and it is centered under the picture regardless of whether the picture is centered, or right or left.

The solution I am using now looks OK on a desktop but does not work on a mobile:

http://directory.nyskiblog.com/Whiteface-Mountain-Ski-Center-td4646997.html

[Pedro]

Could you send a screen shot from your mobile? It's working fine on mine.

[Harvey]

[Harvey]

To be honest I have no idea how it works on the desktop. It's not even in a div with the image?

Also the way we are doing it now it's not consistent on the desktop.  The caption sometimes has padding on top and sometimes doesn't.

Plus the image padding around the photo isn't "square." It cuts off a corner.

I think it would work consistently if the caption was in a container with the photo.  How does wordpress do it?

[Pedro]

Our container is the div. Could you give me a link from a page in wordpress which has the caption you want?

[Harvey]

Check this out. It's Wordpress done with a class I think.

http://nyskiblog.com/history-of-whiteface/

[Harvey]

This is kind of a hack job but I seems to work ok:

<div style="text-align:center; float:right; padding:20px 96px 0 0; margin-top:-8px;" ><nabble_img src="Bellearye-Sunset-Lodge.jpg" style="margin: 0 0 6px 16px;" width="320" class="right single"  alt="Sunset Lodge"/><div><h5>Belleayre's Sunset Lodge</h5></div></div>

The problem is when you dont include the image in the <P> tags the images dont respect the margins.  This compensates for that (padding 96px), Still not very elegant.

[Pedro]

That is almost the same thing we used. Do you know if every capiton goes wrong in your mobile?

[Harvey]

The difference is that my code is in the same div. It also stays with the picture on my mobile and the corners aren't rounded.

But I'd still rather have a true class.

Forums dont really need it, but newspapers do.

On Fri, Apr 26, 2013 at 7:12 PM, Pedro <Nabble> [via Nabble Support] <[hidden email]> wrote:

That is almost the same thing we used. Do you know if every capiton goes wrong in your mobile?

---

If you reply to this email, your message will be added to the discussion below:

http://support.nabble.com/Captions-tp7418606p7584206.html

To unsubscribe from Captions, click here.
NAML

--
"Like" us on Facebook: www.facebook.com/NYSkiBlog
Follow us on Twitter: http://twitter.com/nyskiblog
----------
Harvey Road: NYSkiBlog.com
NY Ski Forum: forum.NYSkiBlog.com
NY Ski Magazine: mag.NYSkiBlog.com

NY Ski Directory: directory.NYSkiBlog.com

[Pedro]

why don't you use this solution again?

[Harvey]

Pedro <Nabble> wrote

why don't you use this solution again?

That's  where i started and basically what I tried except I couldn't get the picture to stay within the margins on the side and the text didn't line up with the top of the photo.  So what we did was to deal with those issues. Not ideal but an improvement.

[Pedro]

I checked it again, and it seems that you changed the code. It might be working now, right?