I need help with this HTML Family Tree

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 7528 Views - Last Post: 27 November 2015 - 07:47 PM

#1 Delta 7   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 26-November 15

I need help with this HTML Family Tree

Posted 26 November 2015 - 07:05 PM

I took a html and JS course a few years ago and ive forgotten most of what Ive learned, but I could easily understand the code as a noob by going through the chapters of the book again.

I tried to create a Family Tree Hierarchy in PowerPoint but theres to many bugs, id like to do this a browser instead.

In PowerPoint I have a bulletpoint hierarchy list and id like to paste this to notepad to make a family tree with my own background image centered behind the text. I want it to be formatted the way youd format a family tree. How would I code this?

Is This A Good Question/Topic? 0
  • +

Replies To: I need help with this HTML Family Tree

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: I need help with this HTML Family Tree

Posted 26 November 2015 - 07:39 PM

Have you searched "javascript family tree" or "css family tree" to see what approaches others may have taken?
Was This Post Helpful? 0
  • +
  • -

#3 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: I need help with this HTML Family Tree

Posted 26 November 2015 - 07:39 PM

Very carefully?

I don't understand the reasoning of doing this in html over PowerPoint. If you can't do it in a drag and drop interface, how are you expecting to do it in code? Other than, "I was hoping someone would find it in their heart to show me working code."
Was This Post Helpful? 0
  • +
  • -

#4 Delta 7   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 26-November 15

Re: I need help with this HTML Family Tree

Posted 26 November 2015 - 07:55 PM

View Postandrewsw, on 26 November 2015 - 07:39 PM, said:

Have you searched "javascript family tree" or "css family tree" to see what approaches others may have taken?


Yeah Ive tried but I got no luck. I was wondering if you could show me how to format some code in JS CSS and HTML to create a family tree on html. Powerpoint has too many bugs. Just a simply tree with UI.
<ul>

<li>Parent</li>

<ul>
<li>child1</li>

<li>child2</li>
</ul>

<ul><li>cho=ild of child</li></ul>

</ul>
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: I need help with this HTML Family Tree

Posted 26 November 2015 - 07:57 PM

How does PowerPoint have bugs?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: I need help with this HTML Family Tree

Posted 26 November 2015 - 08:42 PM

There are a number of ways to approach this, none of which are particularly natural in a web page. So, no, I don't have a simple piece of code for your.
Was This Post Helpful? 0
  • +
  • -

#7 Delta 7   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 26-November 15

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 01:34 PM

I need help with this code, its for a family tree. The problem with this code is that when I change the size of the window the tree gets broken and part of the tree is moved to the next line so that its all shown within the window and you only have to scroll down to view what should be to the right the other objects in the family tree. I would like the page to stop breaking the tree and allow the user to scroll sideways.


<style>
    /*Now the CSS*/
    * {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;
    }
    
    /*Thats all. I hope you enjoyed it.
    Thanks :)/>/>*/
    </style>


<body>



<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
	<ul>
		<li>
			<a href="#" class="ctitle" id="title" onclick='show("tproperties")'>Animal Kingdom<div id="tproperties" style="display: none;">test text</div></a>
			<ul>
				<li>
					<a href="#" class="clife" id="life">Viruses</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>

Was This Post Helpful? 0
  • +
  • -

#8 macosxnerd101   User is offline

  • Games, Graphs, and Auctions
  • member icon




Reputation: 12769
  • View blog
  • Posts: 45,954
  • Joined: 27-December 08

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 01:40 PM

Merged duplicate threads.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 01:57 PM

You obviously need to prevent the width getting too small, so you could put a min-width on the container element:
    .tree {
        min-width: 800px;
    }

Was This Post Helpful? 0
  • +
  • -

#10 Delta 7   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 26-November 15

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 03:27 PM

Okay now I need help with changing the background color to the boxed objects in my code. When I hover my mouse over an element I get a change in the background color controlled by this line of css.
    .tree li a:hover, .tree li a:hover+ul li a {
        background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
    }



How could I get the background color to change without my having to use the JS mouseover code?

This post has been edited by macosxnerd101: 27 November 2015 - 03:29 PM
Reason for edit:: Removed large quote. No need to quote yourself.

Was This Post Helpful? 0
  • +
  • -

#11 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 03:36 PM

I'm not sure, are you really asking how to change the background-colour? The buttons are all a-tags so you target them in CSS:
.tree a {
    background-color: yellow;
}

If this is what you are asking then you need to spend some time studying CSS.

Why are they a-tags? They don't need to be, unless you plan on having them link somewhere in the future. They could be spans.



Note that you don't have to quote the previous post in full, there is a Reply button further down the page, or use the Fast Reply box.

This post has been edited by andrewsw: 27 November 2015 - 03:38 PM

Was This Post Helpful? 0
  • +
  • -

#12 Delta 7   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 26-November 15

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 03:44 PM

It worked for all objexts, how could I apply it to only a specific object with a specific class/id?

And why choose span over an ahref? I just like using href because I like the behavior of the mouse when pulling it over a link, giving it that highlight and pointing finger.

This post has been edited by andrewsw: 27 November 2015 - 03:46 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#13 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 03:50 PM

me said:

Note that you don't have to quote the previous post in full, there is a Reply button further down the page, or use the Fast Reply box.


View PostDelta 7, on 27 November 2015 - 10:44 PM, said:

It worked for all objexts, how could I apply it to only a specific object with a specific class/id?

The whole of CSS is about targeting elements of the page to format/style them. As I said, you need to invest some time studying this subject. Within the first couple of chapters you will learn the basics of how to target elements.

View PostDelta 7, on 27 November 2015 - 10:44 PM, said:

And why choose span over an ahref? I just like using href because I like the behavior of the mouse when pulling it over a link, giving it that highlight and pointing finger.

If you use a-tags people expect something to happen when they click them, and this is what they are intended for. Using CSS you can style any element to have the look or behaviour of an a-tag.

This post has been edited by andrewsw: 27 November 2015 - 03:50 PM

Was This Post Helpful? 0
  • +
  • -

#14 Delta 7   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 26-November 15

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 04:04 PM

Okay but how do I target a specific box, or specific group of boxes to be a specific color? Say several anchor tags are classed as class="domain" and another just has an id="Elohim". How would you code the domain class to be all green and the id tag to be red?
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: I need help with this HTML Family Tree

Posted 27 November 2015 - 04:15 PM

Did you try it? An id is much more specific than a class, so if you target the id then the element will be red.

Again, the difference between targeting a class or id, and CSS specificity, are all things that you will cover when you study this subject. They are fundamental to the subject.

Here's a tutorial: htmldog



Be aware of the forum rules about asking for code. You need to demonstrate effort or your question will be closed.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2