Jump to content

Recommended Posts

Boa tarde,

 

Alguem conhece bem de front end? porque estou começando.

 

image.thumb.png.e9f36fd66a2f2029976cfc4cf374eeea.png

 

Meu organograma em css está quebrando, queria deixar ele continuo, sem quebrar, ja tentei colocar overflow-x: auto, e coisas do tipo, mas mesmo assim ele quebra conforme imagem.

 

Estou usando dentro do container-fluid do bootstrap 4, alguem sabe como solucionar?

 

Meu css:

 


<style>


/*#region Organizational Chart*/
.tree * {
    margin: auto; padding: 0px;


}
.tree ul {

    padding-top: 20px; position: relative;
    -transition: all 0.s;
    -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 0px;
    -transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{

    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 2px solid #696969;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #696969;
}
/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 2px solid #696969;
    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;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #696969;
    width: 0; height: 20px;
}
.tree li a{
    height: auto;
    width: auto;
    padding: 5px 10px;
    text-decoration: none;
    background-color: white;
    color: #8b8b8b;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    -transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #cbcbcb; 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;
}

.center {
    margin: auto;
    width: 50%;

    padding: 80px;
}

/*#endregion*/
</style>

 

Um trecho do meu html:

 

<div class="tree">
                                <ul>
                                    <li style="padding: 20px 202px 10px 201px !important">
                                    </a>
                                    <br>
                                    <br>
                                    <a href="#">

                                        <div class="container-fluid">
                                            <div class="flex-row">
                                                <?php
                                                $status = 4;
                                                try {
                                                    $listaSquad=new Organograma();
                                                    $listaSquad->status=$status;
                                                    $resultado=$listaSquad->listarOrganograma($status);    
                                                } catch ( Exception $e ) {
                                                    Erro::trataErro( $e );
                                                }
                                                ?>     

                                                PRODUTO
                                            </div>
                                            <div class="row" style="margin-top: 35px;">
                                                <i class="fa fa-exclamation-circle fa-2x"></i>
                                            </div>

                                        </div>

                                    </a>
                                    <ul>
                                        <li  style="padding: 20px 202px 10px 201px !important">
                                            <a href="#">

                                                <div class="container-fluid">
                                                    <div class="flex-row">        
                                                        DESENVOLVIMENTO
                                                    </div>
                                                    <div class="row" style="margin-top: 35px;">
                                                        <i class="fa fa-exclamation-circle fa-2x"></i>
                                                    </div>
                                                    <div class="row">
                                                        <?php
                                                        $status = 15;
                                                        try {
                                                            $listaSquad=new Organograma();
                                                            $listaSquad->status=$status;
                                                            $resultado=$listaSquad->listarSeresOrganograma($status);    
                                                        } catch ( Exception $e ) {
                                                            Erro::trataErro( $e );
                                                        }
                                                        ?>     
                                                    </div>
                                                </div>

                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

 

 

se alguem puder ajudar, agradeço. valeu

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Webster Moitinho
      Estou usando switch em minha página PHP, e para um dos cases está aparecendo o erro abaixo que eu não consigo identificar
       
      <Error><Code>BlobNotFound</Code><Message>The specified blob does not exist. RequestId:00c4ed11-e01e-0068-2b3a-575edd000000 Time:2019-08-20T09:33:50.2842035Z</Message></Error> Esse case chama o seguinte conteúdo do banco de dados:
      <p align="justify">Ao capacitar o seu <em>staff</em> de maneira satisfat&oacute;ria, a empresa assegura a qualidade do produto final ao cliente, influenciando de maneira significativa os resultados. Atrav&eacute;s da implanta&ccedil;&atilde;o de programas sistem&aacute;ticos de treinamento, pode-se proporcionar a melhoria do produto, al&eacute;m de serem dotados de forte apelo motivacional para a equipe, promovendo o desenvolvimento profissional espont&acirc;nea e naturalmente. &Eacute; comum nas corpora&ccedil;&otilde;es que o colaborador, ap&oacute;s algum tempo de capacita&ccedil;&atilde;o, busque melhores oportunidades no mercado, fazendo com que o empres&aacute;rio perca seu investimento. Todavia, n&atilde;o capacitar tamb&eacute;m tem o seu custo. E &eacute; bastante alto. Da&iacute; a import&acirc;ncia da forma&ccedil;&atilde;o continuada nas empresas, promovendo constantes atualiza&ccedil;&otilde;es e reciclagens dos profissionais.</p> <p align="justify"> <h4 style="text-align:left">Quanto custa n&atilde;o capacitar </h4> <ul style="margin-left: 5px;text-align:left; line-height: 35px; font-family: padrao;"> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Atendimento incompleto ou n&atilde;o compat&iacute;vel com a expectativa da empresa e do cliente.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Perda de neg&oacute;cios.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Insatisfa&ccedil;&atilde;o de clientes.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Redu&ccedil;&atilde;o do valor da marca.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;N&atilde;o cumprimento de metas.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Alto &iacute;ndice de <em>turnover</em>.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Insatisfa&ccedil;&atilde;o do funcion&aacute;rio.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Custos com retrabalho.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Sobrecarga de alguns funcion&aacute;rios (via de regra, aqueles melhores preparados).</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Redu&ccedil;&atilde;o da lucratividade.</li> <li style="font-size:12pt;" ><i class="fa fa-frown fa-fw" style="font-size:18pt; color: #FF0000;"></i> &nbsp;&nbsp;Redu&ccedil;&atilde;o de faturamento.</li> </ul> <h4 style="text-align:left">O que o mercado est&aacute; fazendo para melhorar na gest&atilde;o e formar seus profissionais?</h4> <p style="text-align:left">Segundo estudos realizados pelo <a href="http://www.vistage.com.br/grupos-vistage" title="V&aacute; para o site" target="_blank" class="zloko">Grupo Vistage Brasil</a>:</p> <ul style="margin-left: 5px;text-align:left; line-height: 35px; font-family: padrao;"> <li style="font-size:12pt;" ><i class="fa fa-user-graduate fa-fw" style="font-size:18pt; color: #009900;"></i> &nbsp;&nbsp;Apenas 14&#37; dos executivos brasileiros n&atilde;o tem problemas ao buscar profissionais qualificados.</li> <li style="font-size:12pt;" ><i class="fa fa-user-graduate fa-fw" style="font-size:18pt; color: #009900;"></i> &nbsp;&nbsp;H&aacute; falta de m&atilde;o de obra qualificada para todos os n&iacute;veis de fun&ccedil;&atilde;o.</li> <li style="font-size:12pt;" ><i class="fa fa-user-graduate fa-fw" style="font-size:18pt; color: #009900;"></i> &nbsp;&nbsp;As maiores demandas s&atilde;o para profissionais com forma&ccedil;&atilde;o superior para a &aacute;rea de atua&ccedil;&atilde;o da empresa (65%) e forma&ccedil;&atilde;o t&eacute;cnica (60%).</li> </ul> </p> <p align="justify">Uma pesquisa do Jornal Bom Dia Brasil mostrou onde est&aacute; o emprego nas m&eacute;dias e grandes empresas. S&atilde;o setores onde sobram vagas porque falta qualifica&ccedil;&atilde;o e &aacute;reas onde o curso t&eacute;cnico j&aacute; garante a contrata&ccedil;&atilde;o. O curso t&eacute;cnico &eacute; suficiente para abrir as portas de entrada no mercado de trabalho.<br /> Entre as ind&uacute;strias pesquisadas, 65% reclamam da falta de m&atilde;o de obra especializada. As m&eacute;dias e grandes empresas procuram operadores.</p> <p align="justify">Exatamente o caso dessa empresa de automa&ccedil;&atilde;o de port&otilde;es em Bras&iacute;lia. &ldquo;A gente perde com nossa produtividade. A gente n&atilde;o consegue inovar com frequencia porque as pessoas n&atilde;o conseguem acompanhar essa demanda&rdquo;, afirma a gerente de RH Clara Moreira. <p style="text-align:justify;">A sa&iacute;da das empresas tem sido treinar os empregados: 81% fizeram investimentos em cursos dentro da pr&oacute;pria empresa. O que tamb&eacute;m n&atilde;o &eacute; f&aacute;cil, porque a maioria chega despreparada.</p> <h4 style="text-align:left;">Áreas dos cursos Gopinatha</h4> <br /> <div style="float:left; width:100%;"> <img src="images/colmeia.png" id="map-image" style="width: 480px; max-width: 100%; height: auto;" alt="" usemap="#cursos" /> <map name="cursos"> <area href="detalhe.php?id=200&gr=desh" alt="Desenvolvimento Humano" title="Desenvolvimento Humano" shape="poly" coords="176, 351, 258, 300, 345, 345, 348, 448, 262, 498, 184, 442" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cdes.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=info" alt="Informática" title="Informática" shape="poly" coords="431, 199, 517, 149, 599, 199, 598, 306, 514, 350, 431, 301" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cinf.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=gestao" alt="Gestão Avançada" title="Gestão Avançada" shape="poly" coords="262, 197, 347, 150, 430, 200, 430, 300, 344, 345, 258, 300" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cgest.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=contabil" alt="Contabilidade e Tributos" title="Contabilidade e Tributos" shape="poly" coords="90, 202, 178, 153, 262, 199, 260, 302, 177, 352, 92, 299" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/ccont.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=seguranca" alt="Segurança da Informação" title="Segurança da Informação" shape="poly" coords="345, 54, 428, 0, 515, 54, 516, 150, 430, 201, 345, 151" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/cseg.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=201&gr=sistemas&ant=32" alt="Sistemas de Informação" title="Sistemas de Informação" shape="poly" coords="174, 49, 259, 1, 347, 56, 346, 152, 261, 199, 178, 153" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/csist.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> <area href="detalhe.php?id=200&gr=coaching" alt="Coaching" title="Coaching" shape="poly" coords="6, 49, 91, 2, 176, 50, 178, 153, 89, 202, 4, 146" style="outline:none;" target="_self" onmouseover="if(document.images) document.getElementById('map-image').src= 'images/ccoach.png';" onmouseout="if(document.images) document.getElementById('map-image').src= 'images/colmeia.png';" /> </map> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.js"></script> <script>$(document).ready(function(e){$("map").imageMapResize();});</script> </div>  
    • By manoaj
      Boa tarde pessoal!
      Criei um sistema simples pra web utilizando PHP no backand.
      Mas agora antes do lançamento do sistema surgiu a necessidade de um app de consulta a esse sistema com funções básicas da plataforma Web, ou seja nem todas as funcionalidades serão implementadas no app agora no início.
      Qual a minha melhor alternativa no desenvolvimento híbrido hj em questão de agilidade no desenvolvimento considerando que minha plataforma web e o banco de dados mysql já estão prontos???
    • By adolfo-moro
      Tenho um sistema feito em C# em Windows Form, gostaria de saber se tem algum jeito Do sistema abrir o navegador padrão do sistema Operacional, direcionar para meu site onde terá uma tela de login, a pessoa efetua o login e quando o mesmo for validado, o navegador fechar e voltar para o sistema com o valor do cookie gerado pelo site ou com um código do login, para efetuar posteriores operações por webservice.
      Não seria utilizando o WebBrowser
    • By Kauê Fucherberger Bonfá
      eu estou tentando fazer um programa que mostra qual produto vale mais a pena mas eu fiz um if falando que quando o preço e a quantidade dos produtos são iguais a frase "os produtos sao iguais" aparece mas por algum motivo o if não está funcionando.
      <div id="produto1"> <div><input type="number" id="preco1" placeholder="preco"></div> <div><input type="number" id="quantidade1" placeholder="quantidade"></div> </div> <div id="produto2"> <div><input type="number" id="preco2" placeholder="preco"></div> <div><input type="number" id="quantidade2" placeholder="quantidade"></div> </div> <div><button onclick="calcular()">calcular</button></div> <div><p>resultado:<a id="resultado"></a></p></div> <script> function calcular() { var q1 = document.getElementById('quantidade1').value var p1 = document.getElementById('preco1').value var q2 = document.getElementById('quantidade2').value var p2 = document.getElementById('preco2').value if (p1 == p2 && q1 == q2) { document.getElementById('resultado').innerText = 'Os produtos são iguais' } } </script> Não coloquei o codigo inteiro mas acho que assim da pra entender
    • By geivisonsales
      Tenho um site sobre conteudos de entretenimento, e todos os posts tem uma imagem de fundo do tmdb, tem alguma maneira de otimizar o carregamento dessas imagens por url? ou alguma outra maneira?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.