[thelist] Images in liquid design

[aardvark]

> From: Gregory Wostrel <gwostrel at mac.com>
>
> aardvark,
>
> Great article on liquid design, I appreciate you adding the link.

thanks...

> I have a few questions:
> In the body of the article you have the darker green areas with
> reverse text in them for the figures that is clearly produced with CSS
> (although I can't view the style sheet I can see that you have
> "class="side" "). But how do the images hang so nicely out of the
> "side" div? I read the explanation in the messages but I don't get the
> "Because the image extends beyond the <p>, it extends beyond the color
> block." comment. How does it extend beyond the <p> when it is clearly
> inside <p></p>? I hope I am not being dense here.

the images have an align="right|left" on them... the text will wrap
around them, and because of the align attribute, they can extend
across block-level elements (like <p>s)... does that help?

you can view the CSS for the site at:
http://evolt.org/evolt/style/isaac.css

there's a <base href> in there that usually throws people when they
go looking for the CSS...

> Next, the page is not all that liquid. In NN7, IE for OSX and IE5 OS9
> the page scales down to about 1024x768 and then only the header scales
> below that. Why is that?

because of the CSS used to make those keen pull-quotes you just
asked about... while it's valid, it's known to be buggy here and
there... as for browsers that handle the CSS properly, the image in
figure 6 is wide, so it holds the page open more than it would
otherwise...

> Finally, and this may reveal me to be unsophisticated, how do you do
> the favicon.ico thing in the browser URL area? I downloaded it and can
> see how it it linked an all, but how would I make one? .ico isn't a
> file that Photoshop makes (is it?). I was only able to view it in
> Preview (which is a real swiss army knife!) on OSX. I would love to
> know how that is done.

ultimately, if you have a a file called favicon.ico in the root of your
site, IE will grab it...

there are a few ways to make an icon file...

one quick way is to make a 16x16 bitmap (.bmp) and change its
extension to .ico...

another way is to grab an icon making utility...

and isaac has written a tuturial on favicons at:
	An easy addition for any site: favicon.ico
	http://evolt.org/favicon

failing all that, go here: http://favicon.com/



--
Read the evolt.org case study
Usability: The Site Speaks for Itself
http://amazon.com/exec/obidos/ASIN/1904151035/evoltorg02-20
ISBN: 1904151035