Organograma em HTML e CSS
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
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ã
Curtidas 0