Service bar at the bottom of the page

Asked

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:

snapshot do site

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

html css rolling

  • 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)

  • 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.

  • 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.

  • 1

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

1 answer

2

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>

  • 1

    :D Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Phasellus ipsum Velit, auctor et sapien quis, fermentum consequat Tellus. Sed aliquam non quam bibendum mollis. Donec accumsan ornare augue, nec iaculis eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vel leo eros. Donec eget vehicula nunc, id eleifend neque. Cras Fringilla porta sapien in Commodo. Vestibulum placerat nibh massa, et varius lacus volutpat vel. Vestibulum dictum aliquam vestibulum. Morbi lobortis tincidunt interdum. Cras ornare ut Tellus at dignissim.

Browser other questions tagged html css rolling

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