Attendance bar at footer page

1

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.

    
asked by anonymous 17.10.2014 / 05:36

1 answer

2

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>
  
    
17.10.2014 / 06:28