designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. Below is the code snippet I am currently working with:

* {margin: 0; padding: 0;}

.tree ul {
    padding-top: 20px; position: relative;
    transition: all 0.5s;
}
.tree ul ul ul::before {
    content: '';
    position: absolute; left: 50%; bottom: -20px;
    border-left: 1px solid #ccc;
    height: 20px;
}

... (Code continuation)


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
... (Script references omitted for brevity) ...       
        
<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            ... (Structure of child and grandchild nodes)
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Desired Layout: I aim to create an organization chart where the parent node connects to a child node and has three horizontal grandchild nodes. The middle grandchild should be vertically connected to the child. Please refer to this https://i.stack.imgur.com/VQbXB.pnghttps://i.stack.imgur.com/deMxf.png image for clarity.

Challenge: Despite several attempts to tweak the existing code, I struggle with properly aligning the grandchild nodes as intended in the layout description.

Question: Seeking guidance on how to modify the code effectively to achieve the desired organizational chart layout. Specifically, I need help connecting the three grandchild nodes horizontally while ensuring the vertical connection between the middle grandchild and child nodes.

Your insights and assistance are highly appreciated. Thank you!

htmlcssbootstrap-4responsive-design

Answer №1

Here is a solution that enhances the responsiveness of chart versions:

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

/*Removing left-right connectors from elements without siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Making the top space zero for single children*/
.tree li:only-child{ padding-top: 0;}


/*Adding downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0;
    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 element's lineage as well*/
.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;
}

.tree ul ul ul ul li a {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border: 1px solid #ccc;
    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;
    text-orientation: mixed !important;
    white-space: nowrap; /* Prevent text from wrapping */
    
    writing-mode: vertical-rl; /* Vertical orientation */
}



.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}
.tree ul ul ul::before {
    content: '';
    position: absolute; left: 50%; bottom: -20px;
    border-left: 1px solid #ccc;
    height: 20px;
}
/*Remove left connector from first child and 
  right con...

@media (max-width: 600px) {
    .tree ul ul ul ul li a {
        writing-mode: horizontal-tb;
    }

    .tree ul ul ul {
        padding-top : 0;
    }

    .tree > ul > li > ul > li > ul > li {
        padding: 0 0 0 20px;
        display: flex;
        align-items: center;
        clear: left;
        position: relative;
        left: 50%;
    }
    .tree > ul > li > ul > li > ul > li::before {
        ...

    .tree > ul > li > ul > li > ul > li:last-child::before {
        ...

    .tree > ul > li > ul > li > ul > li > a {
        writing-mode: vertical-rl;
    }


    .tree ul ul ul li::before {
        ...
    }
    .tree ul ul ul li:last-child::before {
        ...
    }
    .tree ul ul ul li::after {
        ...
    }

    .tree ul ul ul ul {
        ...
    }

    .tree ul ul ul ul::before {
        ...
    }

    .tree ul ul ul ul li {
        ...
    }

    .tree ul ul ul ul li:first-child::before,
    .tree ul ul ul li:last-child::after {
        ...
    }
}
<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer №2

Give this CSS a shot:

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

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

/*Hiding left-right connectors from elements without siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Removing space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Adding downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0;
    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*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.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;
}

/*Styles for nested items*/
.tree ul ul ul ul li a {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border: 1px solid #ccc;
    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;
    text-orientation: mixed !important;
    white-space: nowrap; 
}



.tree ul ul ul {
    padding-top : 0;
}

.tree > ul > li > ul > li > ul > li {
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    clear: left;
    position: relative;
    left: 50%;
}
.tree > ul > li > ul > li > ul > li::before {
    height: 100%;
}
.tree > ul > li > ul > li > ul > li:last-child::before {
    height: 50%;
}

.tree > ul > li > ul > li > ul > li > a {
    writing-mode: vertical-rl;
}


.tree ul ul ul li::before {
    width: 20px;
    left: 0;
    border-left: 1px solid #ccc;
    border-top: none;
}
.tree ul ul ul li:last-child::before {
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
}
.tree ul ul ul li::after {
    width: 20px;
    top: 50%;
    left: 0;
    border-left: 1px solid #ccc;
}

.tree ul ul ul ul {
    display: inline-block;
    padding: 0 0 0 20px;
}

.tree ul ul ul ul::before {
    border-left: none;
    border-top: 1px solid #ccc;
    width: 20px;
    left: 0;
    top: 50%;
}

.tree ul ul ul ul li {
    float: none;
    padding: 5px 0 5px 20px;
}

.tree ul ul ul ul li:first-child::before,
.tree ul ul ul li:last-child::after {
    border: 0 none;
}
.tree ul ul ul ul li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
          </ul>
        </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

Adjust Title Padding Specifically for Mobile Devices

When viewing my blog page on mobile, I noticed that the titles of my blog posts are overlapping with the teasers. To fix this issue, I attempted to add margins to the bottom of the post titles specifically for mobile: https://i.stack.imgur.com/BHi3C.png H ...

htmlcssblogs

Clicking on the images will display full page versions

Apologies for not making an attempt just yet, but I'm struggling to locate what I need. Here's the menu structure in question: <div class="overlay-navigation"> <nav role="navigation"> <ul class="test"> & ...

jqueryhtmlcss

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...

javascriptjqueryhtmlcssangularjs

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

javascripthtmlvue.jsconditional-operator

Issues with Adding Dynamic Rows to MySQL

Struggling with adding dynamic rows and posting to MySQL. The variables seem off, but the script works fine. Need help with MYSQL posting specifically. As a beginner, I seek your forgiveness... The Script is running smoothly! <script type='text/ ...

javascriptphphtmlmysql

What is the best method to update the content of one div with content from another page using AJAX?

Having trouble achieving smoother page loads? My goal is to utilize AJAX to specifically fetch a certain div from another page and then swap out the content of a div on this current page with the response. Below is my JavaScript script that uses AJAX to r ...

javascripthtmljqueryajax

Setting an error state on the parent div of a checkbox

I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...

jquerycsscheckbox

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

I need assistance with a panel feature on my website. The panel should expand when the "+" symbol is clicked, displaying the panel body, and the "+" symbol should change to "-" indicating it can be collapsed by clicking it again. There is a slight twist t ...

javascriptjqueryhtmlcss

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

css

Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created: <ul accept=" ...

javascripthtmlcssdojodrag-and-drop

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

failure of svg spinning

I'm currently working with an SVG file and attempting to incorporate a spinning animation similar to loaders and spinners. However, I am facing an issue where the rotating radius is too large and I am struggling to control it effectively. CSS: .image ...

javascripthtmlsvg

The eot file converted online is not functioning as expected

I have tried converting the 'Helvetica Neue Bold' ttf to eot online, but unfortunately it does not seem to work in IE8 and below. The font face I used is as follows: @font-face { font-family: 'HelveticaNeueBold'; src: url(&apo ...

htmlcssfont-face

Creating smooth and natural movement of a div element using Javascript (rotating and moving)

After struggling to use jquery plugins for smooth motion with the div elements I'm working on, I've decided it's time to seek some assistance. I have a group of div elements that all share a class and I want them to move around the screen c ...

javascriptjqueryhtmlcss

Content in a div with a transparency level set at 50%

Within a div container, I currently have text displayed. The challenge that I'm facing is that the container itself has an opacity of 0.5, and I would like the text to be fully visible with an opacity of 1. Unfortunately, due to the constraints of th ...

csshtmlopacity

Formulate a multi-line string using a collection in React's JavaScript framework

I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...

javascripthtmlreactjstypescript

Dynamic content alongside a stationary sidebar that adjusts in width

Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources. The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length. ...

htmlcsstwitter-bootstrapcss-positionsidebar

Using jquery to update a link when a different link is clicked

Recently, I've started using JQuery and encountered a challenge. When I click on the first link, an Ajax request is sent to the server and data is received successfully. However, in the callback function, I'm struggling to change the display text ...

javascriptjqueryhtmljquery-selectors

Printing with tiled SVG background images

Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing ...

csssvgbackground-image

Ways to access the scrollTop attribute during active user scrolling

I've been working on a website that utilizes AJAX to keep a chat section updated in real-time. One issue I encountered was ensuring the chat automatically scrolled to the bottom when a user sent a message, but remained scrollable while new messages we ...

javascriptjqueryhtmlajax