I often see websites with an image overlapping other areas of the site. Like the example included, where the iPhone overlappes (visually) two backgrounds.
How can I achieve this in my inline construction?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Make an image in PNG-24 format, and import it as a pass-through. This will allow a perfectly transparent background (without jaggies at the edges of curved transparent areas as you would get in GIF) and can overlay any color or pattern you like. Position this transparent image as an inline element, then create your two-tone background behind it using a repeating image or similar. You can also “vault” an element above other inline content using a placeholder inline (empty) div as its positioning base, and then nest your absolutely-positioned image into that element and set its positioning to place it (visually) outside of the placeholder.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walt! I think I understand your “vault” element suggestion. Could you give a simple example to give me a little extra clue?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sure. Vault
Freeway 7 file: http://scripty.walterdavisstudio.com/vault/vault.freeway.zip
Walter
On Mar 4, 2015, at 1:58 PM, Wimdg email@hidden wrote:
Thanks Walt! I think I understand your “vault” element suggestion. Could you give a simple example to give me a little extra clue?
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
Hi Walt,
Very clear! Real nice (and simple) trick!
Thanks again.
Willem
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You’re welcome. Note what happens if you zoom text on that page (make sure your browser is set to zoom text only – that’s a good testing preference in any case, to ensure that you don’t fool yourself into thinking your layout is unbreakable). The anchor element moves with the text, and so the floating image is pushed down the screen, since it is positioned relative to that element, and stays near the top of the second paragraph.
Walter
On Mar 5, 2015, at 3:33 AM, Wimdg email@hidden wrote:
Hi Walt,
Very clear! Real nice (and simple) trick!
Thanks again.
Willem
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