On Sun, Aug 15, 2010 at 10:35 PM, Keith Purtell <
keithpurt...@keithpurtell.com> wrote:

> I want to diagnose problems on this page. One at a time; I don't want
> all the answers to every flaw you see ... I want to work and try to
> figure out most of this myself. Please ignore the attempted fly-out
> navigation links at top left for now (I'm looking at this in FireFox by
> the way).
>
> What about my images? You can see how I handled them years ago; putting
> them in boxes so text would flow around them. I turned on the borders so
> you could see that. Obviously they are not indenting 140 pixels like the
> text. I tried placed the first image/table inline the paragraph, but
> that obviously failed. Comments? I'm still reading Eric Meyer's book
> ("Cascading Style Sheets/The Definitive Guide"): Maybe I just need a
> pointer to the right chapter?
>
> http://www.keithpurtell.com/kthings/a_body_vance_divs.htm
>
> - Keith Purtell
>
>
Well - in general, you can take the images within the content area out of
the table and use floats instead. An example with the first image would be
to put this code just before the first <p> tag:

<img src="images/jvsn2b.jpg" width="144" height="174" style="float:left;" />

I wrote it with the inline style just so you could see what it does.
Normally, you'd take that out and put in your stylesheet and probably
call that rule by applying
a class to the image. Something like:

<img src="images/jvsn2b.jpg" width="144" height="174" class="floatL" />

Then in the stylesheet you'd have an entry such as:

.floatL {float:left;}

You could do the same for float:right.


And, you can wrap your image with the <a> tag too.  But it's always
easier to practice with as little extra stuff as possible.

By the way - I noticed you had the same "pindent" class on every
paragraph.  If you are, in fact, going to use that on every single
paragraph, then you can just
write a rule in your external stylesheet and apply to every <p> using
either margins or padding.  Maybe something like: p
{margin-left:20px;}

That's just an example.

Chris A.
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to