Service bar at the bottom of the page

Question

Service bar at the bottom of the page

Asked 10 years, 2 months ago

Viewed 416 times

1

How can I create or customize a bar like of this website that is in the footer with several service options:

This light blue bar with the service options in the footer.

When opening the page, use the right button, and the option "display source code", has everything there. (depending on the browser, this option may be in some sub-item of the browser’s main menu, but in general is an option similar to that)

– Bacco

2014/10/17 at 03:41
2

Being still that when you put the mouse on top displaces 1px the text.. This gives me an agony that you do not imagine. If you do equal please correct.

– HiHello

2014/10/17 at 03:47
1

@Zebradomal so much better than here. It looks like Jell-O when I give mouseover, there’s something that walks 2px, there’s something that walks 1, depending on the place.

– Bacco

2014/10/17 at 03:51
1

@Paulonunes Ah, one more idea, use CSS instead of table, how it was used on that site.

– Bacco

2014/10/17 at 03:53

1 answer

Browser other questions tagged html css rolling

You are not signed in. Login or sign up in order to post.

by Bacco • **93,720** points · Answer 1 · 2014-10-17T04:28:59+00:00

Follow recipe ready (not optimized for browsers older):

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>