loro wrote:
>  Mike Breiding wrote:
>
>>  I have NO experience using tables
>>
>
> Sorry, I never didn't read this since I thought it was a duplicate.
> Either add a 'width' attribute to the table tag. The value can be a
> percentage, like "90%" (of the available width). Or since you already
> have inline CSS there, add for example 'width: 80%' to that.
I used width: 10% and it stead the same as with width: 10px.
But that size is what I wanted.

Thankee.
-mb

Mike Breiding wrote:
>I used width: 10% and it stead the same as with width: 10px.

It won't go smaller than the widest row, the row with the widest
content. Looks like that is "Mo Tu We Th Fr Sa Su" + whatever padding
and cellspacing you may have used. How wide that is depends on the
font size of course, but it's bound to be more than 10 pixels  and
more than10 % of the left column in your layout. Tables are like
rubber-ribbons.

Lotta

Mike Breiding wrote:
> I used width: 10% and it stead the same as with width: 10px.
> But that size is what I wanted.

Sorry, I don't understand that at all. Neither 10 px nor 10 % of
anything will take that table. What I assume you /might/ mean is 100
% of the left column, which looks about a quarter of the whole. If
so a width of 100 % (not 25 % of the whole as the table only sees
its own wrapper) ought to do it, or perhaps better 90 % or less with
centering. As Loro said, this is treated as a minimum width, the
content will push it to whatever it needs.
However in CSS you can override that with {table-layout:fixed;} and
cut off bits of all the cell contents. I doubt this is what you
want.

One more thing. I only took a cursory glance at your code. If you
give the column widths as percentages they have to add up to exactly
100 %, seven times 15 % are 105 %. It is a bit complicated to force
exactly identical widths for all seven columns, in this case I would
not bother.

Axel

Axel Berger wrote:
  > Mike Breiding wrote:
  >
  >> I used width: 10% and it stead the same as with width: 10px.
  >> But that size is what I wanted.
  >>
  > Sorry, I don't understand that at all. Neither 10 px nor 10 % of
  > anything will take that table. What I assume you /might/ mean is 100
  > % of the left column, which looks about a quarter of the whole. If
  > so a width of 100 % (not 25 % of the whole as the table only sees
  > its own wrapper) ought to do it, or perhaps better 90 % or less with
  > centering. As Loro said, this is treated as a minimum width, the
  > content will push it to whatever it needs.
  >
At 90% I get a table which is 320px wide
At 10% I get a table 140px wide
  > However in CSS you can override that with {table-layout:fixed;} and
  > cut off bits of all the cell contents. I doubt this is what you
  > want.
  >
  > One more thing. I only took a cursory glance at your code. If you
  > give the column widths as percentages they have to add up to exactly
  > 100 %, seven times 15 % are 105 %. It is a bit complicated to force
  > exactly identical widths for all seven columns, in this case I would
  > not bother.
Good point. I removed the column widths an the table code is now:
_______
<table summary="June 1977 calendar" style="width:10%; text-align:
center;font: 80% 'Times New Roman',Times,serif; border: 1px solid
#c0c0c0; margin: 10px 0 0 0">
<tbody>
<tr>
<th colspan="7" style="background: lightblue none repeat scroll
0%;padding: 3px 0 3px 0">June   1977</th>
</tr>
<tr>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
<td>Su</td>
__________

The width % still confuses me.

Thanks!
-Mike

Hi Mike,

On 10 Sep 08 11:27 Mike Breiding <mike@...> said:
> The width % still confuses me.

In principle it's fairly simple.  It's the percentage of the
containing block.
Of course that containing block can be variable in size, as it might
relate to a resizable window, or a page element where there is a fixed
width defined.

Greg

Greg Chapman wrote:
  > Hi Mike,
  >
  > On 10 Sep 08 11:27 Mike Breiding <mike@...> said:
  >
  >> The width % still confuses me.
  >>
  > In principle it's fairly simple.  It's the percentage of the
  > containing block.
  > Of course that containing block can be variable in size, as it might
  > relate to a resizable window, or a page element where there is a fixed
  > width defined.
Ah, ha!
So the 10% is the percentage of the menu column where the table resides.

But of course!  Alway obvious after someone points it out...
Thanks,
-Mike

Mike Breiding wrote:
>Ah, ha!
>So the 10% is the percentage of the menu column where the table resides.

More exactly a percentage of the available width as I said before.

Instead of your 10% you can just as well remove the width altogether.
The result is the same. I said tables are like rubber ribbons. They
expand to fir their content. Another way to put it is that the
shrink-wrap. If no width is specified the table will be exactly as
wide as needed to accommodate its content. It won't get smaller than
that (when there's nowhere the lines can wrap). So specifying an
impossibly small width doesn't do anything at all.

Lotta

loro wrote:
> So specifying an impossibly small width doesn't do
> anything at all.

Not quite. I do it with images and captions all the time. Without
width the caption beneath the image will spread out to the full
width available. With a very small width the image puffs the table
up as much as necessary and the caption is wrapped to fit beneath
it. IE 5 has a bug here and tries to make the caption as small as
possible even in a wider cell. So if your images have different
widths you ought to make a sensible guess at an average and target
that at IE only.

N.B: I consider an image and its caption genuine tabular data
belonging together, so this is not the depracated use of tables for
layouts. But that's my opinion, purists may differ.

Axel

loro wrote:
  > Mike Breiding wrote:
  >
  >> Ah, ha!
  >> So the 10% is the percentage of the menu column where the table resides.
  >>
  > More exactly a percentage of the available width as I said before.
  >
  > Instead of your 10% you can just as well remove the width altogether.
  > The result is the same. I said tables are like rubber ribbons. They
  > expand to fir their content. Another way to put it is that the
  > shrink-wrap. If no width is specified the table will be exactly as
  > wide as needed to accommodate its content. It won't get smaller than
  > that (when there's nowhere the lines can wrap). So specifying an
  > impossibly small width doesn't do anything at all.

Right you are! It takes me a while...
But, I finally see what you mean.
The table resizes to fit the content.
Where I was having problem was width the specifies width of the <td> for
the days of the week.
Thanks to Axel for pointing out that.
Once I got rid of that then it shrunk to fit - as you said.

Thanks. I learned a bit about those cussed tables.

-Mike

Mike Breiding wrote:
>Right you are! It takes me a while...
>But, I finally see what you mean.
>The table resizes to fit the content.

Yes. It's the opposite to a DIV and other "normal" block level
elements in that respect. A DIV (that's not positioned absolute or
floated) always spans all available width if it doesn't have an
explicit width. So giving a DIV width="100%" is as unnecessary as
trying to specify the smallest possible width for a table.

>Where I was having problem was width the specifies width of the <td> for
>the days of the week.
>Thanks to Axel for pointing out that.
>Once I got rid of that then it shrunk to fit - as you said.

Did work with them in too, at least in IE and FF, even if they didn't
add up. Using a width for TD can be useful if the content of the
cells have different widths, but you want all rows to have the same width.

Lotta

Axel Berger wrote:
>loro wrote:
> > So specifying an impossibly small width doesn't do
> > anything at all.
>
>Not quite. I do it with images and captions all the time. Without
>width the caption beneath the image will spread out to the full
>width available.

Not if it is a TABLE, which is what we were talking about.

Lotta

loro wrote:
> Not if it is a TABLE, which is what we were talking about.

Especially when it's a table. This is a typical example:

<TABLE  WIDTH="100">
<TR><TD>
<IMG SRC="some.png" BORDER="0"
TITLE="" ALT="Image">
</TD></TR><TR><TD>
This is a caption. I make it long with unnecessary and superfluous
blurb, so that, without wrapping, it would get much wider than the
image is.
</TD></TR></TABLE>

100 px is smaller than the width of the smallest image I tend to
use. Without the WIDTH attribute that table will be pulled as wide
as the wrapper allows it, with it it will be limited to the width of
the image. This gets especially important if I flow text around it.

Axel

Axel Berger wrote:
>loro wrote:
> > Not if it is a TABLE, which is what we were talking about.
>
>Especially when it's a table. This is a typical example:
>
><TABLE  WIDTH="100">
><TR><TD>
><IMG SRC="some.png" BORDER="0"
>TITLE="" ALT="Image">
></TD></TR><TR><TD>
>This is a caption. I make it long with unnecessary and superfluous
>blurb, so that, without wrapping, it would get much wider than the
>image is.
></TD></TR></TABLE>
>
>100 px is smaller than the width of the smallest image I tend to
>use. Without the WIDTH attribute that table will be pulled as wide
>as the wrapper allows it, with it it will be limited to the width of
>the image. This gets especially important if I flow text around it.

You didn't read my whole post, I think. Here are the sentence you
quote and the one before it with emphasis added

>>>It won't get smaller than  that ***(when there's nowhere the lines
>>>can wrap)***. So specifying an impossibly small width doesn't do
>>>anything at all.

There's no text in Mike's table that can wrap. Mike's table is what
we are dealing with, or so I thought.

Lotta

loro wrote:
> Mike's table is what we are dealing with, or so I thought.

Yes of course. I took yours as a more general statement.

Axel

Axel Berger wrote:
>Yes of course. I took yours as a more general statement.

Sure, it was. With that reservation. :-P

Have you guys tried a Czech  beer called Primátor? It's very good!

Cheers!
Lotta

Here's a thing I'm not sure it's even possible, but I would like to find
out:

Is there a way to display only *part* of an image file in a Web page?
For instance, if I have a 300 x 400 px photo, can I "crop" it in
HTML/CSS in order to display just a smaller rectangle inside it (like
one cropping 50 px from the top and left, and 100 px wide?)

Marcelo

-=-=-
Where do you want to bug today?
* TagZilla 0.066 on Seamonkey 1.1.11

Marcelo de Castro Bastos wrote:
> can I "crop" it in HTML/CSS in order to display just a smaller
> rectangle inside it

I'm not more than 98 % sure, but as far as I know it isn't.
But if it were possible you shouldn't do it. The whole image needs
to be downloaded anyway. This would be similar do scaling down in
HTML - I've seen 100 by 50 thumbnails that take ages to display.
If you can't crop the image beforehand for some technical reason you
haven't divulged, then the cropping ought to be done on the server.
I'd expect it to be possible in PHP, though admittedly I haven't
looked.

Axel

Why not use a free graphics application "GIMP" to just crop out the part you
wish to use?



http://www.gimp.org/



this application is totally free and would be, as I am told by many that I
know who use it, quite comparable to PhotoShop.. I've not tested the
differences as I know what I need to know in PhotoShop and don't wish to
deal with the learning curve with GIMP but it is very very similar and again
might I stress FREE.



From: ntb-html@yahoogroups.com [mailto:ntb-html@yahoogroups.com] On Behalf
Of Marcelo de Castro Bastos
Sent: Sunday, September 14, 2008 12:28 PM
To: ntb-html@yahoogroups.com
Subject: [NH] Display only part of an image?



Here's a thing I'm not sure it's even possible, but I would like to find
out:

Is there a way to display only *part* of an image file in a Web page?
For instance, if I have a 300 x 400 px photo, can I "crop" it in
HTML/CSS in order to display just a smaller rectangle inside it (like
one cropping 50 px from the top and left, and 100 px wide?)

Marcelo

-=-=-
Where do you want to bug today?
* TagZilla 0.066 on Seamonkey 1.1.11





[Non-text portions of this message have been removed]

seems to me it could be done by image mapping, or cropping and
assembling the image within a table, I do this with plat maps on one of
my genealogy sites. each cropped section is it's own jpg, and they abut
each other to make a larger image.

Jeff

Axel Berger wrote:
>
> Marcelo de Castro Bastos wrote:
> > can I "crop" it in HTML/CSS in order to display just a smaller
> > rectangle inside it
>
> I'm not more than 98 % sure, but as far as I know it isn't.
> But if it were possible you shouldn't do it. The whole image needs
> to be downloaded anyway. This would be similar do scaling down in
> HTML - I've seen 100 by 50 thumbnails that take ages to display.
> If you can't crop the image beforehand for some technical reason you
> haven't divulged, then the cropping ought to be done on the server.
> I'd expect it to be possible in PHP, though admittedly I haven't
> looked.
>
> Axel
>
>

--

Jeffery G. Scism, IBSSG



"In the next place, the state governments are, by the very theory
of the constitution, essential constituent parts of the general
government. They can exist without the latter, but the latter
cannot exist without them."

-- Joseph Story (Commentaries on the Constitution, 1833)

Reference: Story, Commentaries on the Constitution, 191.

I use iframes to do something like this.  An example can be seen at
http://www.frontiernet.net/~jzeman/vtour/0306-map.html where I only
show part of the map of the day's route.  You can format the iframe as
you wish in CSS.

John


--- In ntb-html@yahoogroups.com, Marcelo de Castro Bastos
<mcblista@...> wrote:
>
> Here's a thing I'm not sure it's even possible, but I would like to
find
> out:
>
> Is there a way to display only *part* of an image file in a Web page?
> For instance, if I have a 300 x 400 px photo, can I "crop" it in
> HTML/CSS in order to display just a smaller rectangle inside it (like
> one cropping 50 px from the top and left, and 100 px wide?)
>
> Marcelo

A couple other ways to do this are to use the image as the postioned
background of a smaller div or to clip the image using CSS.

Here's some code which clips a 354px wide and 500px tall image to 166px wide
and 212px tall. It takes 25px off the top and 64px off the left side.

64+166=230
25+212=237

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.photo {
  position: relative;
  width: 166px; /* image's containing div has the same width and height of
image when it's clipped */
  height: 212px;
}
.photo img {
  position: absolute;
  top:-25px;
  left:-64px;
  clip: rect(25px,230px,237px,64px); /* not recognized by IE 7 or older */
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.photo img{
  clip: rect(25px 230px 237px 64px);
}
</style>
<![endif]-->
</head>
<body>
<div class="photo"><img src="image.jpg" alt="" width="354"
height="500"></div>
</body>
</html>



----- Original Message -----
From: "Marcelo de Castro Bastos"
Sent: Sunday, September 14, 2008 10:27 AM
Subject: [NH] Display only part of an image?


> Is there a way to display only *part* of an image file in a Web page?
> For instance, if I have a 300 x 400 px photo, can I "crop" it in
> HTML/CSS in order to display just a smaller rectangle inside it (like
> one cropping 50 px from the top and left, and 100 px wide?)
>
> Marcelo

Interviewed by CNN on 14/9/2008 15:16, Axel Berger told the world:
> Marcelo de Castro Bastos wrote:
>
>> can I "crop" it in HTML/CSS in order to display just a smaller
>> rectangle inside it
>>
>
> I'm not more than 98 % sure, but as far as I know it isn't.
> But if it were possible you shouldn't do it. The whole image needs
> to be downloaded anyway. This would be similar do scaling down in
> HTML - I've seen 100 by 50 thumbnails that take ages to display.
>
I fully understand the issue, and it was more of an intellectual
curiosity... it's not actually for a production site, I was just
wondering if I could pull it off without firing up an image editor.

In this particular case, the whole image would have to be loaded anyway
-- it is a comic-book-like page, and I wanted to "move around" the
individual panels to add text comments besides each one. From the way I
understand web browsers work, they wouldn't download the image 6 times.
And this way, there would be the extra bonus of preserving the full
image (avoiding the need for a separate download to get the full picture).

I'll have to look into John Zeman's iframe solution and Cary Driscoll's
CSS solution to see if they are applicable to this particular situation.

The idea occurred to me after I recently read the specs for the
"border-image" CSS3 feature -- it works by taking parts of a image file
to draw borders. I thought that there might be a more general way to use
partial images, and wanted to try to figure it out...

Marcelo

-=-=-
Now...witness the power of this *FULLY ARMED AND OPERATIONAL* Tagline!
* TagZilla 0.066 on Seamonkey 1.1.11

Cary Driscoll wrote:
> to use the image as the postioned
> background of a smaller div or to clip the image using CSS.

Yes, but: Backgrounds are a pain in the proverbial and only serve to
make text nearly illegible more often than not. That's why many
people, me included, turn them off. Background is background and
content is content. Don't confuse one with the other and don't hide
the latter in the invisible first.
(N.B: As background is superfluous and purely decorous and does not
add to the content, there is not ALT element provided. It is
nonexistent for blind users and it is also not printed in the
default setup of all current browsers.)

Axel

P.S: Yes, I am an old killjoy pouring cold water on lots of very
clever ideas and promoting only bland and boring pages, none blander
and more boring (except for content, or so I hope) than my own. Feel
free to ignore my advice, but please at least be aware of the
possible drawbacks and pitfalls.

Hi Axel,

On 14 Sep 08 23:44 Axel Berger <Axel-Berger@...> said:
> I am an old killjoy pouring cold water on lots of very
> clever ideas and promoting only bland and boring pages, none blander
> and more boring (except for content, or so I hope) than my own. Feel
> free to ignore my advice, but please at least be aware of the
> possible drawbacks and pitfalls.

For once, I'm with you 100%. These silly visual tricks lock out so
many people from receiving the content as intended, it simply is not
worth it except to show off the trickery skills of the programmer.
Most "Look how clever I am" sites are a pain in the eye, butt, and
everywhere in between!

Greg

Marcelo de Castro Bastos wrote:
>Here's a thing I'm not sure it's even possible, but I would like to find
>out:
>
>Is there a way to display only *part* of an image file in a Web page?
>For instance, if I have a 300 x 400 px photo, can I "crop" it in
>HTML/CSS in order to display just a smaller rectangle inside it (like

Sure. With a clip everything is possible!

There actually is  a CSS property called 'clip'. :-)
http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

This is very confusing property. Mostly so because they changed just
about everything about it in CSS 2.1 to reflect actual browser
support. In CSS 2 (
http://www.w3.org/TR/CSS2/visufx.html#propdef-clip ) it says it
applies to "block-level and replaced elements" with "a
<http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow>'overflow'
property with a value other than 'visible'." In CSS2.1 it says
"Applies to: absolutely positioned elements" and not a word about
'overflow' I hate when they do that.

Anyway, as described in the CSS 2.1 spec is how it actually works in
browsers. Note that the size of the box doesn't shrink when clipped,
rather it gets padded around a peephole where you see the content.

I recall IE has a nasty bug with this (don't know about IE7). When in
Standards Mode it doesn't accept a comma separated list for the rect values.

Lotta

Marcelo de Castro Bastos wrote:
>In this particular case, the whole image would have to be loaded anyway
>-- it is a comic-book-like page, and I wanted to "move around" the
>individual panels to add text comments besides each one. From the way I
>understand web browsers work, they wouldn't download the image 6 times.
>And this way, there would be the extra bonus of preserving the full
>image (avoiding the need for a separate download to get the full picture).

I don't follow exactly what you want to do, but 'clip' can be
suitable for a certain type of thumbnails. Not for the case where
there are hundreds of them as mentioned, but when you have just a few
images and want thumbs for a better overview and a nicer display. You
can clip the images and "undo" the clipping on hover, so the hovered
image will "expand" and sort of pop.

Lotta

Marcelo
I don't understand why you can't just use a graphics program such as Irfanview
to either crop or resize the image. It is so much simpler to do that than any
of the "solutions" using html or CSS or clips.  You can do a very precise crop
and//or resize in a minute to make a graphic fit a particular space.
I have some boxes that are 180 px wide and 114 px high and I can crop and
resize to that exact size (or very close) using Irfanview. Again, I don't
understand
why you want to do it some other way. There are a number of programs that will
do this; Irfanview is excellent and free.
 
Bruce Meyers

--- On Sun, 9/14/08, Marcelo de Castro Bastos <mcblista@...> wrote:

From: Marcelo de Castro Bastos <mcblista@...>
Subject: [NH] Display only part of an image?
To: ntb-html@yahoogroups.com
Date: Sunday, September 14, 2008, 12:27 PM






Here's a thing I'm not sure it's even possible, but I would like to find
out:

Is there a way to display only *part* of an image file in a Web page?
For instance, if I have a 300 x 400 px photo, can I "crop" it in
HTML/CSS in order to display just a smaller rectangle inside it (like
one cropping 50 px from the top and left, and 100 px wide?)

Marcelo

-=-=-
Where do you want to bug today?
* TagZilla 0.066 on Seamonkey 1.1.11


















[Non-text portions of this message have been removed]

Interviewed by CNN on 15/9/2008 12:00, Bruce Meyers told the world:
> Marcelo
> I don't understand why you can't just use a graphics program such as Irfanview
> to either crop or resize the image. It is so much simpler to do that than any
> of the "solutions" using html or CSS or clips.  You can do a very precise crop
> and//or resize in a minute to make a graphic fit a particular space.
> I have some boxes that are 180 px wide and 114 px high and I can crop and
> resize to that exact size (or very close) using Irfanview. Again, I don't
understand
> why you want to do it some other way. There are a number of programs that will
> do this; Irfanview is excellent and free.
>
>
I *can* do it, I *know* how to do it, I *have* the software to do it.
I'm trying to learn a new trick here. And I did.

Thank all the people who helped.

Marcelo


-=-=-
Resistance Is Useless!   (If < 1 ohm)
* TagZilla 0.066 on Seamonkey 1.1.11

On 15 Sep 08 16:00 Bruce Meyers <oldguy1166@...> said:
> I can crop and resize to that exact size (or very close) using
> Irfanview.

Or very close?  "exact size" is the correct answer. :-)

1. Drag over image to approximate size. (Title bar shows top/left
bottom/right co-ordinates)
2. Further refine selection area by zooming, then dragging edges of
selection and/or right-dragging selection to move it.
3. If still not confident, make pixel by pixel adjustments through the
Edit menu select "Create custom crop selection..." option. The
dialogue picks up the coordinates of any existing selection. Just edit
entries in dialogue to the exact locations required.
4. Edit menu > crop selection.

Greg

How do I strip the "class" contents of any and all tags, as below:

change this:

<td class="[whatever]">[whatever]</td>

to this:

<td>[whatever]</td>

Don Strack