#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Mar 2008
    Posts
    1,928
    Rep Power
    378

    Dynamic, nested divs


    I have a multi-dimensional array, like this...

    [code]
    Array
    (
    [0] => Array
    (
    [phase] => One
    [code] => A
    [name] => Adam
    [subname] =>
    )

    [1] => Array
    (
    [phase] => One
    [code] => B
    [name] => Ben
    [subname] =>
    )

    [2] => Array
    (
    [phase] => Two
    [code] => C
    [name] => Charlie
    [subname] =>
    )

    [3] => Array
    (
    [phase] => Two
    [code] => D
    [name] => Dan
    [subname] =>
    )

    [4] => Array
    (
    [phase] => Two
    [code] => E
    [name] => Edward
    [subname] =>
    )

    [5] => Array
    (
    [phase] => Three
    [code] => F
    [name] => Fred
    [subname] => Fred1
    )

    [6] => Array
    (
    [phase] => Three
    [code] => F
    [name] => Fred
    [subname] => Fred2
    )

    [7] => Array
    (
    [phase] => Three
    [code] => G
    [name] => George
    [subname] =>
    )

    [8] => Array
    (
    [phase] => Three
    [code] => H
    [name] => Henry
    [subname] =>
    )

    [9] => Array
    (
    [phase] => Four
    [code] => J
    [name] => James
    [subname] =>
    )

    [10] => Array
    (
    [phase] => Four
    [code] => K
    [name] => Kevin
    [subname] =>
    )

    [11] => Array
    (
    [phase] => Five
    [code] => L
    [name] => Lee
    [subname] => Lee1
    )

    [12] => Array
    (
    [phase] => Five
    [code] => L
    [name] => Lee
    [subname] => Lee2
    )

    [13] => Array
    (
    [phase] => Five
    Code:
     => L
                    [name] => Lee
                    [subname] => Lee3
                )
        
        )
    ...which I'd like to represent graphically, like this...



    ...but I want to keep it flexible, so constructing it as a series of nested divs. Can someone steer me towards an idiot-proof tutorial for that? I'd be grateful for any pointers!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    399
    Rep Power
    190
    Nested divs would be more or less a CSS or HTML topic.

    Not until you know exactly how to represent it in HTML/CSS,
    should you start to convert it into PHP.
    Thomas Tremain
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    This should be pretty easy to do but if you don't know HTML and CSS I recommend that you learn HTML and CSS then try to start working with php


    The hardest part of this will be getting the CSS to work the way you want it to
    Last edited by jack13580; April 8th, 2013 at 01:30 AM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Location
    Vancouver, WA, USA
    Posts
    399
    Rep Power
    190
    Originally Posted by jack13580
    This should be pretty easy to do but if you don't know HTML and CSS I recommend that you learn HTML and CSS then try to start working with php
    The hardest part of this will be getting the CSS to work the way you want it to
    Sounds like something I'd say! LOL
    Thomas Tremain
  8. #5
  9. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    I'm guessing the issue here has a lot more to do with how to structure the array than it does with how to nest or style the divs.

    The first thing I would do is restructure the array into 3 or 4 dimensions:
    [phase][code][name][subname]

    Now, your output structure is somewhat inconsistent because you go phase -> code -> subname -> name instead of phase -> code -> name -> subname. That will make it pretty difficult to build a very generic solution. Logically it would make more sense to have subname displayed to the right of name.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    14
    Rep Power
    0
    you just need to put the array in loop and either you could use div or table structure for this. you will need to use here skill. for example you can first make a count of how many phases you would have then accordingly adjust loop for that <tr><td> elements. and then put your code and name items in <td> eg. <table> foreach arr in array{ echo "<tr> arr->phase <td background color: "green;"> arr->code</td> <td> arr->name </td></tr>";} similarly you could include formatting and have the array printed.. Please bear if the syntax is not accurate. See the idea. you can do with divs as well
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Mar 2008
    Posts
    1,928
    Rep Power
    378
    Hm, I thought the CSS would be the easy part, but it's proving a lot trickier than I thought.

    I'm going to head over to the css forum and see if I can figure out how to arrange my divs so they play nicely with the css.

    Then I'll pop back here with an example of the desired div output...

IMN logo majestic logo threadwatch logo seochat tools logo