Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

I've come across various family tree presentations. I'm curious if it's possible to display a one-to-many and then many-to-one structure? Currently, the flow is linear stop after stop, but I'd like to incorporate multiple steps that converge back into a single step. I've seen an inverted family tree where it's flipped 180 degrees. Is there a way to combine these two concepts?

.tree {
  margin: 0;
  padding: 0;
}

/* CSS code continues... */

<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a></li>
            <li>
              <a href="#">Grand Child</a>

               /* HTML code continues... */

            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

https://i.sstatic.net/oH63g.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing personalized font styles in HTML on a WordPress platform

I recently followed a tutorial on how to upload custom fonts to my WordPress website, which you can find at the link below. I completed all the necessary steps, such as uploading to the ftp, modifying the header.php file to include the font stylesheet, and ...

A guide on dynamically adding a CSS stylesheet to an Angular component during runtime

I have a requirement to dynamically inject a stylesheet into a component at runtime. The CSS url needs to change depending on user configuration settings and the selected theme. Using styelUrls for static injection won't work in this case, as it is s ...

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

Dragging and dropping elements using Jquery to various positions on the screen

I am working on a project with draggable buttons and a droppable textarea. When I drag a button onto the textarea, it displays some code. If I drag another button, the text related to that button is added to the existing code. My query is how can I insert ...

Positioning a div on the right side of its parent div

Hi there! I'm currently working on a small navbar that has two sections: the left section with an arrow icon and the right section with two icons - an envelope and an exclamation triangle. I've been trying to position the right section in the top ...

Customizing the active link color in Bootstrap dropdown menus

Is there a way to customize the color and background of an active link in a boostrap's dropdown menu? Despite trying to override bootstrap's @dropdownLinkColorActive and @dropdownLinkBackgroundActive variables, the changes don't seem to tak ...

The Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

Issue with autoplay slideshow functionality not activating when opened in a new tab

The owl.carousel.js plugin is used for creating a jQuery slideshow. Initially, the slideshow works correctly, but I noticed that the autoplay feature stops working when I open a new tab in Firefox or Chrome. Demo : Demo : $(document).ready(function () ...

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue: I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh ...

How Bootstrap Navigation is negatively impacting the width of the website

I am experiencing a problem with site width changes in the navigation. I have checked margins and padding, but couldn't find a solution to fix the issue. It seems like the row element is causing the problem, but I'm not sure why. Please assist me ...

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

I am currently facing an issue with creating image links from an SVG spritesheet that is causing cross-browser problems between Chrome, Safari, and Firefox. Here are some of the anchor tags I am using: <a href="#" id="twitter-logo" class="socialIcon"&g ...

The end of the page is not displayed fully in Safari

I've been scratching my head trying to understand why this Safari browser issue is happening on this page: . It seems to be working perfectly fine on all other browsers that I've tested so far! The code includes some jquery and css to adjust the ...

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

Issues with Forms Affecting my Footer

One of the best methods to understand this issue is to view it live. The footer on the homepage looks great at www.fishingreports.com. However, there seems to be a problem with the footer at www.fishingreports.com/users/register. Whenever I copy the cod ...

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

"Deleting a line from a text file in PHP with a predetermined format: A step-by-step guide

I am facing a situation where I need to manipulate a CSS file through PHP. The CSS file contains the following properties: #firstdiv { width:100%; height:200px; } #seconddiv { width:80%; height:70px; } #thirddiv { width:80%; height:70px; } #firstdiv { col ...