Images & Text

#1

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

#2

Addendum -- I realize after posting that cellpadding/spacing has
nothing to do with the internal positioning of images within a single
cell. Apologies for that misleading info.

#3

On 31 Mar 2006 19:24:54 -0800, in comp.infosystems.www.authoring.stylesheets "J"
<skyliner306 (AT) yahoo (DOT) com> wrote:

Quote:

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...

#4

William,

This worked well. Many thanks.

John

#5

In article <1143861894.924025.189510 (AT) v46g2000cwv (DOT) googlegroups.com>, J
<skyliner306 (AT) yahoo (DOT) com> writes

Quote:

I have determined that sizing the height of my images to a given number
of lines of text seems to work well

Based on what? How do you know what size the user will have their text?
How do you know how wide their browser window is? If they change the
width, it may change the way the lines wrap/break, resulting in a
different number of lines from your intention.

Not criticising, just pointing out that you can't make assumptions about
the user's settings.

--
Alan Silver
(anything added below this line is nothing to do with me)

#6

On Mon, 3 Apr 2006, Alan Silver wrote:

Quote:

In article <1143861894.924025.189510 (AT) v46g2000cwv (DOT) googlegroups.com>, J
skyliner306 (AT) yahoo (DOT) com> writes
I have determined that sizing the height of my images to a given
number of lines of text seems to work well

Based on what? How do you know what size the user will have their
text?

Regular text? It'll be 1.0em. Line *height* is typically somewhat
larger - but if you size the image in em units, you'll be aiming at
some approximation to the intended size. The quality of the result
may be less than ideal, though, since browsers can be a bit rough and
ready when resizing images on the fly. Avoid indexed image formats
when doing this (jpeg may be a good choice - of course the flip side
is that jpeg can't do transparency).

Quote:

How do you know how wide their browser window is?

Don't know - don't want to know. Design should be chosen for its
ability to adapt well across a good range of user settings.

Quote:

If they change the width, it may change the way the lines
wrap/break, resulting in a different number of lines from your
intention.

That's what flexible design is all about. The image can still be
sized in em units to be consonant with the text.

#7

On 3 Apr 2006 07:54:10 -0700, in
comp.infosystems.www.authoring.stylesheets "J" <skyliner306 (AT) yahoo (DOT) com>
wrote:

Quote:

William,

This worked well. Many thanks.

John

de nada. Always happy to help.

Money can't buy happiness, but it can let you rent it for a while...

#8

In article <Pine.LNX.4.62.0604032148310.10076 (AT) ppepc55 (DOT) ph.gla.ac.uk>,
Alan J. Flavell <flavell (AT) physics (DOT) gla.ac.uk> writes
<snip>

I think we are saying the same thing here. My point was that the OP
implied (although that may have been incorrect) that images were to be
sized based on how large (ie pixel size) the text was. I was merely
pointing out that you don't know that. I didn't get the impression that
he was referring to sizing in the browser, more to sizing them to a
specific number of pixels in Photoshop (or whatever).

You are right in that you can resize the images in the browser, and
choose ems as units, but the impression I got from the OP's post was
that this was *not* what was being suggested. If it was, then nothing
more to add.

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Images & Text

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Images & Text - 03-31-2006 , 10:24 PM

Re: Images & Text - 03-31-2006 , 10:30 PM

Re: Images & Text - 04-01-2006 , 12:02 AM

Re: Images & Text - 04-03-2006 , 10:54 AM

Re: Images & Text - 04-03-2006 , 04:38 PM

Re: Images & Text - 04-03-2006 , 04:55 PM

Re: Images & Text - 04-03-2006 , 09:30 PM

Re: Images & Text - 04-04-2006 , 11:40 AM