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...
Why is console.log returning a blank line when trying to retrieve the value of a text input variable? HTML <label for="subject">Subject</label> <input type="text" id=" ...
Is there a way to validate empty form fields before submission and show an alert? This validation is important as some fields are hidden using v-show. Here is an example: <!DOCTYPE html> <header> <script src="https://unpkg.com/vue@n ...
Within a dynamic-height parent div, I have two cards stacked on top of each other. However, the issue arises when these two cards do not completely fit inside the parent div. The problem likely stems from the table within the lower card, which is not respo ...
To introduce you to my work, I have a table filled with data from a database that functions as a CRUD - Create, Read, Update, Delete table. Within this table, there is a column where EDIT and DELETE buttons are located. Clicking on the EDIT button trigger ...
I need assistance with aligning two ul blocks. Currently, they are displaying next to each other, but their alignment is starting from the bottom instead of the top: <div class="ingredients-container"> <div style="display: inline-block; width: ...
Looking for solution in editing a php gallery code to adjust hyperlink destination. This php gallery script generates a gallery from a folder of images which, when clicked on, opens a larger preview with a hyperlink. However, the issue is that the link in ...
I have a changing number of v-cards that are displayed based on their quantity. My goal is to maintain an aspect ratio of 16/9, but only adjust the width. To achieve this, I believe I need to make the width dependent on the height, although I am unsure ho ...
I have a submit button in a contact form that triggers PHP code to send an email. However, when I press the button nothing happens - not even the PHP code is displayed as it should be if PHP were not installed. Interestingly, I have tested other simple mai ...
I recently created an admin panel that integrates with a database. To automate the process of generating the admin panel, I utilized flask-admin. Running the server locally on my PC displayed the bootstrap swatch correctly and everything worked seamlessly. ...
In Angular 8, I have created a table using angular material and AWS Lambda as the backend. The table includes a multi-select dropdown where users can choose values and click on a "Generate" button to add a new row with a timestamp and selected values displ ...
Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...
I have multiple buttons on a single page, and I want the hover effect to be applied to all of them with just one code using jQuery. Please review my code below. $(document).ready(function(){ $('.button').hover(function(){ var bc=$(this ...
I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...
After implementing a Wordpress Theme, I encountered the need to customize the styles of one of its elements. (This particular element displays our tours automatically) Currently, the style is as follows: .tourmaster-tour-grid .tourmaster-tour-content-wrap ...
I know this question has probably been asked countless times before, but I'm struggling to find the right words to explain my specific issue. Essentially, I'm having trouble accessing something like $ctrl.thing.subelement. However, the following ...
I am currently working on transforming my HTML5 website into a Nativescript app. The idea is to enclose the website within a Webview, but I am curious if there is a method for sharing data between the Webview and the Nativescript code. This way, I could tr ...
Utilizing Bootstrap affix property to reveal a header after scrolling down by 100px has been successful for me. However, I encountered an issue when trying to set the opacity property to 0.0001, it works as expected. But when setting it to 0 or changing di ...
Can a single Stylus file be compiled into two separate CSS files? For example, one optimized for mobile without the -moz and webkit elements, and another for cross-browser applications? Thank you. ...
I'm struggling to style a contenteditable element to resemble a regular textbox on my website. Can anyone help me identify the font used in this picture? I've tried several but none seem to match perfectly. https://i.sstatic.net/2aAbb.jpg The co ...
After interacting with the page, a loader briefly appears and then disappears from the page html. <div class="loader"> <img src="/static/media/loading-anim-windmill.9f645983.gif" alt="loading"><p>Loading...&l ...