Re: Shading a <div>

Path	csiph.com!usenet.pasdenom.info!gegeweb.org!newsfeed.kamp.net!newsfeed.kamp.net!newsfeed.freenet.ag!takemy.news.telefonica.de!telefonica.de!newsfeed.arcor.de!newsspool4.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type	text/plain; charset="UTF-8"
Message-ID	<2360224.vrq3Q6drov@PointedEars.de> (permalink)
From	Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To	Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Organization	PointedEars Software (PES)
Date	Wed, 30 May 2012 10:14:26 +0200
User-Agent	KNode/4.4.11
Content-Transfer-Encoding	8Bit
X-Face	%i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px\|[=M@7=Ik[_w<%n1Up"LPQNu2m8\|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Face	iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Subject	Re: Shading a <div>
Newsgroups	comp.lang.javascript
References	<4fc5370c$0$6907$e4fe514c@news2.news.xs4all.nl> <1750700.sGQGJBOIHu@PointedEars.de> <4fc5c882$0$6968$e4fe514c@news2.news.xs4all.nl>
Followup-To	comp.infosystems.www.authoring.stylesheets
MIME-Version	1.0
Lines	55
NNTP-Posting-Date	30 May 2012 10:14:26 CEST
NNTP-Posting-Host	7db0a9cd.newsspool4.arcor-online.net
X-Trace	DXC=K\36dhe7YhXmG86`U=_nC_4IUK<Cl32<Q4Fo<]lROoRQ8kF<OcfhCO[7EWL1O4@eW[DZm8W4\YJN\J`:FmdeL>KP6JDa4d]ka`UH<OPQSR5UD_
X-Complaints-To	usenet-abuse@arcor.de
Xref	csiph.com comp.lang.javascript:14233

Followups directed to: comp.infosystems.www.authoring.stylesheets

Show key headers only | View raw

Tom de Neef wrote:

> "Thomas 'PointedEars' Lahn" <PointedEars@web.de> schreef in bericht
> news:1750700.sGQGJBOIHu@PointedEars.de...
>> Tom de Neef wrote:
>>
>>> [.]
>>> Shading the whole client area apart from the focal <div> is not an
>>> option.
>>> It should be per <div>.
>>>
>>> I know how to make a <div> element semi-transparent. And I know how to
>>> add
>>> such a veil to the document and position it over a target <div>.
>>> But I would like it to be 'attached to' the target <div> so that it
>>> stays over it even when the target div resizes or moves (e.g. as a
>>> result of window resizing or server instructions).
>>> Can you think of an elegant way to do this and give suggestions, please.
>>
>> Position the target `div' element relative and the blocking `div' element
>> absolute as its child with left: 0, right: 0, top: 0, bottom: 0.
>>
>> Did I miss anything?
> 
> I have never seen this spec of  (0,0,0,0).

Standard CSS.  But a rectangle with coordinates (0, 0, 0, 0) is _not_ what 
it means.  RTFM.

> In Chrome and FF it does what
> you predicted: the child takes all space offered by the parent.
> Not so in IE8: the child uses only what is needed (e.g. for a &nbsp;).

It should work in IE 7 and 8, too (IE/MSHTML 6 supports `right' and `bottom' 
differently; use CCs).  Do not develop in Quirks Mode and remember that you 
must also use the `position' property *twice* (on different elements, with 
different values).

> But "top:0;left:0;width:100%;height:100%;" seems to work in all browsers.

Until you add padding it might.  Usually width:100% and height:100% is a bit 
too large – there are scrollbars.

> Thank you.

You're welcome.  Next time, consider a CSS-only solution first, and post 
where that is on-topic.

F'up2 comp.infosystems.www.authoring.stylesheets

PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
  -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-29 22:52 +0200
  Re: Shading a <div> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-05-29 23:06 +0200
    Re: Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-29 23:35 +0200
      Re: Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-29 23:37 +0200
    Re: Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-30 09:13 +0200
      Re: Shading a <div> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-05-30 10:14 +0200

csiph-web