Jump to content
TNG Community

Code for Images Within Histories


JerryL.

Recommended Posts

I need assistance with an html coding issue. I often use the TNG histories template (extrapgs construct) for various stories. I usually have images embedded within these stories. I want to end up with images that are enclosed in a border that have space beyond the border so that text doesn't cram into the border. When I use hspace and vspace, I get the white space around the picture, but the border doesn't appear; if I designate a border, the hspace and vspace don't work. I also may be using incorrect code and may be using deprecated tags. Can anyone help out?

Here is the code that I use that that gives me the white space but doesn't generate a border:

<table align="left" width="200">

<tr><td>

<img src="JohnFairfieldLowell2smallCB.gif" hspace="10" vspace="15" width="200" height="277">

</td></tr>

<tr><td width="200" align="center">

<span class="smaller">

<i>John Fairfield Lowell.</>

</td></tr></table>

For an example of the above, see:

http://www.connectedbloodlines.com/histori...johnfairbio.php

Here is the code that I use that generates a border but I am unable to introduce white space around the image:

<table align="left" border="1">

<tr><td>

<img src="http://www.connectedbloodlines.com/histories/stories/historicalconnections/AfonsoICB.jpg" width="175" height="200"

</td></tr>

<tr><td width="175" align="center">

<span class="smaller">

<i>Afonso I, King of Portugal</>

</td></tr></td></tr></table>

For an example of the above, see:

http://www.connectedbloodlines.com/histori...connections.php

Thanks in advance for any assistance.--Jerry

Link to comment
Share on other sites

I need assistance with an html coding issue. I often use the TNG histories template (extrapgs construct) for various stories. I usually have images embedded within these stories. I want to end up with images that are enclosed in a border that have space beyond the border so that text doesn't cram into the border. When I use hspace and vspace, I get the white space around the picture, but the border doesn't appear; if I designate a border, the hspace and vspace don't work. I also may be using incorrect code and may be using deprecated tags. Can anyone help out?

Here is the code that I use that that gives me the white space but doesn't generate a border:

<table align="left" width="200">

<tr><td>

<img src="JohnFairfieldLowell2smallCB.gif" hspace="10" vspace="15" width="200" height="277">

</td></tr>

<tr><td width="200" align="center">

<span class="smaller">

<i>John Fairfield Lowell.</>

</td></tr></table>

For an example of the above, see:

http://www.connectedbloodlines.com/histori...johnfairbio.php

Here is the code that I use that generates a border but I am unable to introduce white space around the image:

<table align="left" border="1">

<tr><td>

<img src="http://www.connectedbloodlines.com/histories/stories/historicalconnections/AfonsoICB.jpg" width="175" height="200"

</td></tr>

<tr><td width="175" align="center">

<span class="smaller">

<i>Afonso I, King of Portugal</>

</td></tr></td></tr></table>

For an example of the above, see:

http://www.connectedbloodlines.com/histori...connections.php

Thanks in advance for any assistance.--Jerry

Jerry,

The easiest way I have found for formatting histories is to create a MS Word document formatted just the way I want it, then copy and paste the whole thing into the histories body text. The HTML gets pretty ugly, but it is all formatted automatically. Sometimes you need to manually tweak the image locations when doing this, but otherwise the process is pretty simple.

Good luck,

Bryan

Link to comment
Share on other sites

Jerry,

The easiest way I have found for formatting histories is to create a MS Word document formatted just the way I want it, then copy and paste the whole thing into the histories body text. The HTML gets pretty ugly, but it is all formatted automatically. Sometimes you need to manually tweak the image locations when doing this, but otherwise the process is pretty simple.

Good luck,

Bryan

Thanks for the suggestion, Bryan. I'll give it a try! Appreciate the help.--Jerry

Link to comment
Share on other sites

  • 1 month later...
Robin Richmond

I recommend that you try to use styles rather than deprecated HTML attributes to accomplish this styling goal.. They can be intimidating at first, but they ultimately make a tremendous difference. W3Schools.com/css is one of many good places to learn about CSS.

In your case, a border around the picture or the picture and the caption can be created with the border style. The margin is separated from the contents inside the border with the padding style, and is separated form other content with the the margin style.

For one of your pictures, this seemed to do the trick:

(I modified the caption to show it being constrained by the div width

<div style="float:left; width:205px; padding:5px; border:thin solid blue; 
               margin-right:2em; text-align:center;">
          <IMG width="200" height="277" src="JohnFairfieldLowell2smallCB.gif"
               style="padding:2px; border:thin solid black; margin-bottom:5px;">
          <br><span class="smaller"><i>John Fairfield Lowell. - the ancestor who settled in Dakota Territory</i></span>
</div>

That is,

- a <div> rather than a table wraps the picture and caption.

- The div and its comments float to the left

- The div width, like your table cell width, constrains the caption.

- I made the width 205px to accommodate the padding and margin on the image.

- The div has a padding of 5px inside its blue border.

- The div has a right margin of 2em to separate it from the paragraph text, and

- The contents are aligned to the center of the div.

- The image has a 2px margin inside its black border, and a bottom margin of 5px to offset the caption.

- The <br> tag moves the caption below the image.

Best of luck

- Robin

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...