Visualizing Data with HTML and CSS Chart Designs

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

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

Pressing the reset button will initiate once the loader has finished

Hello everyone, I'm currently working on creating a button that transforms into a loader when submitted and then reverts back to a button after the form is successfully submitted. I suspect the issue lies within my JavaScript. I'm not sure how ...

javascripthtmlcss

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

javascripthtmlcss

I keep receiving an error in Angular JS but I'm unsure of the reason

I've been working on AngularJS and created a basic module and controller. I'm attempting to show the data of an element inside the controller on the HTML view page, but all I see is {{student.name}} and I'm receiving an error message that sa ...

javascripthtmlangularjs

CSS Interactive Design Breakpoints

Do my Break points at 768, 480, and 225 provide enough support for a responsive design, or should I consider adding more? 768 + | Computer 480 - 768 | Tablet 225 - 480 | Smartphone 225 < | Phone / Mini Browser ...

htmlcss

The challenge with using prepared statements in PHP/MySQL for inserting data into a form

Recently, I encountered an issue with the code below that takes information from a form and sends it to MySQL. Previously, everything was working fine for category, contents, date, and user ID fields. However, after adding a new column called 'secleve ...

phphtmlmysqlsqlforms

Changing the Appearance of the RStudio Editor

I am exploring options to customize an RStudio Editor Theme to personalize the colors. My current setup includes RStudio version 0.99.473 on Windows 10. After reviewing Any way to change colors in Rstudio to something other than default options?, which wa ...

cssthemesrstudioace-editor

Interactive pop-up windows in Bootstrap

I encountered an issue with bootstrap modal forms where the form displays correctly after clicking on the button, but the area in which the form is displayed gets blocked! It's difficult to explain, but you can see the problem by visiting this link. ...

javascriptjqueryhtmltwitter-bootstrap

Challenges with iFrame Resizing on Internet Explorer

After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...

cssinternet-exploreriframeinternet-explorer-8scale

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

htmlcss

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

Incorporate a background image into input fields with Autofill on mobile browsers to override the default yellow background that obscures them

It is common knowledge that modern browsers apply a less than appealing yellow background to text fields when Autofill is used by visitors. A helpful workaround is known to override the default text and background colors, and even incorporate a background ...

htmlcssmobilewebkitautofill

Issue with enlarging images using UL and LI tags persists

After implementing the code for a simple image enlarge feature (showing a QR code image when the user hovers over the icon), I noticed an issue. Interestingly, the same code is used on two designs, but it's not working on one of them. To view the pr ...

htmlcss

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

csslayoutnext.jstailwind-csscss-grid

What's the best way to position menu items vertically in a navbar?

I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...

htmlcsstwitter-bootstrap-3

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to transmit HTML emails

I've been encountering an issue while trying to send HTML emails using Gmail SMTP from CI. It seems that my emails are being rejected if they contain any tables. Interestingly, there is no error message provided; the emails simply do not show up in my ...

phphtmlemailcodeigniter

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

javascripthtmlcssvue.jsnuxt.js

Click on the link within the Checkbox label on MUI

I am working on creating a checkbox for the "Terms of Use," using FormControlLabel to nest a Checkbox. However, I also need to include a link that opens a Dialog component displaying the terms. The challenge is that clicking on the link checks the checkbox ...

javascripthtmlreactjsmaterial-ui

Is there a way to determine the location where my website is fetching CSS and media files from?

After implementing Wagtail on my website, I encountered an issue with the CSS and images not being found when the site was put into production. I have already tried running python manage.py collectstatic and ensured that all of my CSS files are located in ...

csspython-3.xwagtail