Visualizing Data with HTML and CSS Chart Designs

I'm seeking assistance with creating an organization tree in a specific layout.

https://i.sstatic.net/z9LRc.jpg

I am having trouble replicating the tree structure shown in the image.

I need help generating a similar tree structure where multiple levels are displayed, including extensions like Level21.

Here is the code I've been using to construct the tree:

/* CSS styling for the tree */

* {
  margin: 0;
  padding: 0;
}

.tree ul {
  /* CSS properties */
}

...
/* More CSS styling here */

/* HTML structure for the tree */
<div class="tree">
  <ul class="level1">
    <li class="level11">
      <a href="#">Level 1</a>
      <ul class="level2">
        <li class="level21">
          <a href="#">Level 21</a>
        </li>
        <li class="level22">
          <a href="#">Level 22</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<!-- End of HTML structure -->

htmlcsstreevieworgchart

Answer №1

To improve the layout of the <ul> elements, you should assign a specific class (e.g., "side") that accomplishes the following:

  1. Increases the length of the downward connectors (such as adding height: 40px)
  2. Moves the first child directly under the parent element
  3. Positions the second child to the right of the parent
  4. Eliminates any current child connectors present
  5. Introduces a side connector for the second child

Answer №2

I made some adjustments to your code to help you kick-start your project.

Here are my additions: 

li.levelSide::before {
  height: 0px;
  border: none;
}

li.levelSide {
  position: absolute;
  left: 100%;
  padding-top: 0;
  top: 0;
  padding-left: 0;
}


/*CSS Styles*/

* {
  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;
}


/*Using ::before and ::after for 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;
}


/*Removing connectors from elements without siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*No space above single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Eliminating connectors on first and last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back vertical connector to 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;
}


/*Adding 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;
}


/*Hover effects*/


/*Applying hover effect to lineage*/

.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;
}


/*That's all. Enjoy!
Thanks :)*/

li.levelSide::before {
  height: 0px;
  border: none;
}

li.levelSide {
  position: absolute;
  left: 100%;
  padding-top: 0;
  top: 0;
  padding-left: 0;
}
<div class="tree">
  <ul class="level1">
    <li class="level11">
      <a href="#">Level 1</a>
      <ul class="level2">
        <li class="level21">
          <a href="#">Level 21</a>
          <ul class="level2">
            <li class="level31">
              <a href="#">Level 31</a>
            </li>
            <li class="levelSide">
              <a href="#">Side Level</a>
            </li>
          </ul>

        </li>

        <li class="levelSide">
          <a href="#">Side Level</a>
        </li>
      </ul>
    </li>

  </ul>
</div>

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

`Incompatibility issue between HTML, CSS and Chrome browser`

There seems to be an issue with the left menu not displaying properly on the website in Google Chrome. Interestingly, it appears correctly aligned at the bottom of the menu in Firefox (blue), but in Chrome, it is positioned in the middle. Despite the co ...

htmlcss

What is the best way to manipulate the size and orientation of an image upon hovering over

I'm struggling to figure out how to simultaneously rotate and scale a .png file when the user hovers over it. Currently, it only scales when I hover on the picture. I understand that the scale property overwrites the first transform but I can't s ...

htmlcssrotationhoverscale

Ensure that the radio button is set to its default option when the user accesses the page

I have a model with a 'PartActionType' enum which includes Transfer, Harvest, and Dispose options. public enum PartActionType { Transfer, Harvest, Dispose } On my view page, I am displaying these options using ...

c#htmlcssasp.net-mvcrazor

Traversing a series of HTML form elements in order to extract their current values and store them in an object

Suppose we have an HTML structure like this: <nav data-filters class=""> <input type="radio" name="type" value="company" checked>Company <input type="radio" name="type" value="product">Product <input type=" ...

javascriptjqueryhtmlbackbone.jsunderscore.js

The event handler attached to the 'click' event will only be triggered upon the second click

After implementing the script, I noticed a strange behavior. When I click it on load, everything works perfectly. However, when I click it via a dynamically created element, the HTML seems to shift or stretch on the first click before returning to normal. ...

javascriptjqueryhtmliframe

Retrieve HTML content from Vuetify components without displaying it on the webpage

I have a project where I need to retrieve the HTML code from various Vuetify components. Instead of just as a HTML string, I actually need it as a DOM element that can be easily added to the body. This is necessary for me to be able to utilize these compon ...

javascripthtmlvue.jsdomvuetify.js

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

jquerycssajaxcursor

jQuery not targeting absolute positioned duplicates of the <div>'s

(Please find the code link at the bottom of this question) I have been working on a radial menu for a web project. However, I've encountered an issue that has me stuck for hours now. No matter what I try, I can't seem to get any response from th ...

jqueryhtmlcss

What is the best method for styling the "body" of multiple pages in a React.js application to prevent them from overlapping?

Hello everyone, After attempting different approaches in numerous ways, I have turned to the experts here who are sure to have the answer to this simple problem. The issue at hand is that when I try to apply background images and other properties to the ...

cssreactjsmern

Transforming a canvas element into an image sans the use of toDataURL or toBlob

Recently, I developed a small tool which involves adding a canvas element to the DOM. Strangely, when trying to use toBlob or toDataURL, I encountered an issue with the canvas being tainted and received the error message (specifically in chromium): Uncaugh ...

javascripthtml

There seems to be a problem with the background repeating space in the CSS

body { background-image: url("https://source.unsplash.com/user/c_v_r/100x100"); background-size: 100px; background-repeat: space; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA- ...

htmlcss

Choosing a specific option from a dropdown menu in Angular

Whenever I try to update the province of a person using the dropdown list, it doesn't display the old province value. This issue seems to be related to the HTML rendering. This dropdown list is a crucial part of the person's information that I f ...

htmlangulardropdown

Discovering additional element information while utilizing the 'Sortable' feature

My Current Objective: In my setup, I have a 'calendar' comprising 5 columns, each column containing 5 separate divs known as timeslots. The main purpose here is to show appointments in these specific timeslots and utilize JQuery's Sortable ...

javascripthtmlajaxjquery-uijquery-ui-sortable

Troubleshooting issue with removing an item from jQuery's html5 localStorage

Exploring the following code snippet: $('#doneItem').click(function(){ $(this).each(function(index){ var item = 'personal' + index; alert(item); localStorage.removeItem('personal' + ...

jqueryhtmllocal-storage

Performing a repeated action to choose each item from a dropdown menu

I attempted to streamline the process by creating id tags for each dropdown and implementing a loop to select each manufacturer without having to write an extensive amount of code. However, I encountered difficulties and was unable to find a solution. The ...

javascripthtmlangularjsprotractor

Tips for making search results stand out

Hey there! I've got a search function set up to look for keywords in a database. I'm interested in highlighting those keywords and found a second function that I want to integrate into my search function. This is the current code for the search: ...

phpmysqlhtmlfunctionsyntax-highlighting

Issues with rendering components using ReactJS are causing problems with <p/> and <br/> tags not functioning as expected

I am having trouble using <p/> or <br/> tags to create new lines after a custom ReactJS component that includes Bootstrap CSS with <div className="col-sm-10">. var MyChatClientView = React.createClass({ render: function() { retur ...

htmltwitter-bootstrap-3reactjs

AngularJS static list with dynamically changing content

Seeking inspiration on creating an AngularJS information monitor with a maximum of 6 rows. The display should show new rows at the top, pushing out the oldest row from the bottom when there are already 6 rows visible. Rows can also disappear unexpectedly. ...

javascriptjquerycssangularjsangularjs-directive

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Using the "img" tag with only a width value in CSS will automatically calculate the height proportionally. However, finding the height value using developer tools or jQuery's height() method may not work as expected. See the example below: HTML code ...

jquerycssimageheightwidth

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

cssvue.jsvuejs3bulma