JerryL. Posted October 6, 2013 Report Share Posted October 6, 2013 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.phpThanks in advance for any assistance.--Jerry Quote Link to comment Share on other sites More sharing options...
bsl20b50 Posted October 6, 2013 Report Share Posted October 6, 2013 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.phpThanks 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 Quote Link to comment Share on other sites More sharing options...
JerryL. Posted October 7, 2013 Author Report Share Posted October 7, 2013 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,BryanThanks for the suggestion, Bryan. I'll give it a try! Appreciate the help.--Jerry Quote Link to comment Share on other sites More sharing options...
Robin Richmond Posted November 11, 2013 Report Share Posted November 11, 2013 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.