|
|
Posted by dalyea@gmail.com on 11/14/07 06:16
On Nov 13, 4:16 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1194991670.527924.282...@k35g2000prh.googlegroups.com>,
>
>
>
> "dal...@gmail.com" <dal...@gmail.com> wrote:
> > I have the following code which is supposed to show, in 4 columns, the
> > price,
> > web site, image + product name, and date. The 3rd column uses div
> > tags so
> > that I canalignthings correctly. The li1 tag is supposed toalign
> > the image inside
> > it vertically inside a 64x64 px container. When an image is less than
> > 64px in
> > height, though, it aligns to the top of container. I figured out how
> > to use the p
> > tag in li2 to verticallyalignthe text, but this technique doesn't
> > work for the image
> > in li1.
>
> > Anyone know how toalignthe image vertically in the middle of the div
> > container?
>
> > Thanks! Code as follows:
>
> > <table class=tbl00>
> > <tr>
> > <td class=mt>$5.95</td>
> > <td class=lt>Bike Shop</td>
> > <td class=lt>
> > <div class=li1><a href="xxx"><img src="http://www.aebike.com/images/
> > library/catalogs/soc/p350X350m/HT3200.jpg" width=64 height=18 border=1
>
> I snip rest and styles...
>
>
>
> I suggest you get rid of *all* your styles (there are many faults
> with it), all your classes bar one, all your divs, all your <p>s.
> Why would you not prefer something so much simpler along the
> lines of:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>...</title>
> <style type="text/css">
> table{border-collapse: collapse;}
> td {border:2px solid #000; padding: .4em;}
> .picItemCell {text-align: center;}
> </style>
> </head>
> <body>
> <table cellspacing="0" summary="bike items and prices etc...">
> <tr>
> <td>$5.95</td>
> <td>Bike Shop</td>
> <td class="picItemCell">
> <a href="xxx"><img
> src="http://www.aebike.com/images/library/catalogs/soc/p350X350m/H
> T3200.jpg" width="64" height="18" alt=""></a><a
> href="xxx"><br>Ritchey True grip
> black (HT3200)</a></td>
> <td>11/12/07</td></tr>
> </table>
> </body>
> </html>
>
> ?
>
> --
> dorayme
Thanks for the reply. The table option is certainly one I considered
and actually
have been using for the longest time. But I have 2,000+ such item
files that take
up 78M of disk space, and I am trying to cut down not only disk space
usage
but also speed up delivery of my pages. By using the div tags alone
instead of
tables, I cut my page size total down to 67M for the 2,000+ files.
But that aside, the point of my post was missed in your response, and
that is
that I wish to display every row in the table at exactly 64px in
height, and that
the images in the table will not always be 64px or greater in size.
(I have written
the code obviously to do the simple math scaling to keep image
proportional and
at or under 64px in size.) If an image is 47px x 30px, then that
image will rest
at the top of the li1 div container, and I want it to be vertically
centered in the middle
of the div container (hence the subject line of my post). I guess the
part I left out
is that the image sizes vary widely and that this is not a 1 row
table.
If I can't figure this out with CSS (which would be sad - admitting
defeat!) then, yes,
I will use the table approach - tried and true, works in every
browser. Was just hoping
to accomplish this with (apparently bad?!) CSS as I wrote (why is my
CSS so wrong?).
Thanks again for your response and your code suggestion, much
appreciated.
David
[Back to original message]
|