Place a DIV above all site content

Discussion in 'HTML' started by joker197cinque, Sep 18, 2008.

  1. 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.
     
    joker197cinque, Sep 18, 2008
    #1
    1. Advertising

  2. joker197cinque

    dorayme Guest

    In article
    <>,
    joker197cinque <> wrote:

    > 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.

    --
    dorayme
     
    dorayme, Sep 18, 2008
    #2
    1. Advertising

  3. joker197cinque

    Neredbojias Guest

    On 18 Sep 2008, joker197cinque <> wrote:

    > 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.

    --
    Neredbojias
    http://www.neredbojias.org/
    Great Sights and Sounds
     
    Neredbojias, Sep 18, 2008
    #3
  4. joker197cinque wrote:
    > 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...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #4
  5. joker197cinque

    Els Guest

    Jonathan N. Little wrote:
    > joker197cinque wrote:
    >
    >> 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.


    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.

    --
    Els http://locusmeus.com/
     
    Els, Sep 18, 2008
    #5
  6. On Sep 18, 3:03 pm, Neredbojias <> wrote:

    > 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.
     
    joker197cinque, Sep 18, 2008
    #6
  7. Els wrote:
    > Jonathan N. Little wrote:
    >> joker197cinque wrote:
    >>
    >>> 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.

    >
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #7
  8. On Sep 18, 4:33 pm, "Jonathan N. Little" <> wrote:

    > 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.
     
    joker197cinque, Sep 18, 2008
    #8
  9. joker197cinque

    Els Guest

    Jonathan N. Little wrote:
    > Els wrote:
    >> Jonathan N. Little wrote:
    >>> joker197cinque wrote:
    >>>
    >>>> 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.

    >>
    >> 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"


    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.

    --
    Els http://locusmeus.com/
     
    Els, Sep 18, 2008
    #9
  10. joker197cinque wrote:
    > On Sep 18, 4:33 pm, "Jonathan N. Little" <> wrote:
    >
    >> 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.


    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...




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #10
  11. Ben C wrote:
    >
    > 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?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #11
  12. Els wrote:

    > 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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #12
  13. On Sep 18, 4:58 pm, Ben C <> wrote:

    > 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.
     
    joker197cinque, Sep 18, 2008
    #13
  14. "Jonathan N. Little" <> writes:

    > Els wrote:
    >
    >> 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.


    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--

    --
    My blog: http://shermspace.blogspot.com
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Sep 18, 2008
    #14
  15. Sherm Pendley wrote:
    > "Jonathan N. Little" <> writes:
    >
    >> Els wrote:
    >>
    >>> 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.

    >
    > 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



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #15
  16. joker197cinque

    Els Guest

    Jonathan N. Little wrote:

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

    >
    > 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

    --
    Els http://locusmeus.com/
     
    Els, Sep 18, 2008
    #16
  17. "Jonathan N. Little" <> writes:

    > Sherm Pendley wrote:
    >> "Jonathan N. Little" <> writes:
    >>
    >>> Els wrote:
    >>>
    >>>> 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.

    >>
    >> 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?


    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.

    >> 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


    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--

    --
    My blog: http://shermspace.blogspot.com
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Sep 18, 2008
    #17
  18. joker197cinque

    Neredbojias Guest

    On 18 Sep 2008, joker197cinque <> wrote:

    > On Sep 18, 4:58 pm, Ben C <> wrote:
    >
    >> 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.


    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.

    --
    Neredbojias
    http://www.neredbojias.org/
    Great Sights and Sounds
     
    Neredbojias, Sep 18, 2008
    #18
  19. joker197cinque

    dorayme Guest

    In article <e2697$48d2af9b$40cba7c6$>,
    "Jonathan N. Little" <> wrote:

    > Sherm Pendley wrote:
    > > "Jonathan N. Little" <> writes:
    > >
    > >> Els wrote:
    > >>

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

    >
    > 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...

    --
    dorayme
     
    dorayme, Sep 18, 2008
    #19
  20. Sherm Pendley wrote:
    > "Jonathan N. Little" <> 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 18, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kenny
    Replies:
    1
    Views:
    337
    Patrice
    Dec 22, 2004
  2. Jon Berg
    Replies:
    5
    Views:
    484
    Jon Berg
    Jan 8, 2005
  3. klloyd

    Blank area above content

    klloyd, May 1, 2006, in forum: HTML
    Replies:
    33
    Views:
    1,040
    klloyd
    May 4, 2006
  4. Mike Barnard
    Replies:
    9
    Views:
    394
    Beauregard T. Shagnasty
    Feb 22, 2008
  5. CaptCaveman1

    Place div beneath another div

    CaptCaveman1, Feb 6, 2011, in forum: HTML
    Replies:
    2
    Views:
    787
    richard
    Feb 6, 2011
Loading...

Share This Page