bloSSAMedlem sedan sep. 2000116 inlägg Jag försöker rita ett släktträd med hjälp av divvar. För att det ska se någorlunda vettigt ut så vill jag att varje namn ('xxxx' i nedanstående exempel) även skall centreras i höjdled.
En fotnot är att trädet kan vara 3,4...20..... oändligt många generationer. Därför vill jag ha så lite kod som möjligt. Jag vill inte baka in table-taggar i koden. Nedanstående är tänkt som ett exempel. Jag har lagt på border för att göra varje div tydligare.
Tack på förhand!
/ Anders
antal generationer: 3
<div style="background:red; float: top; height:160px;position: relative;">
\<div style="background:green;position: relative;float: left; height: 100%;"\>
\<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:100%"\>xxxx\</div\>
</div>
<div style="background:green;position: relative;float: left; height: 100%;">
<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:50%">xxxx</div>
<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:50%">xxxx</div>
</div>
<div style="background:green;position: relative;float: left; height: 100%;">
<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:25%">xxxx</div>
<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:25%">xxxx</div>
<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:25%">xxxx</div>
<div style="border: 1px; border-style: solid; background:blue; position: relative; text-align: center; vertical-align: middle;float: top; height:25%">xxxx</div>
</div>
</div>
bossseMedlem sedan juni 2003772 inlägg Finns tyvärr inget bra sätt att centrera vertikalt i divar med olika höjd.
Varför inte använda en tabell istället enl. ett exempel jag gjort
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table {width:100%; height:100%;background:blue;border:1px solid black}
tr.rad1 {height:120px}
tr.rad23 {height:80px}
tr {height:40px}
td {border:1px solid black;text-align:center;color:yellow}
</style>
</head>
<body>
antal generationer: 3
<table cellpadding=0 cellspacing=0 >
<tr class=rad1>
<td> xxxx
</td>
</tr>
<tr class=rad23>
<td> xxxx
</td>
</tr>
<tr class=rad23>
<td> xxxx
</td>
</tr>
<tr>
<td> xxxx
</td>
</tr>
<tr>
<td> xxxx
</td>
</tr>
<tr>
<td> xxxx
</td>
</tr>
<tr>
<td> xxxx
</td>
</tr>
</table>
</body>
</html>
bloSSAMedlem sedan sep. 2000116 inlägg Jag har bifogat 2st bilder. En med din lösning, en med min. Jag har ett liggande träd.
Jag KAN lösa det med tables men när jag har t.ex. 10 generationer så har jag 513 individer. Med en <table><tr><td></td></tr></table> per individ så blir det attans mycket kod...
Försöker jag att enbart ha med <table>-taggen en gång per generation så går jag bet på att beräkna hur hög <tr>-taggen ska vara per individ.
bloSSAMedlem sedan sep. 2000116 inlägg Bifogar ett screenshot på hur min lösning ser ut med tables och begränsningen 5 generationer tillbaka. Det är så här jag vill att det ska se ut ungefär, fast utan begränsning på antalet generationer.
bloSSAMedlem sedan sep. 2000116 inlägg Ok, så länge man bara har en textrad inom varje div så går det att lösa med 'line-height', men när man får två eller flera rader i samma div så sket det sej. :)
Rent html-mässigt bör det gå att baka in alltihop i en enda tabell, men det blir kanske lite pyssligt "bakom kulisserna" att göra så? För jag antar att du loopar ut alltihop med något serversidespråk?
En tabell uppbyggd ungefär enligt din bild (förmodligen med en massa felstavade namn, för jag har inte korrekturläst för fem öre):
<table>
<tr>
<td rowspan="8">Tunnerbohults Isak</td>
<td rowspan="4">Ylvagårdens Herkules (Semin)</td>
<td rowspan="2">Gisslabodas Tor</td>
<td>Hässleholms Krull</td>
</tr>
<tr>
<td>Tranetorps Miramiss</td>
</tr>
<tr>
<td rowspan="2">Ylvagårdens Saga</td>
<td>Gisslabodas Tor</td>
</tr>
<tr>
<td>Kyrkhults Teolinda</td>
</tr>
<tr>
<td rowspan="4">Ingelstads Hedvig</td>
<td rowspan="2">Tranetorps Hans</td>
<td>Tranetorps Kalle</td>
</tr>
<tr>
<td>Tranetorps Gullspira</td>
</tr>
<tr>
<td rowspan="2">Tranetorps Gulling</td>
<td>Tranetorps Bruse</td>
</tr>
<tr>
<td>Tranetorps Ida</td>
</tr>
<tr>
<td rowspan="8">Åttans Heidi</td>
<td rowspan="4">Hjortaröds August</td>
<td rowspan="2">Fredriksdals Ula-Sven (Semin)</td>
<td>Kyrkhults Ula-heren</td>
</tr>
<tr>
<td>Gisslabodas Göga-Sissa</td>
</tr>
<tr>
<td rowspan="2">Hjortaröds Ronja</td>
<td>Kyrkhults Birk</td>
</tr>
<tr>
<td>Bleckstorps Brynja</td>
</tr>
<tr>
<td rowspan="4">Annelunds Hedvig</td>
<td rowspan="2">Bleckstorps Gullmansson</td>
<td>Kyrkhults Gullman</td>
</tr>
<tr>
<td>Gisslabodas Göga-Sissa</td>
</tr>
<tr>
<td rowspan="2">Gisslabodas Göga-Sissa</td>
<td>Hässleholms Krull</td>
</tr>
<tr>
<td>Tranetorps Miramiss</td>
</tr>
</table>
Dina rowspan får du ju då räkna ut efter antalet generationer du ska presentera...
tantenMedlem sedan nov. 20051 596 inlägg Lite knöligt med släktträd... Här ett exempel jag gjort en gång där jag fyllt i vilken ordning man lägger in dem i tabellen. Mörka är papporna och ljusa mammorna.
Kanske lite tips på ett sätt att göra det med en enda tabell. Inte semantiskt korrekt, men jag gjorde den för utskrift så jag funderade inte på hur man skulle kunna fixa till den för synskadade...
http://member.webforum.nu/9656/tree.html
bloSSAMedlem sedan sep. 2000116 inlägg Jo, jag har försök ganska exakt som du säger, tyvärr har jag än så länge gått bet. :( Om du kollar den turordningen du har på rowspan i din exempelkod (8,4,2,0,0,2,0,0,4,2 osv) så ser du att man då får hoppa rätt friskt mellan generationerna emellanåt, och ju fler generationer desto fler hopp. Det är den kopplingen mellan generationshopp och storlek på rowspan som jag inte fixat riktigt.
Om vi tar 4 generationer så blir hoppandet mellan generationerna typ:
1,2,3,4,4,3,4,4,2 osv. Just där jag hoppar från generation 4 till 2 får jag problem.
Men jag kommer nog att göra ett försök till vid tillfälle då jag nu har numrerat generationerna i databasen. Får jag fram det numret för varje individ borde det gå att göra som du säger.
Du har helt rätt i att jag loopar fram resultaten. Jag använder PHP för det. Just loopandet är enklast om jag kan loopa fram resultaten generationsvis.
Jag har kommit på en fuling som fungerar som jag vill, dock med lite extra kod men det får nog duga så länge. :) På samma vis som jag skulle räkna ut rowspan, line-height eller höjden på en div så kan jag ju lika gärna räkna ut höjden på en transparent gif-bild. Jag lägger alltså en bild (samma bild jämt med storleken 1*1 pixel) överst i varje div där jag ska ha text, sen sätter jag 'height' i 'img'-taggen till det jag räkna ut.
P.S. Stavningen är nog helt ok, jag har dock inte heller korrekturläst. ;)
Tanten: Tack för det ypperliga förtydligandet av hoppandet mellan generationerna! :)
tantenMedlem sedan nov. 20051 596 inlägg Skickade upp ett ex till med mellanrum och utan färg.
http://member.webforum.nu/9656/tree2.html
Jag stoppade själv vid 5 generationer och byggde på med ny tabell efter det. Generationerna som finns längre upp i trädet gör ju första generationen till monsterstora rutor... om man inte stoppar någonstans och börjar på nytt, tyckte jag.
bloSSAMedlem sedan sep. 2000116 inlägg Jo, jag vet vad du menar... Om du kollar bilden i min fjärde post i denna tråd så ser du små pilar ute till höger. Med hjälp av de flyttar jag mej en generationstabell till. Idag har jag precis den turordningen som ditt diagram visar men det är lite långsamt pga att jag även gör mer arbete än att bara visa ett träd.
En annan orsak till att jag vill göra om allt syns också på den bilden:
Vissa individer har lite lilaaktig färg... Det är de som finns representerade mer än en gång på en trädhalva. Det finns även en tredje färg (som naturligtvis inte finns representerad på den bilden) som visar om någon finns både på övre och undre trädhalvan. Beräkningen av det tar idag lång tid pga upplägget.
Nu ska även en inavelsgrad beräknas. Med nuvarande loopning får jag ibland timeout. Med den nya loopningen (generationsvis) tar det kanske 4-5 sekunder vid 15 generationer. Ett krav jag har på mej där är att räkna ända bak tills trädet tar slut.
tantenMedlem sedan nov. 20051 596 inlägg Om du har kravet att detta ska finnas i trädet så förstår jag att det tar tid att loopa igenom. Men är det inte vanligare att inavelskoeff. och avelsindex visas för varje individ när man valt att titta på en speciell hona eller hane.
Sedan att man markerar individer som kommer på flera platser, gör det lite lättare att bli uppmärksam...
Men nu var det bara ett släktträd med så lite kod som möjligt jag ville visa.
En massa divar får jag för mig blir svårare att få till... :OO
bloSSAMedlem sedan sep. 2000116 inlägg Önskemålet är att alla individer som visas i ett träd skall presenteras med inavelsgrad. Denna behöver bara räknas ut en gång och resultatet kan jag spara i databasen, så det är åtminstone halvlugnt. :) Om jag inte är helt ute och reser är inavelsgrad och inavelskoefficient samma sak(?)... Jag har även en beräkning som görs på alla levande individer och som liksom talar om 'statusen' för hela stammen. Vad den heter minns jag inte riktigt nu.
Jag har dessutom möjligheten att göra testparningar mellan två individer. Där måste jag vid varje visning ta reda på de blå och lila färgerna om man säger så. Än värre är det när jag gör testparningar mellan två individer som inte ens existerar idag, dvs att jag väljer ut fyra stycken djur som ska vara far-/mor-föräldrar. :p
Tja, det är lite annat som ska räknas ut och presenteras osså men inget som hör hemma i denna forumdelen. :)
Vi får se hur det blir med divvar och tables. Jag har iaf några lösningar nu så jag kan knopa ihop det tillfälligt åtminstone.
