Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Place a DIV above all site content

Reply
Thread Tools

Place a DIV above all site content

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-18-2008
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
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-18-2008
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
 
Reply With Quote
 
 
 
 
joker197cinque
Guest
Posts: n/a
 
      09-18-2008
On Sep 18, 4:58*pm, Ben C <(E-Mail Removed)> 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.

 
Reply With Quote
 
Sherm Pendley
Guest
Posts: n/a
 
      09-18-2008
"Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-18-2008
Sherm Pendley wrote:
> "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      09-18-2008
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/
 
Reply With Quote
 
Sherm Pendley
Guest
Posts: n/a
 
      09-18-2008
"Jonathan N. Little" <(E-Mail Removed)> writes:

> Sherm Pendley wrote:
>> "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      09-18-2008
On 18 Sep 2008, joker197cinque <(E-Mail Removed)> wrote:

> On Sep 18, 4:58*pm, Ben C <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      09-18-2008
In article <e2697$48d2af9b$40cba7c6$(E-Mail Removed)>,
"Jonathan N. Little" <(E-Mail Removed)> wrote:

> Sherm Pendley wrote:
> > "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-18-2008
Sherm Pendley wrote:
> "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Place div beneath another div CaptCaveman1 HTML 2 02-06-2011 04:16 AM
We are currently buying Foundy Networks - primarily NetIron MLX andXMR but are also looking for BigIron RX, ServerIron WMS7, and FastIronFESX's. If you have the above or have access to the above from a clientlooking ro recover value, please sen Network/Software Buyer Cisco 1 07-30-2010 01:25 AM
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Getting the content above the navstuff without breaking the site. Mike Barnard HTML 9 02-22-2008 01:12 AM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments