I'm in the process of converting a tables-based site to CSS - one of my first so bear with me.
In the old site I would embed a photo with caption and credit in a particular paragraph, by embedding a table in the paragraph (yes I know it's totally illegal) containing the image, caption and credit. Here's an example:
<!-- m --><a class="postlink" href="http://www.earthcorps.org/restoration.php">http://www.earthcorps.org/restoration.php</a><!-- m -->
In trying to recreate the same thing in CSS, I'm putting all the parts inside a <span> (due to the understanding that I can't embed a <div> in a paragraph, and since each image needs to be embedded in a specific paragraph, often not the first one), but I only seem to be able to use span tags inside that span for the text - when I use p tags, the text jumps outside the span box.
I'd like to use p tags because the credit line is supposed to right align, the caption center aligns, and there needs to be a bit of margin on top of the caption.
Here's the version using spans inside spans - as you can see the text is all aligning left. I'm sure I could right align it all, but I want to right align the credit and center the caption:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/about_test.html">http://www.cultivatedesign.org/ecor/about_test.html</a><!-- m -->
What's a good way to approach this? Should I put each paragraph into its own div, and then perhaps I'll be able to put the image/credit/caption combo inside another div and float it relative to its paragraph? Or is there a way to do this "inline"?
Thanks in advance,
BobAw poop - I've gone and figured it out. Seems there's nothing wrong with having a right-floated div followed by a paragraph within the content flow. For some reason I thought putting things in divs would goof up the layout, but as long as they're outside the p tags I think it's all legal and works quite well. Like this:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/about_test2.html">http://www.cultivatedesign.org/ecor/about_test2.html</a><!-- m -->
Thanks - sorry for the trouble.
- Bob
In the old site I would embed a photo with caption and credit in a particular paragraph, by embedding a table in the paragraph (yes I know it's totally illegal) containing the image, caption and credit. Here's an example:
<!-- m --><a class="postlink" href="http://www.earthcorps.org/restoration.php">http://www.earthcorps.org/restoration.php</a><!-- m -->
In trying to recreate the same thing in CSS, I'm putting all the parts inside a <span> (due to the understanding that I can't embed a <div> in a paragraph, and since each image needs to be embedded in a specific paragraph, often not the first one), but I only seem to be able to use span tags inside that span for the text - when I use p tags, the text jumps outside the span box.
I'd like to use p tags because the credit line is supposed to right align, the caption center aligns, and there needs to be a bit of margin on top of the caption.
Here's the version using spans inside spans - as you can see the text is all aligning left. I'm sure I could right align it all, but I want to right align the credit and center the caption:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/about_test.html">http://www.cultivatedesign.org/ecor/about_test.html</a><!-- m -->
What's a good way to approach this? Should I put each paragraph into its own div, and then perhaps I'll be able to put the image/credit/caption combo inside another div and float it relative to its paragraph? Or is there a way to do this "inline"?
Thanks in advance,
BobAw poop - I've gone and figured it out. Seems there's nothing wrong with having a right-floated div followed by a paragraph within the content flow. For some reason I thought putting things in divs would goof up the layout, but as long as they're outside the p tags I think it's all legal and works quite well. Like this:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/ecor/about_test2.html">http://www.cultivatedesign.org/ecor/about_test2.html</a><!-- m -->
Thanks - sorry for the trouble.
- Bob