PHP Lang
  1. PHP Lang
  3. создание горизонтального дерева с помощью css
Intereting Posts
подсчитывая количество выполняемых сценариев Как json_encode массив с французскими акцентами? система ранжирования зданий с данными из базы данных каталог не создается при запуске сценария оболочки bash в php Когда я вызываю bind_param, если вы используете подготовленные команды MySQLi в цикле? Nginx переписать не работает с расширением .php Вставка из цикла for – добавление значения опции выбора только к одной записи ОШИБКА: Предупреждение: mysql_num_rows () ожидает, что параметр 1 будет ресурсом, boolean задан в C: \ xampp \ htdocs \ … \ … php в строке 19 Разработка API-интерфейса чата, как и для Stackoverflow Загрузка FTP через PHP-форму Вставка значений флажка в базу данных MySQL с помощью PHP Расширять черты с классами в PHP? vagrant puphpet Nginx загружает php-файл вместо рендеринга SyntaxError: JSON.parse: неожиданный символ в строке 1 столбца 2 JSON Создать заказ программно в Magento

создание горизонтального дерева с помощью css

У меня есть массив, в котором я заполняю таблицу генеалогии. Это так:

——— 3

—- 1

——– 4

0

——– 5

—- 2

——– 6

и т. д. … пример: http://bullybloodlines.net/dogdetails.php?name=muscletone%27s+lucky+bam+bam+of+power+line+bullys

мой код для этого: 

<?php $generations = 4; $genTableArray = array(); for($genCol = 0; $genCol <= $generations; $genCol++) { $genRowCount = pow(2, $genCol); $rowspan = pow(2, $generations) / $genRowCount; for($familyGenCount=0; $familyGenCount<$genRowCount; $familyGenCount++) { $personIndex = pow(2, $genCol) + $familyGenCount - 1; $rowIndex = $rowspan * $familyGenCount; $encodedog = urlencode($dogarr[$personIndex]); $genTableArray[$rowIndex][] = "<td rowspan='{$rowspan}'><a href='http://bullybloodlines.net/dogdetails.php?name={$encodedog}'><img src='images/dogpics/{$dogpic[$personIndex]}' width=100/><br><br>{$dogarr[$personIndex]}</a></td>\n"; } } ksort($genTableArray); $familyTreeHTML = ''; foreach($genTableArray as $rowData) { $familyTreeHTML .= "<tr>\n" . implode("\n", $rowData) . "</tr>\n"; } ?> <table border='1' align='center' cellpadding='4' style='border-collapse:collapse;'> <?php echo $familyTreeHTML; ?> </table>

Это прекрасно работает. Однако моя цель – изменить макет и использовать CSS, чтобы создать что-то вроде http://thecodeplayer.com/walkthrough/css3-family-tree, но горизонтально, как моя таблица.

Ive попытался добавить это к css, чтобы повернуть его: 

 .tree{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */ -ms-transform: rotate(-90deg); }

Он вращается, но текст также отображается в боковом направлении. Это моя первая проблема. У меня также есть проблема с использованием моего массива, чтобы заполнить его тем, как он устроен. Дерево «css3-family» использует вложенные списки. Любая помощь будет принята с благодарностью. Спасибо.

Theres a awesome пример Peiwen Lu над codepen что вы должны проверить.

Явная удивительность

не уверен, что я правильно понял, но вы можете вращать внутренние элементы с дерева, чтобы получить желаемую ориентацию.

Поэтому, если вы это сделаете: 

 .tree{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); -ms-transform: rotate(-90deg); }

вы можете добавить: 

 .tree a { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); -ms-transform: rotate(90deg); }

Чтобы зафиксировать ориентацию внутренних якорей.