I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage.
To explain further: What the code currently accomplishes is this:
what i aim to include is this:
Although it may seem like a straightforward query, I find myself stuck at the moment
It seems that there has been a recent modification made to the initial code to accommodate husband and wife connections. Best wishes!
Upon reviewing the information provided:
"Please note that a revised version of this family tree is currently being developed to include partial IE support and the capability for multiple parents, making it a more functional solution for creating family trees."
It appears that the feature for 'multiple parents' is not yet available.
Have you considered grouping the husband and wife in the same list item (li) element and then using CSS to visually connect them? You could try something like this:
<style>
.husband { float: left; }
.wife { margin-left:10px; }
.wife::before {
/* This is a pseudo CSS, make sure to adjust as needed */
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
</style>
<li>
<ul>
<li>
<a class="husband" href="#">Grand Child</a>
<a class="wife" href="#">Wife</a>
<ul>
<li><a href="#">Kid</a></li>
<li><a href="#">Kid</a></li>
</ul>
</li>
</ul>
</li>
Here is the method I employed
<li>
<ul>
<li>Father</li>
<li>Mother</li>
</ul>
<a href="http://www.clarkeology.com/names/clarke/21/james">James CLARKE1779 - 1860</a>
<div itemprop="spouse">
<a href="http://www.clarkeology.com/names/cole/19/elizabeth">Elizabeth COLE 1794 - 1865</a>
</div>
<ol>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ol>
</li>
In this setup, any <li> within the structure can repeat in a similar manner (though adding both children and parents to all may cause confusion... usually just add one or the other beyond the main individual in focus.
You can find a practical demonstration on with detailed css at /css/_tree.css, and the script used to interpret a GEDCOM file and generate the required html code at https://github.com/pauly/js-gedcom
I utilized itemprop instead of class above to integrate schema.org microformats into my project as well, although using class would serve the same purpose.
I was particularly impressed by the original css design I came across recently, and working on this has been quite enjoyable. Feel free to submit pull requests for my code!
What do you think of this idea?
<li>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
<li>
<a href="#">Wife</a>
</li>
</ul>
</li>
I suggest wrapping the last grand-child into a ul element. This arrangement creates a line above the two elements, rather than in between them. However, it may not be possible with your current box model...
As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...
Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...
I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...
I am having trouble implementing an automatic file upload feature without the need for a separate upload button. Below is the code I have so far, excluding the irrelevant CSS. //html <!-- some codes here--> <input type="file" id="f ...
What is causing this error to occur? Are there any alternative methods available for converting it into a json file? import requests import json url = 'https://finance.yahoo.com/quote/AMZN/balance-sheet?p=AMZN&.tsrc=fin-srch' r = requests. ...
Currently, I am encountering difficulties in my attempt to remove or hide the first option value from a ransack code. Would you be able to assist me in addressing this concern? Here is the HTML CODE that I am working with: <select id="q_c_0_a_0_name" ...
I am currently working on a website that contains the following PHP code: echo "<form action='choice.php' method='post'>"; echo "<input type='submit' name='choice' value='left' /> "; As I am i ...
I am currently designing a metro tiles menu for my website, without using JavaScript and only relying on HTML and CSS. The issue I am facing involves the sliding tiles and the direction in which they slide. Additionally, there seems to be a problem where ...
In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...
I am facing a scenario where I have 3 arrays of the same length. My requirement is to automatically subtract the values in the first two arrays without any user input. If the result of subtraction is negative, I need to identify the index of that array num ...
I have noticed that there is too much space beneath an image on my website. I have tried checking for extra tags, but I suspect that it might be controlled in a css file. Could someone please help me identify which part of the css is causing this extra ...
Looking to create a sliding horizontal menu with various categories using a clever div layer setup. The goal is to have one fixed-width div containing another wider div, with only a portion of the second one visible at a time. Encountering two challenges ...
After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...
Despite numerous attempts, I have been unable to figure out how to effectively use the Sublime Editor for creating scss/sass files. ...
I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...
I have an ng-repeat directive in my code that displays slides. Here is a snippet of the data: slides = [{ src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_24.jpg", interval: 5000 }, { src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_login-regi ...
The code run Here is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <!--javascript extensions--> <script src=' ...
I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...
Presently, I am implementing an if/else statement within my code to determine the content that will be displayed in the JSX element named 'signupMessage'. Subsequently, I render the contents of this 'signupMessage' element. render() { ...
I am looking to automate a specific process that involves an Error modal popping up. I am trying to use Selenium to capture this modal which appears in multiple instances. So far, I have attempted to locate it by XPath without success. Using CSS selector o ...