How can I create or customize a bar like from this site that is in the footer with several service options:
This light blue bar with the help options in the footer.
How can I create or customize a bar like from this site that is in the footer with several service options:
This light blue bar with the help options in the footer.
Here's a ready recipe (not optimized for older browsers):
html,body {
position:relative;
padding:0;
margin:0;
min-width:100%;
min-height:100%
}
#pagina {
padding-bottom:60px;
}
#barra {
position:fixed;
bottom:0;
padding:0;
width:100%;
height:60px;
bottom:0px;
background-color:#079;
}
#promo, .botao {
font: normal 30px/58px Impact, Charcoal, sans-serif;
}
#promo {
float:left;
width:50%;
height:60px;
border-right:1px solid #068;
padding: 0 20px;
text-align:right;
color: #fff;
}
.botao {
display:block;
float:left;
width:58px;
height:60px;
border-left:1px solid #09B;
border-right:1px solid #068;
text-align:center;
}
.botao:hover {background-color:#ccc}
<div id="pagina">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</div>
<div id="barra">
<div id="promo">Batatinhas!</div>
<a class="botao">1</a>
<a class="botao">2</a>
<a class="botao">3</a>
</div>