Jump to content

Pretendo colocar borders em elementos de um rodapé


Joaquim Velez

Recommended Posts

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;
}
Link to comment
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.