Frogleg said:
Geez Louise! Suppose the next photo is 400px wide? Or 200?
I don't think you explained what you were trying to accomplish very
well, but I think I understand now.
Isn't the
point of CSS that one doesn't have to handcraft every single instance
of image and text?
No, it depends on what you are trying to accomplish. You need some
commonalities for generic CSS rules to work well. You apparently don't
have any.
I thought by supplying a URL that illustrated the difficulty, it would
be clearer than explaining that...
A URL may be worth 1000 words, but I still couldn't really tell what you
thought was wrong or what you were trying to achieve. I only noticed the
border overlaying the image in the last example and thought that was the
only trouble.
I want to have a page with photos and text. I really *don't* want
tables because I want different size photos, with and without text,
and maybe text-only sections with all the text having a uniform look.
That is, for the text, a left margin that separates it from a graphic
or another text section. The border is a frill.
If you had said this in your first post, it might have saved a lot of
guessing.
In the first (CSS) example, I have simply inserted the photo and a
<div> for text. This fails to meet my needs because the handled
sequentially from the top down.
In the 2nd (CSS) example, for reasons I obviously don't understand,
the image is being treated sort of as a single character added into
the margin(?) -- I dunno.
You need to learn the difference between inline and block elements, and
basic positioning. <img> is inline, so by default it flows left to right
and line wraps like any other inline element (a, span, em, strong,
etc.). <div> is block, and by default will start on a new line like any
other block element (p, hx, ul, blockquote, etc.).
In both your CSS examples, <img> is in an anonymous box, <div> is a new
block box that follows it. It may only appear to be 1 character wide in
your browser because the image itself is 404 and the alt text is null.
It will probably look different if you used an existing image or
assigned real alt text.
In your second example, you have assigned the image attribute
align="left", which makes it behave like a left-floated element. This
automatically changes the image from inline to block, and the text now
flows next to it instead of below it. You should also drop HTML style
attributes in favor of CSS. float:left is what you want.
If this is impossibly difficult to do, I will simply make multiple
tables OR handcraft each instance as suggested above.
Tables are ishy, you don't really need them. If the border is just a
frill, why don't you forget about it altogether and just apply a right
margin to the image (or any other left-floated block)?
And I suggest using <p> instead of <div> for the text because it makes a
lot more semantic sense, and include the <img> within it because it
really belongs there. If you drop the text border and apply the margin
to the image, you shouldn't need any special styling on the text block
at all. For example
HTML
<p class="separate">
<img src="old_lib_sml.jpg" width="320" height="211" alt="(text)">
The Charles H. Taylor Library was transformed into an
Art Center when the new main library opened in 1994.
</p>
CSS
..separate img {
float:left;
margin-right: 1em;
margin-bottom: 1em;
border: 1px solid;
}
You might want to use a more descriptive class name than "separate" now.