[REBOL] Re: Hel with html table and proportional display ...
From: alekk:o2:pl at: 4-Apr-2006 17:37
----- Original Message -----
From: "Petr Krenzelok" <petr.krenzelok-trz.cz>
To: <rebolist-rebol.com>
Sent: Tuesday, April 04, 2006 5:08 PM
Subject: [REBOL] Re: Hel with html table and proportional display ...
> Aleksander K. wrote:
> >> So I thought of producing simple html table,
> >> inserting images and comments there.
> >>
> >
> > This link may be interesting for You.
> > Printing a Book with CSS: Boom!
> > http://www.alistapart.com/articles/boom/
> >
> >
> >> Why browser does not stretch images itself? Is there any kind of fit or
> >> aspect for table cells? Anyone? :-)
> >>
> >
> > Well - You can set size of image with width= and height= in img tag (or
in
> > css).
> > They should look better in print also.
> >
> > Width of 760 px fits good on printed page - so You can place an image
with
> > width:
> > <img width="760" src="...">
> >
> > Regards,
> > Aleksander Kielbratowski
> >
> >
> >
> Thanks a lot,
>
> I am now trying with something like:
>
> <table style="text-align: left; width: 810px;" border="0"
> cellpadding="2" cellspacing="2" align="center">
> <tbody>
> <tr>
> <td style="vertical-align: top;"><img style="width: 800px; height:
> 600px;" alt="pokus" src="IMG_1328.JPG"></td>
> </tr>
> <tr>
> <td style="vertical-align: top; ">Description - image no 1 -
> blablablabla balalbabalb lablablalbal<br>
> </td>
> </tr>
>
> So some in-line styling, but I somehow don't know, what tag allows what
> styling - just tried to set:
>
> <td style="vertical-align: top; margin-top: 20px; ">Description -
> image no 1 - blablablabla balalbabalb lablablalbal<br>
>
You are in table - use padding (padding-top etc.) instead of margin. Rest
should working normal.
Second - use classes instead of inline style - so <td class="image" / <td
class="description" etc.
and one styles definition between <head> tag.
BTW - as You have image/text/image/text consider using div's instead of
table.
<html>
<head>
<style type="text/css">
<!--
.entry {
width: 800px;
margin: 10px auto;
}
.photo img {
width: 800px;
height: 600px;
}
.text {
margin-top: 20px;
font-family: georgia, serif;
}
-->
</style>
</head>
<body>
<div class="entry">
<div class="photo"><img src="bla.jpg"/></div>
<div class="text">Description</div>
</div>
</body>
Aleksander K.
