Aligning Table and Image

As I continue to add to/complicate my Web site, I encounter more
problems that aren't solved by manuals or Google 8<{{
Here:

www.midtownmuseumdistrict.org/Beauty02

is my attempt to align some table information with a corresponding
picture. Before I added the <img...> information, everything lined up
as I wanted, but adding the image changes it all...although there seems
to be enough room where needed. I've tried various things to manually
align the table and the image, but doing so forces wrapping in the table
cells (shouldn't be needed, afaics...). No doubt my basic approach is
wrong, but I don't know what to do here. Please advise. TIA

On Sun, 26 Jul 2009 13:52:09 -0700, Mike Copeland wrote:

www.midtownmuseumdistrict.org/Beauty02

is my attempt to align some table information with a corresponding
picture. Before I added the <img...> information, everything lined up
as I wanted, but adding the image changes it all...although there seems
to be enough room where needed.

First of all, I'm assuming you mean that the table for Ide Mania has its
columns divided differently from the columns of the other tables. If that's
not what you mean, then you can stop reading.

It's not the image you added, or any of your CSS, it's the extra top row
which I presume you added around the same time as the image. It doesn't
have the 35%/65% split width specifications you have in the td's of the
respective first rows of the other tables. Get rid of the first row (you
don't need it anyway, right?) or move (or at least copy) the width specs
from the second to the first row.

Turns out your question isn't really related to c.i.w.a.s, but then your
site is underusing CSS, too. Do you really like code like:

<div style="text-align: center;">
<big><big><big><span style="font-weight: bold;"><u>

? Or perhaps you're working through weeding that sort of thing out, for
which I commend you, and wish you success.

One last remark, only very remotely related to your query: A <title> like
"Beauty" won't be too helpful for either visitors or search engine results.
Try to fill it out a bit (e.g. "MMDNA Business Directory: Beauty
Services").

HTH

--
John

Sun, 26 Jul 2009 13:52:09 -0700 from Mike Copeland <mrc2323 (AT) cox (DOT) net>:

As I continue to add to/complicate my Web site, I encounter more
problems that aren't solved by manuals or Google 8<{{
Here:

www.midtownmuseumdistrict.org/Beauty02

is my attempt to align some table information with a corresponding
picture. Before I added the <img...> information, everything lined up
as I wanted, but adding the image changes it all...although there seems
to be enough room where needed. I've tried various things to manually
align the table and the image, but doing so forces wrapping in the table
cells (shouldn't be needed, afaics...). No doubt my basic approach is
wrong, but I don't know what to do here. Please advise. TIA

Try narrowing your viewport. You'll see that the table is pushed
below the picture. I don't imagine that's what you want, but I
haven't worked on a solution.

The basic issues, if I am not mistaken, are (a) <td> widths are
*suggestions* to the browser, (b) there's no way to ensure that
columns of different tables have the same widths, (c) you're
specifying width attributes on your <td>s instead of using CSS.

You have an awful lot of stylistic markup -- all those <b> and <big>
and <td width=>, for instance. I suggest replacing them by CSS. One
solution is to get rid of all that cruft, change the first <td> on
each line to <th>, and introduce these three style rules:
table.ex1 {width:30em}
table.ex1 th {font-weight:normal;width:35%;text-align:left}
table.ex1 td {font-weight:bold}
That reduces the size and complexity of your HTML considerably. It
also fixes your width problem, at least in Firefox. I haven't tried
it in other browsers.

Not directly related to your question, but: MMDNA Businesses is a
title, in fact the title of the page. Why is it a <div> rather than
<h1>? Similarly, Beauty Salons is evidently the first of three
subjheads. Why is it buried in the table instead of an <h2>?



--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

www.midtownmuseumdistrict.org/Beauty02

is my attempt to align some table information with a corresponding
picture. Before I added the <img...> information, everything lined up
as I wanted, but adding the image changes it all...although there seems
to be enough room where needed.

First of all, I'm assuming you mean that the table for Ide Mania has its
columns divided differently from the columns of the other tables. If that's
not what you mean, then you can stop reading.

That's what I want, yes.

It's not the image you added, or any of your CSS, it's the extra top row
which I presume you added around the same time as the image. It doesn't
have the 35%/65% split width specifications you have in the td's of the
respective first rows of the other tables. Get rid of the first row (you
don't need it anyway, right?) or move (or at least copy) the width specs
from the second to the first row.

Yes, that's it exactly (good catch!). I added the blank table row to
more attractively align the descriptive information with the picture's
size. No, I probably don't _need_ it, but I want others in the
organization to review the placement/alignment to see how they
like/dislike it...
Is there a way to do a "vertical-align" on the table against the
picture? If so, I wouldn't have to mess with blank lines and such...

Turns out your question isn't really related to c.i.w.a.s, but then your
site is underusing CSS, too. Do you really like code like:

div style="text-align: center;"
big><big><big><span style="font-weight: bold;"><u

? Or perhaps you're working through weeding that sort of thing out, for
which I commend you, and wish you success.

That code was generated by HTML-Kit, which is the editor I'm using to
develop the site. Again, after some review by the organization, I'll
want to clean this sort of thing up. 8<}}

One last remark, only very remotely related to your query: A <title> like
"Beauty" won't be too helpful for either visitors or search engine results.
Try to fill it out a bit (e.g. "MMDNA Business Directory: Beauty
Services").

Yes, that was a "leftover" from when I started this page, where the
original intent _was_ to have only "Beauty Shops" listed (one page of
many different types of businesses), but I'm changing it to "Personal
Grooming" because I expect we'll have barber shops, nail salons and
other types of businesses to list.

HTH

It did indeed!

www.midtownmuseumdistrict.org/Beauty02

is my attempt to align some table information with a corresponding
picture. Before I added the <img...> information, everything lined up
as I wanted, but adding the image changes it all...although there seems
to be enough room where needed. I've tried various things to manually
align the table and the image, but doing so forces wrapping in the table
cells (shouldn't be needed, afaics...). No doubt my basic approach is
wrong, but I don't know what to do here. Please advise. TIA

Try narrowing your viewport. You'll see that the table is pushed
below the picture. I don't imagine that's what you want, but I
haven't worked on a solution.

The basic issues, if I am not mistaken, are (a) <td> widths are
*suggestions* to the browser, (b) there's no way to ensure that
columns of different tables have the same widths, (c) you're
specifying width attributes on your <td>s instead of using CSS.

You have an awful lot of stylistic markup -- all those <b> and <big
and <td width=>, for instance.

Yes, that's code generated by HTML-Kit, and I haven't had time to
"CSS-ize" that stuff. I'm still in the early development stage here...
8<}}

I suggest replacing them by CSS. One
solution is to get rid of all that cruft, change the first <td> on
each line to <th>, and introduce these three style rules:
table.ex1 {width:30em}
table.ex1 th {font-weight:normal;width:35%;text-align:left}
table.ex1 td {font-weight:bold}
That reduces the size and complexity of your HTML considerably. It
also fixes your width problem, at least in Firefox. I haven't tried
it in other browsers.

Thanks.

Not directly related to your question, but: MMDNA Businesses is a
title, in fact the title of the page. Why is it a <div> rather than
h1>? Similarly, Beauty Salons is evidently the first of three
subjheads. Why is it buried in the table instead of an <h2>?

Yeah, more development kludges that I'll want to refine later...
<sigh>

On Sun, 26 Jul 2009 15:45:34 -0700, Mike Copeland wrote:

Please don't trim attributions for text you leave in the replies.

[John Hosking wrote in reply when
Mike Copeland wrote...]

www.midtownmuseumdistrict.org/Beauty02

is my attempt to align some table information with a corresponding
picture....

It's not the image you added, or any of your CSS, it's the extra top row
which I presume you added around the same time as the image. It doesn't
have the 35%/65% split width specifications you have in the td's of the
respective first rows of the other tables...

Yes, that's it exactly (good catch!). I added the blank table row to
more attractively align the descriptive information with the picture's
size. ...

Is there a way to do a "vertical-align" on the table against the
picture? If so, I wouldn't have to mess with blank lines and such...

You likely won't consider this a complete solution, but try playing with
this:

<table class="ex1" summary="Beauty Salon2">
<tbody>
<tr>
<th>Name:</th>
<td>Ide Mania</td>
<td rowspan=7 style="vertical-align:middle">
<img src="IMG_0528a.jpg"
alt="Photo: IDE Mania Salon" title="IDE Mania Salon">
</td>
</tr>
<tr><th>Address:</th><td>2501 N Central Ave Phoenix 85004</td></tr>
<tr><th>Phone:</th><td>(602) 265-3880</td></tr>
<tr><th>Nearest Metro Station:</th>
<td>Encanto Blvd/Central Avenue</td></tr>
<tr><th>Contact:</th><td>Ide</td></tr>
<tr><th>E-Mail:</th>
<td>
<a class="mailto" href="mailto:idemania@example">idemania (AT) aol (DOT) com</a>
</td>
</tr>
<tr><th>Web Site:</th>
<td><a href="http://www.idemaniasalonspa.com">Ide Mania Salon</a></td>
</tr>
</tbody>
</table>

with CSS like:

table.ex1 {table-layout:fixed}
img {margin: 0px 20px 0px 60px;}
..ex1 th { text-align:left; font-weight:normal; padding-right:4em; }
..ex1 td { text-align:left; font-weight:bold; padding-right:6em; }

You will find that, for the image in this example and some common viewport
and text sizes, the rows of the table will be higher than those of tables
where no such image (or where the image is smaller) is present. If that
really, really bothers you, you can <whisper> nest the .ex1 text table
inside another one containing the image</whisper>.

Again, not a solution so much as some ideas to start with. Try it out and
see if you can make it work better for you.

...Do you really like code like:

div style="text-align: center;"
big><big><big><span style="font-weight: bold;"><u

?

That code was generated by HTML-Kit, which is the editor I'm using to
develop the site. Again, after some review by the organization, I'll
want to clean this sort of thing up. 8<}}

Don't let the tools (which by definition are supposed to be making your job
easier) make your job harder. FrontPage was a good place for me to start,
but it kept getting in my way, more and more, until I had to jettison it.

HTH

It did indeed!

YVW


--
John

Sun, 26 Jul 2009 15:50:54 -0700 from Mike Copeland <mrc2323 (AT) cox (DOT) net>:

Yeah, more development kludges that I'll want to refine later...

With respect, I think that's a mistake. It is always faster and
easier to do it right(*) from the beginning than to do it wrong first
and change it later.

You mentioned earlier 'code generated by HTML-Kit". I suggest you
stop using it. Fixing the bad code will take longer than it would
have taken to hand code it correctly in the first place.

(*) as well as one knows how

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Sun, 26 Jul 2009 15:50:54 -0700 from Mike Copeland <mrc2323 (AT) cox (DOT) net>:

Is there some reason you quoted my words without attribution? Please
follow Usenet conventions:

http://oakroadsystems.com/genl/unice.htm#attrib

Try narrowing your viewport. You'll see that the table is pushed
below the picture. I don't imagine that's what you want, but I
haven't worked on a solution.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you