Forum PHP.pl

Cześć.
Szukam rozwiązania

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

Mam taki kod:

[HTML] pobierz, plaintext 
* {margin: 0; padding: 0;}
 
.tree ul {
	padding-top: 20px; position: relative;
 
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
 
.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
 
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
 
/*We will use ::before and ::after to draw the connectors*/
 
.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}
 
/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}
 
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
 
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}
 
/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}
 
.tree li a{
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
 
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
 
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
 
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}
</style>
<div class="tree">
	<ul>
		<li>
			<a href="#">Parent A</a>
			<ul>
				<li>
					<a href="#">Child</a>
					<ul>
						<li>
							<a href="#">Grand Child</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Child</a>
					<ul>
						<li><a href="#">Grand Child</a></li>
						<li>
							<a href="#">Grand Child</a>
							<ul>
								<li>
									<a href="#">Great Grand Child</a>
								</li>
								<li>
									<a href="#">Great Grand Child</a>
								</li>
								<li>
									<a href="#">Great Grand Child</a>
								</li>
							</ul>
						</li>
						<li><a href="#">Grand Child</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
[HTML] pobierz, plaintext 

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

Poszukaj lepszego kodu. To nie wygląda jak kod na drzewo genealogiczne, tylko na hierarchię klas lub jakiejś innej architektury.

Zobacz gotowe drzewo np.
genealogy tree

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

To może napisz takie coś od zera?

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.