Tim W said:
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?
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.
