Place a DIV above all site content

[joker197cinque]

I'm a webmaster. Few days ago a very strange project arrived in my
hands.

I have a photoshop layout that I am supposed to slice and mount into
HTML+CSS. This is a very common task for me....but this time is
different.

Final goal is to have a semi-transparent grid layer that overlay ALL
website content (text, pics tables,colors) ... as concept imagine a
background image pattern that stay ABOVE website content and not
below.

Do you know a way to obtain this effect without impact on other
standard functionality of a webpage ?

I tried for example some DIV structures with

opacity: 0.n;
-moz-opacity: 0.n;
filter: alpha(opacity=n);

The problem with this approach (and all solutions lightbox like) is
that the layer is modal. No access to underline content is allowed.

Any help much much appreciated.

Best regards.

 

[dorayme]

I'm a webmaster. Few days ago a very strange project arrived in my
hands.

I have a photoshop layout that I am supposed to slice and mount into
HTML+CSS. This is a very common task for me....but this time is
different.

Final goal is to have a semi-transparent grid layer that overlay ALL
website content (text, pics tables,colors) ... as concept imagine a
background image pattern that stay ABOVE website content and not
below.

Do you know a way to obtain this effect without impact on other
standard functionality of a webpage ?

I tried for example some DIV structures with

opacity: 0.n;
-moz-opacity: 0.n;
filter: alpha(opacity=n);

The problem with this approach (and all solutions lightbox like) is
that the layer is modal. No access to underline content is allowed.

Any help much much appreciated.

Best regards.

Take a look at some information that Ben C gave about transparancy and
canvasses towards the end of a thread called "transparent color -
background" recently.

 

[Neredbojias]

I'm a webmaster. Few days ago a very strange project arrived in my
hands.

I have a photoshop layout that I am supposed to slice and mount into
HTML+CSS. This is a very common task for me....but this time is
different.

Final goal is to have a semi-transparent grid layer that overlay ALL
website content (text, pics tables,colors) ... as concept imagine a
background image pattern that stay ABOVE website content and not
below.

Do you know a way to obtain this effect without impact on other
standard functionality of a webpage ?

I tried for example some DIV structures with

opacity: 0.n;
-moz-opacity: 0.n;
filter: alpha(opacity=n);

The problem with this approach (and all solutions lightbox like) is
that the layer is modal. No access to underline content is allowed.

What value of opacity are we talking about here? For the majority of
_effective_ values, it will make little difference whether the grid layer
is above or below content.

 

[Jonathan N. Little]

I'm a webmaster. Few days ago a very strange project arrived in my
hands.

I have a photoshop layout that I am supposed to slice and mount into
HTML+CSS. This is a very common task for me....but this time is
different.

Gawd! The infamous ImageReady chop-n splice "website"! Not a web page
but an image of a webpage...I can only imagine.

Final goal is to have a semi-transparent grid layer that overlay ALL
website content (text, pics tables,colors) ... as concept imagine a
background image pattern that stay ABOVE website content and not
below.

Do you know a way to obtain this effect without impact on other
standard functionality of a webpage ?

No. No mater what your transparency is any element overlaid over the
page is *still* overlaid over the page. So links and forms elements will
be impervious to input and mouse clicks!

What you are wanting is some Flash site were you overlay with line
elements...

 

[Els]

Gawd! The infamous ImageReady chop-n splice "website"! Not a web page
but an image of a webpage...I can only imagine.

That's a bit harsh, isn't it?
Every single website I build comes from a PhotoShop layout - none of
them are 'images of a webpage'. They all have regular text, regular
images, and some of them will need some decorative imaging that needs
to be sliced. 'ImageReady' is your interpretation, but the OP never
said he uses that.

 

[joker197cinque]

What value of opacity are we talking about here?  For the majority of
_effective_ values, it will make little difference whether the grid layer
is above or below content.

Look at this example: http://tinyurl.com/3tsrtt

I took a "Stamp" of that cool website and placed that grid via
photoshop. That is the effect I am supposed to implement.

I think there is no chance to do that but I hope I am wrong.

Best regards.

 

[Jonathan N. Little]

That's a bit harsh, isn't it?
Every single website I build comes from a PhotoShop layout - none of
them are 'images of a webpage'.

Except for the hint: "I am supposed to slice and mount into HTML+CSS."
Harks back to many Adobe GoLive sites I seen images chopped and spliced
into a table to make the "webpage"

They all have regular text, regular
images, and some of them will need some decorative imaging that needs
to be sliced. 'ImageReady' is your interpretation, but the OP never
said he uses that.

Again, it is the overall method not the tool I was criticizing. Anyway
my advise still stands, any element overlaid regardless of transparency
with prevent interaction with what is beneath. Cannot be done in HTML
except to fake the overlay backgrounds and modified images, (alignment
would be a nightmare) or maybe 1px X ?px sized images absolute
positioned in regular intervals to build the "grid" and keep
interference with content to a minimum, (with mega-ugh factor). The only
practical way I see it is via Flash.

 

[joker197cinque]

Again, it is the overall method not the tool I was criticizing.

I think that some ideas (grid too) and elements are great done in
photoshop and by a good graphic guy. I am simply not so smart in
graphic so my work is to "translate" PSD into good web work. I don't
see any problem or strange thing.


Anyway my advise still stands, any element overlaid regardless of
transparency

with prevent interaction with what is beneath. Cannot be done in HTML
except to fake the overlay backgrounds and modified images, (alignment
would be a nightmare) or maybe 1px X ?px sized images absolute
positioned in regular intervals to build the "grid" and keep
interference with content to a minimum, (with mega-ugh factor). The only
practical way I see it is via Flash.

This is a bad info for me...but also the only one I can see
too....thanks for help.

 

[Els]

Except for the hint: "I am supposed to slice and mount into HTML+CSS."
Harks back to many Adobe GoLive sites I seen images chopped and spliced
into a table to make the "webpage"

I'll admit that "slice" does remind some people of that type of crap,
but to me it doesn't have that connotation. I too slice images for
websites that I get designs for in PhotoShop, but I've never sliced up
complete pages. With or without ImageReady, or GoLive.
Without seeing the end result of what the OP calls a "translating PSD
into good web work" (from his later reply), I just prefer to give
someone the benefit of the doubt.

Again, it is the overall method not the tool I was criticizing.

I did get that - one can easily get the same result without
ImageReady.

Anyway
my advise still stands, any element overlaid regardless of transparency
with prevent interaction with what is beneath. Cannot be done in HTML
except to fake the overlay backgrounds and modified images, (alignment
would be a nightmare) or maybe 1px X ?px sized images absolute
positioned in regular intervals to build the "grid" and keep
interference with content to a minimum, (with mega-ugh factor). The only
practical way I see it is via Flash.

That's what I thought too. But then I saw the replies about opacity,
which may work, but I don't know - never used it.

 

[Jonathan N. Little]

I think that some ideas (grid too) and elements are great done in
photoshop and by a good graphic guy. I am simply not so smart in
graphic so my work is to "translate" PSD into good web work. I don't
see any problem or strange thing.

The problem is that dice and slicing a large image to make a website is
a bad idea regardless of the tool.

1) bandwidth intensive, images > text
2) inflexible images of text cannot adjust to viewports and devices as text
3) accessibly insensitive, images are not read by screen readers, not
can the contrast of image-text be enhanced on enlarged for the visually
impaired.

It just isn't a web page but a picture of a web page.

Now now using an image to workout "styling" and "design" for a page, a
mock up, is okay as long as it is a reference and not diced up to make
the page. The one problem with such layout images is that they can lure
the designer into thinking like a graphic designer for a magazine
spread. But unlink a magazine, the web does not have any paper-size or
aspect ratio...

 

[Jonathan N. Little]

As Jonathan N. Little says, the mouse hits the highest stacked thing
underneath it. Flickr or another similar site actually use this as a
trick to discourage people from saving the pictures by right-clicking--
they put a transparent div on top of everything to shield it from the
mouse.

Neredbojias has the right idea. You can solve your problem by turning
things around. Put all the other content on the page inside a single
outermost div (or something) and set opacity on that div. Put the
picture behind it (a background image on BODY might work, or however you
want to do it).

If you wanted opacity: n on the picture, instead set opacity: 1-n on the
main content div.

It will look slightly wrong in Opera but probably not so you'd notice.

In Firefox and Konqueror/Safari and other browsers that implement
opacity as specified in CSS3, it will look *exactly* the same as if the
picture was in front. But since it's not really in front, you will still
be able to click on the things in the main page.

I thought of this but what about the elephant in the room, IE?

 

[Jonathan N. Little]

I'll admit that "slice" does remind some people of that type of crap,
but to me it doesn't have that connotation. I too slice images for
websites that I get designs for in PhotoShop, but I've never sliced up
complete pages. With or without ImageReady, or GoLive.
Without seeing the end result of what the OP calls a "translating PSD
into good web work" (from his later reply), I just prefer to give
someone the benefit of the doubt.

Funny thing is that I read a an article, can't remember where but maybe
I can find it, that slice a large image to to bits doe not actually save
anything. That is actually be worse as the sum of the parts often is
greater that the whole in terms of bytes and the bits require several
server GETs verses the single GET!

Where it can save is with paletted images whereby careful slicing to
isolate areas of similar colors to greatly reduce the palette for the
part can significantly reduce the PNG or GIF size but when "reassembled"
gives the appearance of a full color image.

 

[joker197cinque]

If you wanted opacity: n on the picture, instead set opacity: 1-n on the
main content div.

Unfortunately, the opacity set on main div impact in bad way all
colors of pics and of other elements.

Here is what I mean http://tinyurl.com/4bkpto

your kind suggestion will drive me in left image rendering which is
different from attended result, on the right.

Any help ?

Regards.

 

[Sherm Pendley]

Funny thing is that I read a an article, can't remember where but
maybe I can find it, that slice a large image to to bits doe not
actually save anything.

One doesn't do it to "save" something though. One has to slice the
layout image in order to accomodate a resizable viewport. Many of the
resulting slices won't even be exported as images, much less bolted
together in a fixed-size table.

sherm--

 

[Jonathan N. Little]

One doesn't do it to "save" something though.

That is the reason most designers use to justify slicing...

One has to slice the
layout image in order to accomodate a resizable viewport.

How so?

Many of the
resulting slices won't even be exported as images, much less bolted
together in a fixed-size table.

Historical practice is to bolt it to a table.

Now I did it here to create a ragged flow text box around the image
effect...

http://www.littleworksstudio.com/Amberlithe/
Amberlithe Ibizan Hounds Home

 

[Els]

How so?

left rounded corner, right rounded corner, and a repeated small image
in between; an image sliced in three, to accommodate any viewport.

Now I did it here to create a ragged flow text box around the image
effect...

http://www.littleworksstudio.com/Amberlithe/
Amberlithe Ibizan Hounds Home

Yup, that's another good reason for slicing an image. I think this may
be the first time I actually see it used on a live website, since I
saw the instructions here:
http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

 

[Sherm Pendley]

That is the reason most designers use to justify slicing...


How so?

Imagine a layout with curved or otherwise ornamental corners for
various divs. That's four slices - one for each corner image. You can
potentially add four more, if you need images for the edges as well.

If you do use edge images, best practice is to make them repeatable
in the relevant direction and use them as a background image, to
accomodate resizing.

Note that I'm not using these slices to define any sizes or positions
- the fact that you take a slice from a .psd in a particular place,
doesn't mean it has to be bolted there forever! In fact, in cases like
this example, where a rounded corner motif may be repeated for many
divs of various sizes, it's common to only slice out one instance of
each of the corner and edge images, and re-use them as needed.

Historical practice is to bolt it to a table.

Now I did it here to create a ragged flow text box around the image
effect...

http://www.littleworksstudio.com/Amberlithe/
Amberlithe Ibizan Hounds Home

That's a good example of the slicing I'm talking about. If a designer
gave me a .psd of that layout, I'd slice it and use the slices in
hand-written HTML pretty much just like that.

I think you have a misconception about the term "slicing"; it's not
limited to slicing up an entire image and bolting every last slice to
a fixed-size table. All it means is mocking up the page in PhotoShop
(or whatever), and slicing out the pieces of the mockup that you want
to use as images.

The slice tool is a workflow tool - it's just a handy way to store the
position, size, export settings and other info about specific sections
of an image. It lets you work on the graphical elements of a page as a
single unit, seeing them more or less "in situ" as they relate to one
another, and then easily split them into individual image elements for
use in HTML. Like any other tool, it can be used well, or not.

sherm--

 

[Neredbojias]

Unfortunately, the opacity set on main div impact in bad way all
colors of pics and of other elements.

Here is what I mean http://tinyurl.com/4bkpto

your kind suggestion will drive me in left image rendering which is
different from attended result, on the right.

Nah, you didn't account for (i.e. change) the background of the under
image.

Check this url:

http://www.neredbojias.org/_dems/opex.html

It's a "medium" example. The grid is #e0e0e0. By adjusting the grid's
intensity and width, you can further refine the opacity of the foreground
image and get it almost as bright as the original.

 

[dorayme]

That is the reason most designers use to justify slicing...

One other reason I have heard is to easily handle links to various bits
of the image. Sort of ready made handle for links without having to set
coordinates as in image maps...

 

[Jonathan N. Little]

"Jonathan N. Little" <[email protected]> writes:

The slice tool is a workflow tool - it's just a handy way to store the
position, size, export settings and other info about specific sections
of an image. It lets you work on the graphical elements of a page as a
single unit, seeing them more or less "in situ" as they relate to one
another, and then easily split them into individual image elements for
use in HTML. Like any other tool, it can be used well, or not.

When doing graphic work sure I use objects all the time, as I remember
PS calls them layers. Those are "process" images in apps native format,
i.e., PSD for PhotoShop or CPT for my PHOTO-Paint.But when most web
designers talk about image slicing it usually mean taking and end
product flat JPG|GIF|PNG and chopping it to reassembling the bits
usually via a table to make a larger whole image. Some advocated it as a
way (although ineffective) to prevent image theft for web pages.