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

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


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