beginners question about layers / order of precedence.

Discussion in 'HTML' started by Tim W, Jan 13, 2012.

  1. Tim W

    Tim W Guest

    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
    Tim W, Jan 13, 2012
    #1
    1. Advertising

  2. Tim W

    Neil Gould Guest

    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... 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
    Neil Gould, Jan 13, 2012
    #2
    1. Advertising

  3. Tim W

    Rob W Guest

    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?
    Rob W, Jan 13, 2012
    #3
  4. Tim W

    Neil Gould Guest

    Jim T. wrote:
    > On Fri, 13 Jan 2012 08:42:01 -0500, "Neil Gould"
    > <> 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
    > grief. Not making z-index an absolute depth was a poor design decision
    > IMO.
    >

    Although I'm inclined to agree with you, it is probably on a different basis
    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
    Neil Gould, Jan 13, 2012
    #4
  5. Tim W

    Tim W Guest

    On 13/01/2012 14:16, Rob W wrote:
    > 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?
    >
    >
    >

    No, you are right, I shopuldn't have used that term it isn't about
    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
    Tim W, Jan 13, 2012
    #5
  6. Tim W

    Rob W Guest

    Op 13-1-2012 19:00, Tim W schreef:
    > On 13/01/2012 14:16, Rob W wrote:
    >> 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?
    >>
    >>
    >>

    > No, you are right, I shopuldn't have used that term it isn't about
    > 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



    HTML code can always be seen.
    Rob W, Jan 13, 2012
    #6
  7. Tim W

    cwdjrxyz Guest

    On Jan 13, 3:51 am, 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?


    You have had several useful replies, but I thought I will mention that
    "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.
    cwdjrxyz, Jan 14, 2012
    #7
  8. Tim W

    Gus Richter Guest

    On 1/13/2012 4:51 AM, 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?



    <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.

    --
    Gus
    Gus Richter, Jan 14, 2012
    #8
  9. Tim W

    dorayme Guest

    In article <jeourb$huk$>,
    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?
    >


    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
    dorayme, Jan 14, 2012
    #9
  10. Tim W

    Gus Richter Guest

    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

    > 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.



    Just to complete what I wrote regarding the notion of layering which is
    facilitated in CSS by the z-index property.

    --
    Gus
    Gus Richter, Jan 23, 2012
    #10
  11. Tim W

    Tim W Guest

    On 14/01/2012 02:56, Gus Richter wrote:
    > On 1/13/2012 4:51 AM, 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?

    >
    >
    > <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.
    >

    Thanks, you and the other guys too. Really useful replies. I have pretty
    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
    Tim W, Jan 26, 2012
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Christos TZOTZIOY Georgiou

    Introspection: expression evaluation order - precedence

    Christos TZOTZIOY Georgiou, Oct 24, 2003, in forum: Python
    Replies:
    0
    Views:
    300
    Christos TZOTZIOY Georgiou
    Oct 24, 2003
  2. Replies:
    26
    Views:
    662
    Mark McIntyre
    Jun 15, 2007
  3. vjay
    Replies:
    7
    Views:
    376
    Robin Kåveland Hansen
    Nov 27, 2007
  4. Replies:
    3
    Views:
    303
    Paavo Helde
    Mar 19, 2008
  5. Snorri
    Replies:
    1
    Views:
    278
    Victor Bazarov
    Mar 19, 2008
Loading...

Share This Page