Table cell alignment

[Eustace]

While moving my old webpages from Geocities that is closing down, I am
updating and correcting the code I had written 10 years ago. The problem
is at the bottom table of

https://files.nyu.edu/emf202/public/itaintmebabe/cartoons.html

I do not understand why the "Home" and the "Next" icons are not at the
far left and at the far right, but instead are at the middle of the
cells. The code, for example, of the left cell is
<td style="text-align: left; width: 33%;">...

Also, is there a way to have the 2 W3C validation images side by side
instead of 1 on top of the other?

Thanks,

emf

 

[Doug Miller]

While moving my old webpages from Geocities that is closing down, I am
updating and correcting the code I had written 10 years ago. The problem
is at the bottom table of

https://files.nyu.edu/emf202/public/itaintmebabe/cartoons.html

I do not understand why the "Home" and the "Next" icons are not at the
far left and at the far right, but instead are at the middle of the
cells. The code, for example, of the left cell is
<td style="text-align: left; width: 33%;">...

The text-align attribute has no effect on the alignment of images...

Also, is there a way to have the 2 W3C validation images side by side
instead of 1 on top of the other?

Add display:inline; to the styles on the images.

 

[Eustace]

While moving my old webpages from Geocities that is closing down, I am
updating and correcting the code I had written 10 years ago. The problem
is at the bottom table of

https://files.nyu.edu/emf202/public/itaintmebabe/cartoons.html

I do not understand why the "Home" and the "Next" icons are not at the
far left and at the far right, but instead are at the middle of the
cells. The code, for example, of the left cell is
<td style="text-align: left; width: 33%;">...

Also, is there a way to have the 2 W3C validation images side by side
instead of 1 on top of the other?

Thanks,

emf

Oops, I was too fast to post. I found the reason to the first question:
I had to correct the styles margin-right and margin-left that I had
specified in the head.

I also corrected the second problem by dividing the cell into 2. But
still, is there a way to do it without dividing it?

emf

 

[Jonathan N. Little]

The text-align attribute has no effect on the alignment of images...

That is not true, images are by default *inline* and text-align would
normally apply, the problem is the style rule he has that makes images
display block

img {
display: block;
margin-left: auto;
margin-right: auto;
border: 2px solid;
}


To OP, you could solve some of your trouble and confusion by removing
*all* your inline styling, i.e., all those style attributes on your
elements, by apply your styling from the stylesheet.

 

[Jonathan N. Little]

Oops, I was too fast to post. I found the reason to the first question:
I had to correct the styles margin-right and margin-left that I had
specified in the head.

As I posted elsewhere in thread that, problems arise and are difficult
to debug with inline styling. The first step to a fix is to remove the
inline style and use a stylesheet.

I also corrected the second problem by dividing the cell into 2. But
still, is there a way to do it without dividing it?

Also explained in my other post. Remove the global rule you have to make
images display as block.

 

[Eustace]

The text-align attribute has no effect on the alignment of images...


Add display:inline; to the styles on the images.

That did it. Certainly the css img rules at the header were very useful
for all the other images in the webpage. I now realize that according to
the spirit of programming more correct is to specify a class img.cartoon
{ } (rather than img { }) that would be applied only to the cartoon
images. That's a small intellectual breakthrough for me!... It will take
a little more code on each cartoon, but not too much.

Thanks,

emf

 

[dorayme]

I now realize that according to
the spirit of programming more correct is to specify a class img.cartoon
{ } (rather than img { }) that would be applied only to the cartoon
images. That's a small intellectual breakthrough for me!... It will take
a little more code on each cartoon, but not too much.

No more need to invoke programming spirit for HTML/CSS than to bring the
Holy Ghost into it.

If all your images get the border etc, no need to go about classing each
such image. What you might find helpful to do from time to time is look
at the context of images. For example, a certain sort of image might be
in some element that is classed already for other reasons. If the images
in those so classed elements are the only ones in there and you want to
style them a certain way, you can:

p img {...}

or if all the images in a big wrapper div class="comic_box", you simply
can:

..comic_box img {...}

I notice you are wrapping each cartoon in its own paragraph element. I
suppose? But is it really a paragraph? Perhaps more economical, assuming
a wrapper element (div class="content") in case CSS is off, is to just
leave the images bare between the paragraphs. You have already styled
them display: block and centred them using auto margins.

Or even put them in the paragraphs that hold the text - and then add a
top margin to them in the CSS:

img {... display: block; margin: .5em auto auto auto; ...}

This is simplifying and what's more semantically better in that the

Don't do that blinking text, it's awful! <g>

 

[Eustace]

No more need to invoke programming spirit for HTML/CSS than to bring the
Holy Ghost into it.

If all your images get the border etc, no need to go about classing each
such image. What you might find helpful to do from time to time is look
at the context of images. For example, a certain sort of image might be
in some element that is classed already for other reasons. If the images
in those so classed elements are the only ones in there and you want to
style them a certain way, you can:

p img {...}

or if all the images in a big wrapper div class="comic_box", you simply
can:

.comic_box img {...}

I notice you are wrapping each cartoon in its own paragraph element. I
suppose? But is it really a paragraph? Perhaps more economical, assuming
a wrapper element (div class="content") in case CSS is off, is to just
leave the images bare between the paragraphs. You have already styled
them display: block and centred them using auto margins.

At one point I thought it was more correct wrap the images in
paragraphs. I got the unwrapped from paragraphs and I added a "div
class="cartoons" which wraps the main part of the webpage. I also
applied the same method to 2 more pages. In the first

https://files.nyu.edu/emf202/public/fril/limericks.html

instead of images there are tables. In the second:

https://files.nyu.edu/emf202/public/temp/polytima.html

there are tables inside tables.

Thanks,

emf

 

[dorayme]

At one point I thought it was more correct wrap the images in
paragraphs.

Never quite seen it this way myself - as long as the images are not
children of body (inline elements, character data, images not being
allowed to be loose under 4.01 Strict). Wrap for meaning and
convenience.

 

[Travis Newbury]

Also, is there a way to have the 2 W3C validation images side by side
instead of 1 on top of the other?

You really have a hard-on for those images don't you.