How to style this list to make the it look like a pyramide

My Array:

 array (

       array(

         ['name'] => 'test1',
         ['level'] => 1

       },
       array(

         ['name'] => 'test2',
         ['level'] => 2

       },

       array(

         ['name'] => 'test3',
         ['level'] => 2

       },
       array(

         ['name'] => 'test4',
         ['level'] => 3

       },
       array(

         ['name'] => 'test5',
         ['level'] => 3

       },
       array(

         ['name'] => 'test6',
         ['level'] => 3

       },
       array(

         ['name'] => 'test7',
         ['level'] => 3

       },



    )

What I want:

                  ________  
                 |        | 
                 |  test1 | 
                 |________| 
       ________              ________
      |        |            |        |
      |  test2 |            |  test3 |
      |________|            |________|
 ________   ________   ________   ________
|        | |        | |        | |        |
|  test4 | |  test5 | |  test6 | |  test7 |
|________| |________| |________| |________|

and I already have a function to render by levels:

public static function f($rows)
{
    $str = '';
    $level = 0;
    $first_li_mode = true;
    foreach ($rows as $row) {
        if ($level > $row['level']) {
            $str .= '</li></ul>' . "\n";
            $str .= '</li><li><a href="#">' . $row['name'] . '</a>' . "\n";
            $first_li_mode = true;
        } elseif ($row['level'] > $level) {
            $str .= '<ul><li><a href="#">' . $row['name'] . '</a>' . "\n";
            $first_li_mode = false;
            ;
        } else {
            if (!$first_li_mode) {
                $str .= '</li>' . "\n";
            } else {
                $first_li_mode = false;
            }
            $str .= '<li><a href="#">' . $row['name'] . '</a>' . "\n";
        }

        $level = $row['level'];
    }
    while ($level > 0) {
        $str .= '</li></ul>' . "\n";
        $level--;
    }
    return $str;
}

What it produces:

<ul>
  <li class="level_1">
  <a href="#">
  test1
  </a>
  <ul>
    <li class="level_2">
     <a href="">test2</a>
    </li>
    <li class="level_3">
     <a href="">test3</a>
    </li>
  </ul>
  </li>
</ul>

and so on..., lets say every parent has 2 childs in this list, the question is: How to style this list to make it look like a pyramide, making every parent node(relative to childs) to appear in the top-middle of them both, as in the diagram above? regardless of depth level, maybe I need to make some calculation in my render function to make an offset every level?, but how?

Answers


This is what I would try. You may need to adjust the output a bit, see if it would work for you.

$sorted_arr=array();
foreach ($arr as $a){
    $sorted_arr[$a['level']][]=$a['name']
}
ksort($sorted_arr);
$css="";
foreach ($sorted_arr as $level => $s){
    $count=count($s);
// First count the number of elements in each level. 
    $spacing=1/($count+1)*100-5; 
// Get the percentage of the offset, then minus the 1/2 width of each li element ( say 10% )
    $css.=".level_$level li {margin-left:".$spacing."%; width:10%} \n";
}
echo $css;

Need Your Help

tree generation for rules in python

python tree rules parse-tree

I would like to draw a tree like structure using Tkinter for the following data:

GRID.mvc issue in changing language [ASP.net MVC 4]

c# javascript html asp.net-mvc asp.net-mvc-4

I'm using Grid.Mvc in my project and I want to change the language of grid. To do that First I created and Gridmvc.lang.fr.js file For my language :