Ir para conteúdo

higordiasz

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    2

  • Registro em

  • Última visita

Posts postados por higordiasz

  1. Postado

    Opa ... eu consegui arrumar trocando as DIV por table ... segue o meu codigo .. caso possa ajudar alguem.

     

    HTML 

    <table class="tabela">
                <tr>
                    <th>
                        <ul class="ul-softwares">
                            <li class="li-img"><img src="./img/programacao.png"></li>
                            <li>
                                <h1 class="title-ul">Softwares</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Possuimos diversos Softwares
                                    para a sua empresa.</p>
                            </li class="li-p">
                            <li class="li-bt"><button class="bt-geral bt-prog">Saiba Mais</button></li class="li-bt">
                        </ul>
                    </th>
                    <th>
                        <ul class="ul-bancodedados">
                            <li class="li-img"><img src="./img/bancodedados.png"></li>
                            <li>
                                <h1 class="title-ul">Banco de Dados</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Organimazanos todos seus dados e
                                    configuramos oque precisa.</p>
                            </li class="li-p">
                            <li class="li-bt"><button class="bt-geral bt-bd">Saiba Mais</button></li class="li-bt">
                        </ul>
                    </th>
                    <th>
                        <ul class="ul-mobile">
                            <li class="li-img"><img src="./img/mobile.png"></li>
                            <li>
                                <h1 class="title-ul">Desenvol. Mobile</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Fazemos o aplicativo ideal para a sua Empresa.</p>
                            </li class="li-p">
                            <li class="li-bt"><button class="bt-geral bt-mobile">Saiba Mais</button></li class="li-bt">
                        </ul>
                    </th>
                    <th>
                        <ul class="ul-redeestruturada">
                            <li class="li-img"><img src="./img/rede.png"></li>
                            <li>
                                <h1 class="title-ul">Estrutura de Rede</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Fazemos toda o mapiamento da
                                    rede e implantação.</p>
                            </li>
                            <li class="li-bt"><button class="bt-geral bt-rede">Saiba Mais</button></li>
                        </ul>
                    </th>
                </tr>
            </table>

    CSS :  

    .ul-softwares {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: left;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-bancodedados {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-mobile {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-redeestruturada {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: right;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.principal-text ul li {
    margin: auto;
    text-align: center;
}

.uls-principal table {
    text-align: center;
    align-content: center;
}

.li-img {
    padding-top: 6px;
}

.tabela tr th {
    padding-left: 10px;
    width: 180px;
    text-align: center;
}

.tabela tbody {
    align-self: center;
    text-align: center;
}

.tabela {
    width: 100%;
    margin: 0 auto;
}

.title-ul {
    color: #00bac6;
    font-size: 25px;
}

.text-ul {
    color: #ffffff;
}

.bt-geral {
    vertical-align: bottom;
    margin-top: 15%;
    border: 1px solid #00bac6;
    border-radius: 15px;
    color: #ffffff;
    background-color: #373737;
    padding: 4px;
}

.bt-geral:hover {
    background-color: #00bac6;
    color: black;
    border: 1px solid #000000;
    cursor: pointer;
}

.li-bt {
    height: 20%;
}

.li-p {
    height: 20%;
}

    Resultado:

     

    Screenshot_5.thumb.jpg.2d66a4ee92ca54f1f59f6a98305d4811.jpg

     

    Acrescentei no button que quando acontece o hover ele muda a cor do background da letra e da borda. E deixei a classe separada para cada button para poder pegar no JS caso necessario. caso alguem queira melhorar o codigo, ficaria agradecido. E nois.

  2. Postado

    Boa Tarde,

    Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.

     

    Segue meu código CSS responsável pelas div.

      

    .col-100 {
    width: 100%;
    float: left;
    position: relative;
}

.principal-text {
    background-color: #424242;
}

.ul-softwares {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: left;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-bancodedados {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-mobile {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-redeestruturada {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: right;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.principal-text ul li {
    margin: auto;
    text-align: center;
}

.uls-principal {
    text-align: center;
}

.li-img {
    padding-top: 6px;
}

.uls-principal div {
    display: inline-block;
    width: 180;
    padding-right: 20px;
}

    Abaixo meu código HTML:

      

    <div class="col-100 principal-text">
        <main class="uls-principal">
            <div class="div-prog">
                <ul class="ul-softwares">
                    <li class="li-img"><img src="./img/programacao.png"></li>
                    <li>
                        <h1>Softwares</h1>
                    </li>
                    <li>
                        <p>Possuimos diversos Softwares
                            para a sua empresa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-bd">
                <ul class="ul-bancodedados">
                    <li class="li-img"><img src="./img/bancodedados.png"></li>
                    <li>
                        <h1>Banco de Dados</h1>
                    </li>
                    <li>
                        <p>Organimazanos todos seus dados e
                            configuramos oque precisa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-mobile">
                <ul class="ul-mobile">
                    <li class="li-img"><img src="./img/mobile.png"></li>
                    <li>
                        <h1>Desenvol. Mobile</h1>
                    </li>
                    <li>
                        <p>Fazemos o aplicativo ideal para a sua Empresa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-rede">
                <ul class="ul-redeestruturada">
                    <li class="li-img"><img src="./img/rede.png"></li>
                    <li>
                        <h1>Estrutura de Rede</h1>
                    </li>
                    <li>
                        <p>Fazemos toda o mapiamento da
                            rede e implantação.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
        </main>
    </div>

    Print das DIV: 

     

    Screenshot_4.thumb.jpg.5ac8d181e07f3ca008a5f86e6cadfc6c.jpg

     

    Alguem sabe oq posso alterar para alinhar elas corretamente ? 

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito