Attendance bar at footer page

Question

Attendance bar at footer page

Navigation

#1 by (2 votes)

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.

html css rolamento

asked by anonymous 17.10.2014 / 05:36

1 answer

Error in placement of divs View condition does not work

score 2 · Answer 1

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>