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;
}
↧