Fastening a text box to bottom of window ~ CSS or Javascript

If you look at this site (and don’t get hungry now!)

…left hand side Tempting deals, you can see the caption text “A breakfast roll and freshly ground coffee for only £1.99!” in a transparent box (rgba colour)

This floating caption technique is getting quite popular, but how it is done? If you grow the text the box it expand upwards so they appear to have fastened the bottom of the caption box to the bottom of the picture? Are we talking javascript or CSS here?

any one else puzzled how - I’m certainly missing a trick here and would like to know how?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Feb 22, 2010, at 12:16 PM, David Owen wrote:

If you grow the text the box it expand upwards so they appear to
have fastened the bottom of the caption box to the bottom of the
picture? Are we talking javascript or CSS here?

I took a very quick look so I may be wrong but it appears to be CSS
only. That div is positioned absolutely with a “bottom” value of “0”.
If this is being done with js I’m not seeing it.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Todd,

Doh, Yes you’re right , and I me thinking its something clever going on. Here’s a Freeway demo I knocked up.

http://www.printlineadvertising.co.uk/demo/freeway/caption-footer/

This is a technique I’ve never used in Freeway, it will be very useful. I’m sure others might want to know how its done ~ there’s a file to download.

David

On 22 Feb 2010, at 20:03, Todd wrote:

On Feb 22, 2010, at 12:16 PM, David Owen wrote:

If you grow the text the box it expand upwards so they appear to have fastened the bottom of the caption box to the bottom of the picture? Are we talking javascript or CSS here?

I took a very quick look so I may be wrong but it appears to be CSS only. That div is positioned absolutely with a “bottom” value of “0”. If this is being done with js I’m not seeing it.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, I’ve been trying to do that, but now I’ve got another question: now that I’ve downloaded your demo, how have you managed to get the translucent fill, 'cos I can’t see how you’ve done it?!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Look in Item>Extended

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh! okay I’m now moving into an area that I’ve never heard of and know nothing about - a little research is required I think.

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can add Extended CSS attributes to all the items on your pages which can style specific things differently to their normally styled state.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is there a simple explanation as to why?

I mean, why is not possible to do something like that with the colours palette and opacity without having to learn to ‘code’ or understand tags etc. I’m not averse to having to learn it, I just wondered why it’s done that way.

Neil


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Freeway’s interface design is optimized for the types of tags and
properties that are understood by a wide swath of browsers. IE (for
the longest time) has held everyone else in the world hostage.
Thankfully IE8 supports a wider range of properties, and is rapidly
eating market share from IE6 and 7. That and Gecko- and WebKit-based
browsers are rapidly gaining global share (which is a big win for
standards-based design).

I would imagine that Softpress are watching the statistics, as IE6 has
fallen below 10% share for the first time in nearly forever, and will
enable more goodies in the native interface as time goes on.

But the real answer why you should want to learn to code is that like
any good craftsman, you will eventually want to know more about your
materials and what they are capable of. Just as you would not thread a
machine screw into a piece of soft pine and expect it to carry a load,
or use a staple to put two iron girders together, there are aspects of
Web construction that you need to understand if you’re ever going to
do more than point and click.

Walter

On Feb 23, 2010, at 11:33 AM, neil.west1 wrote:

Is there a simple explanation as to why?

I mean, why is not possible to do something like that with the
colours palette and opacity without having to learn to ‘code’ or
understand tags etc. I’m not averse to having to learn it, I just
wondered why it’s done that way.

Neil


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Feb 23, 2010, at 2:58 AM, David Owen wrote:

This is a technique I’ve never used in Freeway, it will be very
useful. I’m sure others might want to know how its done ~ there’s a
file to download.

Glad to help David. Don’t forget to cover your bases with regard to
rgba browser support; not a lot of it yet. Specify a solid fallback
color or use an IE filter hack (far from ideal but it works). A lot of
online explanations/examples around.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Neil,
What I love about this community is the breadth of ways to achieve the
same sort of result.

Rather than define the caption background fill as an RGBA (Red, Green,
Blue, Alpha) color I would have scurried off to Photoshop and made a
semi-transparent white pixel image and saved this as a 24-bit PNG.
This can then be applied to the caption background in Freeway (like
any other HTML object).

For example;
http://www.freewayactions.com/test/caption-test/

Pros:

  • The desired effect can be seen in Freeway’s design view without
    needing to preview the page
  • No need to use RGBA colors

Cons:

  • You’ll need to make a background graphic every time you want to
    change the color or opacity
  • Older versions of Internet Explorer won’t see the transparency in
    the image

Regards,
Tim.

On 23 Feb 2010, at 16:33, neil.west1 wrote:

Is there a simple explanation as to why?

I mean, why is not possible to do something like that with the
colours palette and opacity without having to learn to ‘code’ or
understand tags etc. I’m not averse to having to learn it, I just
wondered why it’s done that way.

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think
IE8 properly handles semi-transparent PNG when it’s used as a
background image, although I’d love to be wrong about that.

Walter

On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:

  • Older versions of Internet Explorer won’t see the transparency in
    the image

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tim,

Yep, that the way I would normally have done for Freeway using a transparent png, but in this case followed what was done in the example Greggs site. If were following latest design trends I suppose we need to reduce images and create clean markup.

Just a note to others; its good to store examples like these to look back upon. That future project could just depend on you playing around with different methods of site building so you have a broader depth of skills to solve a particular problem.

Anyone please chip in with stuff you might think others would benefit from.

David

On 23 Feb 2010, at 17:45, Tim Plumb wrote:

Rather than define the caption background fill as an RGBA (Red, Green, Blue, Alpha) color I would have scurried off to Photoshop and made a semi-transparent white pixel image and saved this as a 24-bit PNG.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Microsoft finally got this fixed in IE 7 as you can see here from that
sample file I put together;
http://ipinfo.info/netrenderer/index.php?browser=ie7&url=http://www.freewayactions.com/test/caption-test/

IE 6 and below are still, very much broken without hacks, however.
Regards,
Tim.

On 23 Feb 2010, at 18:10, Walter Lee Davis wrote:

Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think
IE8 properly handles semi-transparent PNG when it’s used as a
background image, although I’d love to be wrong about that.

Walter

On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:

  • Older versions of Internet Explorer won’t see the transparency in
    the image

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ooh! Fun. Switch it to IE 5.5 and tell me what that error message says
(if you speak German).

Thanks for clearing that up for me, Tim, I was laboring under old
information.

Walter

On Feb 23, 2010, at 1:25 PM, Tim Plumb wrote:

Microsoft finally got this fixed in IE 7 as you can see here from
that sample file I put together;
Moved

IE 6 and below are still, very much broken without hacks, however.
Regards,
Tim.

On 23 Feb 2010, at 18:10, Walter Lee Davis wrote:

Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think
IE8 properly handles semi-transparent PNG when it’s used as a
background image, although I’d love to be wrong about that.

Walter

On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:

  • Older versions of Internet Explorer won’t see the transparency
    in the image

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s also the graphic effects option in Freeway. Just select the HTML item, go to the Effects section of the Inspector and click the Background icon. You can then choose the color you want to use, and change the opacity too!

Joe

On 23 Feb 2010, at 18:25, Tim Plumb wrote:

Microsoft finally got this fixed in IE 7 as you can see here from that sample file I put together;
Moved

IE 6 and below are still, very much broken without hacks, however.
Regards,
Tim.

On 23 Feb 2010, at 18:10, Walter Lee Davis wrote:

Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think IE8 properly handles semi-transparent PNG when it’s used as a background image, although I’d love to be wrong about that.

Walter

On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:

  • Older versions of Internet Explorer won’t see the transparency in the image

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s some interesting stuff on rgba here:

http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/

David

On 23 Feb 2010, at 17:05, Todd wrote:

On Feb 23, 2010, at 2:58 AM, David Owen wrote:

This is a technique I’ve never used in Freeway, it will be very useful. I’m sure others might want to know how its done ~ there’s a file to download.

Glad to help David. Don’t forget to cover your bases with regard to rgba browser support; not a lot of it yet. Specify a solid fallback color or use an IE filter hack (far from ideal but it works). A lot of online explanations/examples around.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s also the graphic effects option in Freeway.

Which neatly answers Neil’s question

…why is not possible to do something like that with the colours palette and opacity without having to learn to ‘code’ or understand tags etc.

Excellent Joe - I wasn’t even aware that option was there!

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Feb 23, 2010, at 12:49 PM, David Owen wrote:

There’s some interesting stuff on rgba here:

For a Beautiful Web

I friend of mine got me into that Chicago event. I was surprised at
how very cool it was. Some truly amazing minds. It was nice to put a
face to some of the people whose work I’m familiar with and to
discover new ones.

@neil - You were wondering why you should learn to code some things?
If you get the chance I encourage you to attend an event like the one
above and you’ll quickly understand how much you’re missing out on.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just missed an event in Leeds the other week where Andy Clarke was
speaking. I won’t miss the next one.

You should try and follow some of these bods on Twitter it’s very
useful.

David

On 23 Feb 2010, at 19:39, Todd email@hidden wrote:

If you get the chance I encourage you to attend an event like the
one above


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options