Organograma em HTML e CSS

21/10/2019

Ol�! Preciso de ajuda.
Tenho que fazer um organograma horizontal para a empresa que trabalho, utilizando HTML e CSS por�m estou tendo problemas.
Tenho dificuldade em fazer as linhas que fazem as conex�es com as caixas.

Segue exemplo abaixo. ou no GitHub: https://github.com/lisboar/Organograma_Messem

<html>
    <head>
    <link href="style.css" rel="stylesheet">
    <meta charset="UTF-8">
    </head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">
            <div class="tree">
                <ul>
                    <li style="position: absolute; left:0; top:2px; background-color:lightcoral;" >
                            <a href="#" style="position:absolute; top: 50%; transform:translateY(-30%);z-index:1;">
                                01234567890123456
                            </a>
                        <ul>
                            <li style="position:relative; background-color: thistle;">
                                <a href="#" style="position:absolute; top: 50%; transform:translateY(-30%);">
                                    Head
                                </a>
                                <ul style="position:relative; left:175;">
                                    <li>
                                        <a href="#">
                                            Colaborador 1.1
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            
                            <li style="position: relative; background-color: wheat;">
                                <a href="#" style="position:absolute; top: 50%; transform:translateY(-30%);">
                                    Head
                                </a>
                                <ul style="position:relative; left:175;">
                                    <li>
                                        <a href="#">
                                            Colaborador 2.1
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            Colaborador 2.2
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li style="position:relative;">
                                <a href="#" style="position:absolute; top: 50%;  transform:translateY(-30%);">
                                    Head
                                </a>
                                <ul style="position:relative; left:175;">
                                    <li>
                                        <a href="#">
                                            Colaborador 3.1
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            Colaborador 3.2 
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            Colaborador 3.3
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li style="position:relative;">
                                <a href="#" style="position:absolute; top: 50%; transform:translateY(-30%);">
                                    Head
                                </a>
                                <ul style="position:relative; left:175;">
                                    <li>
                                        <a href="#">
                                            Colaborador 4.1
                                        </a>
                                    </li>
                                    <li>

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css);

/* Posi��o e espa�amento de todos os elementos do organograma*/
.tree * {
    margin: 0; padding: 0;
}

/* Espa�amento da caixa at� a forquilha */
.tree ul {
    padding-top:10px;
    position: relative;

    /* -transition: all 1.0s;
    -webkit-transition: all 1.0s;
    -moz-transition: all 1.0s; */
}

/* Configura as caixas de texto */
.tree li {
    text-align: initial;
    list-style-type: none;
    padding: 2.5px 0px 4px 0px;
    left: ;
    
    /* -transition: all 1.0s;
    -webkit-transition: all 1.0s;
    -moz-transition: all 1.0s; */
}

/* Configura as caixas com as informa��es das hierarquias */
    .tree li a{
        height: 30px;
        width: 125px;
        padding: 5px 10px;
        text-decoration: none;
        background-color: rgb(255, 255, 255);
        color: #8b8b8b;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;  
        box-shadow: 0 1px 7px rgba(0,0,0,0.1);

        /* -transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s; */
    }

/* Respons�vel por mudar a cor ao passar o mouse em cima da caixa */
.tree li a:hover, .tree li a:hover+ul li a {
    background: #dce2ec; color: #000;
}
/*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;
}

ul>li{
    left: 175px;
}


/* ------------------------------------------------------------------------------------------------------------------------ */

/* Conector que sai do s�cio; tamb�m respons�vel pelos li filhos */
.tree li::after{ 
    content: '';
    position: absolute; 
    top: 50.5%; 
    left: 100%;
    width: 25px; 
    height: 5px;
    border-bottom: 2px solid #cbcbcb;
}

/* Oculta o conector que sai dos ultimos filhos do s�cio */
.tree li li li::after{ 
    content: '';
    display: none;
}

/* Conectores a esquerda do head */
.tree li li::before{
    content: '';
    position: absolute;
    left: -25px;
    width: 25px; 
    height: 52%;
    border-bottom: 1.5px solid #cbcbcb;
    border-left: 1.5px solid #cbcbcb;
}
.tree li li:first-child::before{
    border: 0 none;
}

/* conectores a direita do head */
.tree li li::after{
    content: '';
    position: absolute;
    width: 26px; 
    border-bottom: 1.5px solid #cbcbcb;
}

/* conectores a esquerda do colaborador */
.tree li li li::before{
    content: '';
    position: absolute;
    left: -25px;
    width: 25px; 
    height: 17px;
    border-bottom: 1.5px solid  #cbcbcb;
}

/* --------------------------------------------------------------------------------------------------------------------------- */

.tree li li:first-of-type::before{
    content: "";
    position: absolute;
    border-top: 1.5px solid  #cbcbcb;
    border-left: 1.5px solid #cbcbcb;
    border-bottom: 0;
    left:-25px; top: 51.5%;
    width: 25px;
    height: 100%;
}.tree li li li:first-child::before{
    border: 0 none;
}


.tree li li li:first-of-type:first-child::before{
    content: "";
    position: absolute;
    /* border-top: 1.5px solid  #5297ff; */
    /* border-left: 1.5px solid #5297ff; */
    border-bottom: 0;
    left:-25px; top: 50%;
    width: 25px;
    height: 50%;
}

.tree ul ul li::before{
    content: "";
    position: absolute;
    border-left: 1.5px solid #cbcbcb;
    background-color: red;
}

Thain�

Curtir t�pico + 0

Responder