Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Mistake In MJT 3 Column Layout Or Not?

    When I simulate the process of moving the coloured divs in Photoshop, I find that moving column 2 (which according to MJT's markup is yellow) to the left by 30% does not mean the green layer (layer 3) becomes visible. Instead, I find that layer 2 (yellow) is hidden by the red layer (layer 1).

    Code:
    <div id="container3">
        <div id="container2">
            <div id="container1">
                <div id="col1">Column 1</div>
                <div id="col2">Column 2</div>
                <div id="col3">Column 3</div>
            </div>
        </div>
    </div>
    In the markup above, I deduce that container 1 (red layer) will appear topmost; container 2 (yellow) will be directly beneath that; and container 3 (green) will be bottommost in the stack.

    Quote Originally Posted by Mathew James Taylor
    Moving the containers into place with relative positioning

    "Using relative positioning we now move the containers to their new locations. When each container is moved the divs become visible below. It is the layering and position of the coloured containers that create the background of the equal height columns. The container2 div is moved to the left by 30% to reveal the green right-hand column and the container1 div is moved to the left 40% to reveal the yellow center column and at the same time the red section that is still visible becomes the left-hand column."
    According to this, moving container 2 would not look as it appears in the illustration:


    (Image taken from article)

    rather, it would appear in reality (my Photoshop experiment) to show the red layer still covering everything, while the yellow layer (container 2) moves underneath, not being visible due to the red layer (container 1) covering it completely. However, in the illustration it appears to me that he is moving container 1 (red; topmost layer) first - and this doesn't appear to be the case, as he has said he is moving container 2 first (which is yellow). Now, what appears is that the green layer is directly beneath the red but this doesn't make sense because in order to generate that result, I have to bring layer 3 (green) up one in the stack, so that they read: Red, Green, Yellow; rather than Red, Yellow, Green. I am very, very confused by this.

    I'm not even sure if I've explained the above correctly but I'm posting it like this, due to time restraints.

    The reason for making a Photoshop model to play around with is that I have dyscalculia, a form of 'numbers dyslexia, which means I have to invent alternative (mostly physical) methods of calculation to overcome this fact. In a sense, the Photoshop model I have invented is intended to work as a kind of 'visual abacus' to enable me to take MJT's concepts and work them out for myself to make this technique flexible for my own use.

    So, because my limited ability to count, multiply and divide, percentages become a challenge, thus, I can never be totally sure of my own reckoning. Therefore, I am eager to know if you are able to find a mistake in Mathew's article or whether it is because of something I have overlooked.

    Many thanks for your understanding

    Dr. V
    Last edited by Doctor_Varney; 09-01-2010 at 02:31 PM.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Anyone???

    V

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    There is one mistake:
    in the first of the illustrations he call the red "container3". It is "container1"

    I will try to explain it:
    The highest of the white divs determines the height of the red div
    The height of the red div determines the height of the yellow div
    And last the height of the yellow div determines the height of the yellow div

    These illustrations show the placement and size of each div throghout the process.


    We start with the divs unmodified and therefore placed on top of each other (Ill:1)

    Then we move(flows) the yellow div to the green div, 30& to the left, and since the red div is inside the yellow it follows it. (Ill:2)
    (and the white follows the red)

    Then we move(flows) the red div to the yellow div, another 40% (Ill:3)

    Then we move(flows) the white divs to the red div, 70% to the right, so that they are all displayed over the green div (Ill:4)

    The blue dotted area (Ill:5) show what is displayed outside (overflows) the green div.

    That area will be hidden by "overflow:hidden" (Ill:6)

    The white divs have a transparent background, which leads us to the final result (Ill:7)

  • Users who have thanked Lerura for this post:

    Doctor_Varney (09-02-2010)

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Lerura, thank you SO much for going to the effort of explaining with those images. I couldn't be sure but it sure as hell looked like there was a mistake. I thought I was going insane!

    God bless you! (I don't believe in god, but you get the point).

    Kind regards

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •