Jump to content
Joaquim Velez

Pretendo colocar borders em elementos de um rodapé

Recommended Posts

Joaquim Velez

Boa tarde pessoal,

Mais uma vez vos peço ajuda, pois estou a iniciar-me como programador web e as mais simples execuções por vezes tornam-se complicadas.

Então é assim eu tenho um rodapé com o seguinte código:

<div class="row">        
            <div class="footer">
                <footer id="bottom" >
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <ul >
                            <li class="">
                                <span class="texto_article_text">"Texto".</span>
                            </li>                        
                            <li class=" border">
                                <span class="texto_link"><a href="#" class="active">PT </a>/<a href="#"> EN</a></span>
                            </li>                        
                            <li class="border">
                                <span class="face-link "><a href="#"><img src="img/icons/icon_facebook.png" ></a></span>
                            </li>
                            <li class="border">
                                <p class="texto_article_projetos ">"Texto" <span class="laranja">"Texto"</span><span class="glyphicon glyphicon-triangle-right"></span></p>
                            </li>
                            <li class="navbar-right texto_aside_empresa ">
                                <span>"TEXTO"</span><span class="texto_aside"><a href=""><strong>"Texto".</strong></a></span>
                            </li>
                        </ul>
                    </div>    
                </footer>
            </div>
        </div>

O que eu pretendia, e não estou a conseguir é o seguinte:

- nas li onde tem a class border pertendo que a border seja de alto a baixo do rodapé.

Com este código ela, border, ocupa somente apenas altura das letras.

A seguir envio o css que eu fiz:

.border{
    border-left: 2px solid #fff;
}

footer{    
    padding-left: 30px;    
    padding-right: 30px;    
}
footer .border{
    border-left: 3px solid #000;
}
#bottom ul{
    padding-top: 10px;
    list-style:none;

}
#bottom ul li{
    display: inline;
    padding: 0
}
#bottom ul li span{    
    display: inline-block;
}
#bottom ul li p{
    display: inline-block;;
}

.footer{    
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;    
    clear: both;
    padding: 0px;
    font-family: 'akrobatbold';
    font-size: 14px;
    color: #999;
    background-color: #222;
}
li .texto_article_text{
    margin-top: 10px;
    margin-right: 50px;
    margin-left: 25px;
}
li .texto_article_projetos{
    margin-left: 40px;
}
li .texto_link{
    margin-left: 40px;
    margin-right: 40px;
}
li .face-link img{
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 6px
}
li .texto_aside{
    margin-right: 25px
}
.footer a{
    color: #fff;
}
.laranja{
    color: rgb(174, 90, 0)
}
.texto_article,
.texto_link{
    line-height: 0px;
}
.texto_aside a,
.texto_aside {
    text-align: right;
    margin-top: 10px;
}
.texto_aside_empresa a{
    font-family: 'akrobatblack';    
}
a:hover{
    text-decoration: none;
    color: #999;
}
a:active{
    text-decoration: none;
    color: #fff;
}

 

Share this post


Link to post
Share on other sites
13dev

Olá!, possível ideia:

- cria dentro da class border

<span class="separador">|</span>

e atribui todo o css para que fique a tua maneira:

possível erro:

troca

display:inline;

por:

display: inline-block;

Porque cada um é um 'bloco'

---

13dev

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

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.