On 31 Mar 2006 19:24:54 -0800, in comp.infosystems.
www.authoring.stylesheets "J"
<sk*********@yahoo.com> wrote:
I am new to web design and I am looking for some advice on putting
images within paragraphs of text. I have determined that sizing the
height of my images to a given number of lines of text seems to work
well, however:
If for example I align the image to the left, I will then put a border
on the top, bottom, and right edges of my image which matches my
background, in order to provide aesthetically pleasing space between
the image and surrounding text, and also keep the left image edge flush
with the adjacent left text margin. I am inclined to leave my
cellpadding/cellspacing settings alone because I like the way
everything else looks. But I am inclined to think there is a better
way to do this (either with css or html) and would appreciate a
suggestion.
John
I have found the following construction to be useful.
First, make sure your HTML files can find your css file:
<head>
<LINK REL=StyleSheet HREF="./cvproj.css" TYPE="text/css" MEDIA=screen>
</head>
Note: You can name your css file anything you want to; "href="./mycss.file",
"href=./thatdamnedcomplicated.css"...
In your css file:
div.photoleft { float: left;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
text-align: center; }
div.photoright { float: right;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 15px;
text-align: center; }
Examples for your HTML:
<div class="photoright">
<img src="http://www.history.navy.mil/photos/images/g370000/g373816t.jpg"
alt="USS Essex" title="CV-9 USS Essex, May 1945" width=200 height=158>
<br>
<i>USS Essex</i> (CV-9) underway during<br>the Okinawa campaign, May 1945.<br>
U. S. Navy photo from<br>the U. S. Naval Historical Center
</div>
<div class="photoleft">
<img src="http://www.history.navy.mil/photos/images/h97000/h97488kt.jpg"
alt="USS Ticonderoga" title="CV-14 USS Ticonderoga, ca. 1970-72" width=200
height=158>
<br>
A post-refit modernised<br><i>Essex</i>-class carrier.<br>This is CV-14 <i>USS
Ticonderoga</i><br>in the early 70s.<br>
U. S. Navy photo from<br>the U. S. Naval Historical Center
</div>
You mentioned "(putting in) a border on the top, bottom, and right edges of my
image which matches my background, in order to provide aesthetically pleasing
space between the image and surrounding text." The MARGIN-top/bottom/left/right:
99px parameters in the CSS do just that, and they are transparent; your
background will show through.
For detailed explanations of the various elements and parameters used, I
recommend the Web Design Group site at
http://www.htmlhelp.com/ .
HTH
--
Money can't buy happiness, but it can let you rent it for a while...
