Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
beginners question about layers / order of precedence.
3 views
Skip to first unread message
Tim W
Jan 13, 2012, 4:51:41 AM1/13/12
to
I am teaching myself this html / css lark for my own purposes, and
working slightly out of my depth as I edit the markup to adapt some cms
themes for myself. This is the question which I think is confusing me:
What determines the precedence of display when elements are 'layered'.
So If I give the 'body' a background colour, then have a div called say
'container' it has another background colour and in that div I have
'header' with a background image and over that I want to put a logo
image or text, or I get the text in place and I want to give it a
'shadow' to make it stand out against the image, When I try this I am
getting results (or more often not) which I don't understand. Am I
missing some basic knowledge?
Tim W
working slightly out of my depth as I edit the markup to adapt some cms
themes for myself. This is the question which I think is confusing me:
What determines the precedence of display when elements are 'layered'.
So If I give the 'body' a background colour, then have a div called say
'container' it has another background colour and in that div I have
'header' with a background image and over that I want to put a logo
image or text, or I get the text in place and I want to give it a
'shadow' to make it stand out against the image, When I try this I am
getting results (or more often not) which I don't understand. Am I
missing some basic knowledge?
Tim W
Neil Gould
Jan 13, 2012, 8:42:01 AM1/13/12
to
getting.
In CSS, layers are defined by their Z-Index. Typically, the higher the
number of the Z-Index, the closer to the "front" of the viewport... in other
words, a higher numbered layer will be placed "on top" of a layer with a
lower number. Is that not what you are seeing?
--
best regards,
Neil
Rob W
Jan 13, 2012, 9:16:33 AM1/13/12
to
Op 13-1-2012 10:51, Tim W schreef:
> So If I give the 'body' a background colour, then have a div called say
> 'container' it has another background colour and in that div I have
> 'header' with a background image and over that I want to put a logo
> image or text, or I get the text in place and I want to give it a
> 'shadow' to make it stand out against the image, When I try this I am
> getting results (or more often not) which I don't understand. Am I
> missing some basic knowledge?
>
> Tim W
None of this has anything to do with layers, as far as I can tell.
Having a container-div nested in body is pretty basic.
You don't have to give the container a z-index to show it.
Exactly the same about a header within the container. No z-index needed.
The text is just the content that's placed within the header-div. No
problem.
The only thing you may do wrong is getting the shadow applied to the text,
but we can't tell without the actual html- and css-code.
Do you have a URL for us?
> So If I give the 'body' a background colour, then have a div called say
> 'container' it has another background colour and in that div I have
> 'header' with a background image and over that I want to put a logo
> image or text, or I get the text in place and I want to give it a
> 'shadow' to make it stand out against the image, When I try this I am
> getting results (or more often not) which I don't understand. Am I
> missing some basic knowledge?
>
> Tim W
Having a container-div nested in body is pretty basic.
You don't have to give the container a z-index to show it.
Exactly the same about a header within the container. No z-index needed.
The text is just the content that's placed within the header-div. No
problem.
The only thing you may do wrong is getting the shadow applied to the text,
but we can't tell without the actual html- and css-code.
Do you have a URL for us?
Jim T.
Jan 13, 2012, 10:13:29 AM1/13/12
to
On Fri, 13 Jan 2012 08:42:01 -0500, "Neil Gould"
<ne...@myplaceofwork.com> wrote:
>Tim W wrote:
>> I am teaching myself this html / css lark for my own purposes, and
>> working slightly out of my depth as I edit the markup to adapt some
>> cms themes for myself. This is the question which I think is
>> confusing me:
>>
>> What determines the precedence of display when elements are 'layered'.
>> So If I give the 'body' a background colour, then have a div called
>> say 'container' it has another background colour and in that div I
>> have 'header' with a background image and over that I want to put a
>> logo image or text, or I get the text in place and I want to give it a
>> 'shadow' to make it stand out against the image, When I try this I am
>> getting results (or more often not) which I don't understand. Am I
>> missing some basic knowledge?
>>
>It depends on what you don't understand about the results that you are
>getting.
>
>In CSS, layers are defined by their Z-Index. Typically, the higher the
>number of the Z-Index, the closer to the "front" of the viewport...
Typically, but not always, which has caused me some considerable
<ne...@myplaceofwork.com> wrote:
>Tim W wrote:
>> I am teaching myself this html / css lark for my own purposes, and
>> working slightly out of my depth as I edit the markup to adapt some
>> cms themes for myself. This is the question which I think is
>> confusing me:
>>
>> What determines the precedence of display when elements are 'layered'.
>> So If I give the 'body' a background colour, then have a div called
>> say 'container' it has another background colour and in that div I
>> have 'header' with a background image and over that I want to put a
>> logo image or text, or I get the text in place and I want to give it a
>> 'shadow' to make it stand out against the image, When I try this I am
>> getting results (or more often not) which I don't understand. Am I
>> missing some basic knowledge?
>>
>It depends on what you don't understand about the results that you are
>getting.
>
>In CSS, layers are defined by their Z-Index. Typically, the higher the
>number of the Z-Index, the closer to the "front" of the viewport...
grief. Not making z-index an absolute depth was a poor design decision
IMO.
Neil Gould
Jan 13, 2012, 10:59:19 AM1/13/12
to
than the assignment of the z-index value, as there are other factors, some
that are browser-dependent, that could make it seem that the level is
failing when it is some other problem.
Are all of the graphic components in your test case defined as "display:
block;" (or inline-block, dependent on usage)?
--
best regards,
Neil
Tim W
Jan 13, 2012, 1:00:15 PM1/13/12
to
layers, but about normal nesting of divs.
I am going to have trouble explaining what I don't understand so let me
look again and come back to you. I can't give you a url because I am
working locally on Wampserver and even if I could I don't know if you
can see the html of a cms theme can you?
Tim W
Rob W
Jan 13, 2012, 1:14:25 PM1/13/12
to
Op 13-1-2012 19:00, Tim W schreef:
HTML code can always be seen.
cwdjrxyz
Jan 13, 2012, 7:46:21 PM1/13/12
to
"layers" has a well-defined technical meaning in the old Netscape
browsers of the 4 era at the height of the browser wars. Not as much
CSS was used back then as now, but Javascript was very much used. IE
used "document.all" while Netscape used "layers" while today
"getElementByID" is understood by all modern browsers capable of
Javascript that I have seen. There might still be a few very old pages
around (especially those that use dhtml effects) that have script
using "layers", but most of these will also have a "document.all" path
to be viewed on IE browsers. During the transition to modern
"getElementById", some old pages also included paths for this, and
having to write 3 versions of script was a real pain.
Gus Richter
Jan 13, 2012, 9:56:37 PM1/13/12
to
A missing note in the image is that margin and padding are transparent.
As far as your requirements listed are concerned, further down in the
'box model image' you would find in this order:
header background, div.container background and body background (the
furthest).
Layering is an acceptable term here. It is regarding "automatic
layering" as opposed to "altered layering" with z-index.
Automatic Layering occurs in order of appearance within the source
document. The nearest to the eye is the last in the source document.
Z-index is used to change the automatic layering of a positioned element.
<http://tinyurl.com/6nhz37q>
Is a demo of your stated requirements. It uses automatic layering only -
no altered layer reordering with z-index, since it is not needed here.
--
Gus
dorayme
Jan 13, 2012, 11:57:46 PM1/13/12
to
In article <jeourb$huk$1...@dont-email.me>,
Part One.
There are two dimensional aspects (the xing and yang of it) and
there are third dimensional aspects (the zang of it). You want to
get a clearer picture of zang.
There are some very basic things which any practical website
maker needs to understand well and there are more complex things
which they don't absolutely need to master completely though they
need to be able to have a level of awareness that allows them to
experiment intelligently a bit when unexpected things happen.
Very basic first. Suppose you have a document that contains no
floats or absolute positioning, all your elements, at least all
your boxes are 'position: static;' This is the 'initial' value of
position, a default, authors rarely need to actually state
'position: static;'. All your elements are flowed by the browsers
according to whether they are inline (usually left to right,
wrapping when space runs out) or block (down the page, one under
the other).
In this environment think of elements as if they are transparent
rectangular glass plates on which is text and further elements
like the IMG. If there is just a DIV in BODY and it has some
width and height and nothing else, you would not see it at all.
<http://dorayme.netweaver.com.au/skullduggery/transparentDiv.html>
What you see is BODY's pale green bg colour through the glass
plate of DIV.
HTML and BODY are a little more complex, more mysterious and
unhappily related in some ways, there seems to be some rivalry,
tension, bad blood between them which I won't go into right here.
<http://dorayme.netweaver.com.au/skullduggery/html_robs_body.html>
If you give HTML a bg colour and even a bg image, the stealing by
HTML stops! HTML is then happy and you can give BODY a bg colour
and even a bg image of its own:
<http://dorayme.netweaver.com.au/skullduggery/to_each_its_own.html
>
It is probably unlikely they are ever *both* transparent - you
can *never* see the electronics in your monitor through these
last two and certainly not a cat sitting behind the monitor even
if the monitor has a glass back. I have conducted experiments and
you simply cannot do this, no matter how compliant the cat is to
sit still. It is possible there is a third mysterious factor in
all this, the quiet and unassuming VIEWPORT. Perhaps it is the
VIEWPORT which has a painted surface and both BODY and HTML can
be transparent. But let us shelve this possibility for now.
In the environment of elements not absolutely positioned or
floated, everything being in the flow, laid out according to the
order of the family tree in the html document, you should have
little trouble in understanding the zang of it, elements are
either transparent and you see the parent, or if the parent is
transparent, you see the grandparent and so on. Real painting of
bg occurs for all but BODY/HTML/VIEWPORT *only when authors
assign background stuff*, otherwise they remain transparent.
Now, it gets more complicated when considering positioned
elements or floats in the mix. We then have to talk stacking
contexts and how to manipulate such stacks. But within such
stacks, my above might be helpful?
------
Part 2 might come depending...
But the cricket is on you know and Australia is creaming the
Indians.
--
dorayme
There are two dimensional aspects (the xing and yang of it) and
there are third dimensional aspects (the zang of it). You want to
get a clearer picture of zang.
There are some very basic things which any practical website
maker needs to understand well and there are more complex things
which they don't absolutely need to master completely though they
need to be able to have a level of awareness that allows them to
experiment intelligently a bit when unexpected things happen.
Very basic first. Suppose you have a document that contains no
floats or absolute positioning, all your elements, at least all
your boxes are 'position: static;' This is the 'initial' value of
position, a default, authors rarely need to actually state
'position: static;'. All your elements are flowed by the browsers
according to whether they are inline (usually left to right,
wrapping when space runs out) or block (down the page, one under
the other).
In this environment think of elements as if they are transparent
rectangular glass plates on which is text and further elements
like the IMG. If there is just a DIV in BODY and it has some
width and height and nothing else, you would not see it at all.
<http://dorayme.netweaver.com.au/skullduggery/transparentDiv.html>
What you see is BODY's pale green bg colour through the glass
plate of DIV.
HTML and BODY are a little more complex, more mysterious and
unhappily related in some ways, there seems to be some rivalry,
tension, bad blood between them which I won't go into right here.
<http://dorayme.netweaver.com.au/skullduggery/html_robs_body.html>
If you give HTML a bg colour and even a bg image, the stealing by
HTML stops! HTML is then happy and you can give BODY a bg colour
and even a bg image of its own:
<http://dorayme.netweaver.com.au/skullduggery/to_each_its_own.html
>
It is probably unlikely they are ever *both* transparent - you
can *never* see the electronics in your monitor through these
last two and certainly not a cat sitting behind the monitor even
if the monitor has a glass back. I have conducted experiments and
you simply cannot do this, no matter how compliant the cat is to
sit still. It is possible there is a third mysterious factor in
all this, the quiet and unassuming VIEWPORT. Perhaps it is the
VIEWPORT which has a painted surface and both BODY and HTML can
be transparent. But let us shelve this possibility for now.
In the environment of elements not absolutely positioned or
floated, everything being in the flow, laid out according to the
order of the family tree in the html document, you should have
little trouble in understanding the zang of it, elements are
either transparent and you see the parent, or if the parent is
transparent, you see the grandparent and so on. Real painting of
bg occurs for all but BODY/HTML/VIEWPORT *only when authors
assign background stuff*, otherwise they remain transparent.
Now, it gets more complicated when considering positioned
elements or floats in the mix. We then have to talk stacking
contexts and how to manipulate such stacks. But within such
stacks, my above might be helpful?
------
Part 2 might come depending...
But the cricket is on you know and Australia is creaming the
Indians.
--
dorayme
Ben C
Jan 23, 2012, 8:47:22 AM1/23/12
to
providing an "elaborate description" of them).
Generally speaking elements are stacked back to front as they would be
enumerated in a pre-order traversal of the document tree (which is
natural), but floats, positioned boxes, and text are brought forwards a
bit. You won't normally notice the effect with text (since there's
usually nothing around that would be on top of it anyway), but the float
and positioned behaviour makes a difference.
You can adjust things by setting z-index yourself (but don't forget that
you have to set position as well for it to work-- use position: relative
for minimal side-effects).
There are also some funny goings-on with backgrounds on elements near
the top of the tree because they end up being applied to the viewport
according to various rules.
Gus Richter
Jan 23, 2012, 10:09:43 AM1/23/12
to
On 1/13/2012 9:56 PM, Gus Richter wrote:
> <http://www.bbd.com/stylin/the_files/box_model.png>
> A missing note in the image is that margin and padding are transparent.
>
> As far as your requirements listed are concerned, further down in the
> 'box model image' you would find in this order:
> header background, div.container background and body background (the
> furthest).
>
> Layering is an acceptable term here. It is regarding "automatic
> layering" as opposed to "altered layering" with z-index.
If z-index is not set, the default is: z-index:auto
> <http://www.bbd.com/stylin/the_files/box_model.png>
> A missing note in the image is that margin and padding are transparent.
>
> As far as your requirements listed are concerned, further down in the
> 'box model image' you would find in this order:
> header background, div.container background and body background (the
> furthest).
>
> Layering is an acceptable term here. It is regarding "automatic
> layering" as opposed to "altered layering" with z-index.
> Automatic Layering occurs in order of appearance within the source
> document. The nearest to the eye is the last in the source document.
> Z-index is used to change the automatic layering of a positioned element.
>
> <http://tinyurl.com/6nhz37q>
> Is a demo of your stated requirements. It uses automatic layering only -
> no altered layer reordering with z-index, since it is not needed here.
facilitated in CSS by the z-index property.
--
Gus
Ben C
Jan 23, 2012, 3:51:50 PM1/23/12
to
On 2012-01-14, dorayme <dor...@optusnet.com.au> wrote:
[...]
is back-to-front as they appear in the HTML.
[...]
> In the environment of elements not absolutely positioned or
> floated, everything being in the flow, laid out according to the
> order of the family tree in the html document, you should have
> little trouble in understanding the zang of it, elements are
> either transparent and you see the parent, or if the parent is
> transparent, you see the grandparent and so on.
Yes, the only thing that needs to be added is order of siblings, which
> floated, everything being in the flow, laid out according to the
> order of the family tree in the html document, you should have
> little trouble in understanding the zang of it, elements are
> either transparent and you see the parent, or if the parent is
> transparent, you see the grandparent and so on.
is back-to-front as they appear in the HTML.
Tim W
Jan 26, 2012, 8:33:59 AM1/26/12
to
much resolved my problems with stuff that didn't appear as expected now
by head scratching, experimenting and a late night with an open manual.
I now have just one outstanding problem which relates to text wrapping
incorrectly around a div which is floated right then shifted vertically with
{position: relative;
top: -80px}
I will be uploading it in the next few days so I will ask in a new
thread then if it isn't resolved.
Tim W
0 new messages