Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML]Drzewo genealogiczne
miccom
post 18.10.2020, 11:43:01
Post #1





Grupa: Zarejestrowani
Postów: 493
Pomógł: 8
Dołączył: 7.07.2007
Skąd: Tychy

Ostrzeżenie: (0%)
-----


Cześć.
Szukam rozwiązania smile.gif

Chcę stworzyć moje drzewo genealogiczne, znalazłem w sieci rozwiązanie ale nie do końca mi to pasuje ;/

Mam taki kod:

  1. * {margin: 0; padding: 0;}
  2.  
  3. .tree ul {
  4. padding-top: 20px; position: relative;
  5.  
  6. transition: all 0.5s;
  7. -webkit-transition: all 0.5s;
  8. -moz-transition: all 0.5s;
  9. }
  10.  
  11. .tree li {
  12. float: left; text-align: center;
  13. list-style-type: none;
  14. position: relative;
  15. padding: 20px 5px 0 5px;
  16.  
  17. transition: all 0.5s;
  18. -webkit-transition: all 0.5s;
  19. -moz-transition: all 0.5s;
  20. }
  21.  
  22. /*We will use ::before and ::after to draw the connectors*/
  23.  
  24. .tree li::before, .tree li::after{
  25. content: '';
  26. position: absolute; top: 0; right: 50%;
  27. border-top: 1px solid #ccc;
  28. width: 50%; height: 20px;
  29. }
  30. .tree li::after{
  31. right: auto; left: 50%;
  32. border-left: 1px solid #ccc;
  33. }
  34.  
  35. /*We need to remove left-right connectors from elements without
  36. any siblings*/
  37. .tree li:only-child::after, .tree li:only-child::before {
  38. display: none;
  39. }
  40.  
  41. /*Remove space from the top of single children*/
  42. .tree li:only-child{ padding-top: 0;}
  43.  
  44. /*Remove left connector from first child and
  45. right connector from last child*/
  46. .tree li:first-child::before, .tree li:last-child::after{
  47. border: 0 none;
  48. }
  49. /*Adding back the vertical connector to the last nodes*/
  50. .tree li:last-child::before{
  51. border-right: 1px solid #ccc;
  52. border-radius: 0 5px 0 0;
  53. -webkit-border-radius: 0 5px 0 0;
  54. -moz-border-radius: 0 5px 0 0;
  55. }
  56. .tree li:first-child::after{
  57. border-radius: 5px 0 0 0;
  58. -webkit-border-radius: 5px 0 0 0;
  59. -moz-border-radius: 5px 0 0 0;
  60. }
  61.  
  62. /*Time to add downward connectors from parents*/
  63. .tree ul ul::before{
  64. content: '';
  65. position: absolute; top: 0; left: 50%;
  66. border-left: 1px solid #ccc;
  67. width: 0; height: 20px;
  68. }
  69.  
  70. .tree li a{
  71. border: 1px solid #ccc;
  72. padding: 5px 10px;
  73. text-decoration: none;
  74. color: #666;
  75. font-family: arial, verdana, tahoma;
  76. font-size: 11px;
  77. display: inline-block;
  78.  
  79. border-radius: 5px;
  80. -webkit-border-radius: 5px;
  81. -moz-border-radius: 5px;
  82.  
  83. transition: all 0.5s;
  84. -webkit-transition: all 0.5s;
  85. -moz-transition: all 0.5s;
  86. }
  87.  
  88. /*Time for some hover effects*/
  89. /*We will apply the hover effect the the lineage of the element also*/
  90. .tree li a:hover, .tree li a:hover+ul li a {
  91. background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
  92. }
  93. /*Connector styles on hover*/
  94. .tree li a:hover+ul li::after,
  95. .tree li a:hover+ul li::before,
  96. .tree li a:hover+ul::before,
  97. .tree li a:hover+ul ul::before{
  98. border-color: #94a0b4;
  99. }
  100. <div class="tree">
  101. <ul>
  102. <li>
  103. <a href="#">Parent A</a>
  104. <ul>
  105. <li>
  106. <a href="#">Child</a>
  107. <ul>
  108. <li>
  109. <a href="#">Grand Child</a>
  110. </li>
  111. </ul>
  112. </li>
  113. <li>
  114. <a href="#">Child</a>
  115. <ul>
  116. <li><a href="#">Grand Child</a></li>
  117. <li>
  118. <a href="#">Grand Child</a>
  119. <ul>
  120. <li>
  121. <a href="#">Great Grand Child</a>
  122. </li>
  123. <li>
  124. <a href="#">Great Grand Child</a>
  125. </li>
  126. <li>
  127. <a href="#">Great Grand Child</a>
  128. </li>
  129. </ul>
  130. </li>
  131. <li><a href="#">Grand Child</a></li>
  132. </ul>
  133. </li>
  134. </ul>
  135. </li>
  136. </ul>
  137. </div>


Wszystko ładnie, ale jak zaznaczyć dwóch rodziców dla wszystkich dzieci poniżej? Jak dodać Parent B?
Proszę o pomoc.


--------------------
Jeśli pomogłem- kliknij POMÓGŁ-przyda się ;)- jeśli piszę bzdury- pisz pod postami. Poprawię się.
PISZĘ POPRAWNIE PO POLSKU!
Go to the top of the page
+Quote Post
SmokAnalog
post 18.10.2020, 12:33:37
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Poszukaj lepszego kodu. To nie wygląda jak kod na drzewo genealogiczne, tylko na hierarchię klas lub jakiejś innej architektury.
Go to the top of the page
+Quote Post
gino
post 18.10.2020, 14:58:29
Post #3





Grupa: Zarejestrowani
Postów: 319
Pomógł: 52
Dołączył: 18.02.2008

Ostrzeżenie: (0%)
-----


Zobacz gotowe drzewo np.
genealogy tree
Go to the top of the page
+Quote Post
miccom
post 21.10.2020, 11:36:48
Post #4





Grupa: Zarejestrowani
Postów: 493
Pomógł: 8
Dołączył: 7.07.2007
Skąd: Tychy

Ostrzeżenie: (0%)
-----


Cytat(gino @ 18.10.2020, 15:58:29 ) *
Zobacz gotowe drzewo np.
genealogy tree

No tak, ale ja chciałbym coś mega prostego- no i po swojemu wink.gif


--------------------
Jeśli pomogłem- kliknij POMÓGŁ-przyda się ;)- jeśli piszę bzdury- pisz pod postami. Poprawię się.
PISZĘ POPRAWNIE PO POLSKU!
Go to the top of the page
+Quote Post
SmokAnalog
post 21.10.2020, 12:15:48
Post #5





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


To może napisz takie coś od zera?
Go to the top of the page
+Quote Post
gino
post 21.10.2020, 13:15:50
Post #6





Grupa: Zarejestrowani
Postów: 319
Pomógł: 52
Dołączył: 18.02.2008

Ostrzeżenie: (0%)
-----


Po swojemu czyli jak? Piszesz w forum dla początkujących, więc mniemam, że niewiele wiesz jak to zrobić, bo jak to ma wyglądać to najmniejszy problem. Trzeba mądrze i dobrze zaprojektować bazę danych (trzeba informacje gdzieś zapisać), o możliwościach dodawania gałęźi dla rozbudowy potomków w dół, na boki. Trzeba mieć pojęcie o strukturze reprezentującej drzewo matematyczne. Później trzeba to oprogramować, objąć logiczną koncepcję poruszania się po drzewie, jakie jego segmenty w danej chwili wyświetlić, co pokazać, czego nie, przecież to drzewo będzie rosnąć. Jakiego języka w końcu użyć do oprogramowania a jakiego do wyświetlenia drzewa. To nie jest zadanie dla początkującego i podejrzewam prawie zielonego w kwestiach programowania. Lepiej zrobić to dobrze na gotowcu.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 12:34