DEVHIDE
Login Or Sign up

How can I keep a group of buttons centralized on the right side of the footer?

112 Views Asked by At

I've been trying to keep four buttons centralized on the right side of the footer, but it seems like the footer is set to percentage instead of pixels, I've tried to set it to percentage, but it ignores my "orders", how can I set the footer to 60px, and put the buttons on the right and centralize them vertically, I even have used flexbox, but due to my lack of knowledge on how to use it I have failed several times.

For example if you look my page on full screen, you'll notice that the buttons are not right on the vertical center, and that's what I want to do, the footer is not relevant but if you know how to set the footer to pixel, I will solve the problem of "centralizing" more easily.

If something is missing, comment, and I will provide it, whatever it is.

Thanks in advance.

$(function() {
  $("#btfirst").button({
    icons: {
      primary: "ui-icon-seek-first"
    },
    text: false
  });
  $("#btfirst").css({
    'height': '1.3em',
    'margin': '1px -1px 1px 0px'
  });

  $("#btprev").button({
    icons: {
      primary: "ui-icon-seek-prev"
    },
    text: false
  });
  $("#btprev").css({
    'height': '1.3em',
    'margin': '1px -1px 1px 0px'
  });


  $("#btnext").button({
    icons: {
      primary: "ui-icon-seek-next"
    },
    text: false
  });
  $("#btnext").css({
    'height': '1.3em',
    'margin': '1px -1px 1px 0px'
  });


  $("#btlast").button({
    icons: {
      primary: "ui-icon-seek-end"
    },
    text: false
  });
  $("#btlast").css({
    'height': '1.3em',
    'margin': '1px 1px 1px 0px'
  });

  $("body").css("overflow", "hidden");
});
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@font-face {
  font-family: 'agroverdanab';
  src: url('./fonts/agroverdanab.eot');
  src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');
  font-family: 'agroverdana';
  src: url('./fonts/agroverdana.eot');
  src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}
body {
  float: center;
  border: 1px solid #9BC2E6;
  box-sizing: border-box;
  width: 99.6%;
  height: 99.3%;
  font-family: 'agroverdana';
  font-size: 14px;
  margin: 3px;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto;
  min-width: 100%;
  height: 98%;
  min-height: 95%;
  font-family: 'agroverdana';
  font-size: 16px;
  line-height: 20px;
  padding: 0 0 100px 0;
  text-align: left;
}
.scrollingtable * {
  box-sizing: border-box;
}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid white;
  height: 100%;
  padding-top: 20px;
}
.scrollingtable > div:before {
  top: 0;
  background: #9BC2E6;
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: 0;
  max-height: 100%;
  overflow: scroll;
  overflow-x: hidden;
  border: 1px solid white;
}
.scrollingtable > div > div:after {
  background: white;
}
/*match page background color*/

.scrollingtable > div > div > table {
  width: 100.085%;
  border-spacing: 0;
  margin-top: -20px;
  margin-right: 1px;
}
.scrollingtable > div > div > table > caption {
  font-size: 15px;
  position: absolute;
  top: -20px;
  margin-top: -1px;
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {
  padding: 0;
}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px;
}
.scrollingtable > div > div > table > thead > tr >:first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  border-left: 1px solid #9BC2E6;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * +:before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: black;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {
  content: attr(label);
}
.scrollingtable > div > div > table > thead > tr > * +:before {
  content: "";
  display: block;
  min-height: 20px;
  padding-top: 1px;
  border-left: 2px solid white;
}
.scrollingtable .scrollbarhead {
  float: right;
}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 110px;
  top: 1px;
  background: #9BC2E6;
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid white;
  top: -1px;
}
.scrollingtable > div > div > table > tbody {
  vertical-align: top;
}
.scrollingtable > div > div > table > tbody > tr {
  background: white;
}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid white;
  padding: 0 6px 0 6px;
  height: 20px;
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {
  border-bottom: none;
}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {
  background: #DDEBF7;
}
.scrollingtable > div > div > table > tbody > tr > * + * {
  border-left: 2px solid white;
}
.scrollingtable > div:before {
  top: 0;
  background:
  /*#b4d3ed*/
  #9fc7e8
  /*#9BC2E6*/
  ;
}
.footerButton {
  width: 60px;
  height: 25px;
  margin: 3px 10px 1px 0;
  font-family: 'agroverdana';
  background-color: #D0E5F5;
  border: 1px solid #79B7E7;
  cursor: pointer;
  border-radius: 3px;
}
.footerButton:hover {
  border-width: 2px;
}
.thead_prop,
.tbody_prop {
  font-family: 'agroverdana';
  font-size: 13px;
}
#content {
  left: 1px;
  border-top: solid 1px #9BC2E6;
  border-bottom: solid 1px #9BC2E6;
  flex: 1;
}
#navbar {
  padding: 3px 4px 4px 2px
}
#navbutton {
  float: right;
}
#vpad-pesq {
  float: left;
  border: 2px solid #9BC2E6;
  padding: 1px;
}
#searching {
  font-family: 'agroverdana';
  background-color: #E1F0FD;
  border: 1px solid #C5DBEC;
  border-radius: 3px;
  padding: 2px 1px 0 1px;
}
#searching:hover {
  background-color: #D0E5F5;
  border: 1px solid #79B7E7;
  cursor: pointer;
}
#msgbar {
  border-top: solid 1px #9BC2E6;
  border-bottom: solid 1px #9BC2E6;
  height: 20px;
  background-color: #dae9f6;
}
#footer {
  text-align: right;
  border-top: solid 1px #9BC2E6;
  border-top: 0;
  max-height: 60px;
}
<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html manifest="wpadco.appcache">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>Central de Controle da Engenharia</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>




</head>

<body>
  <header style="padding-bottom:5px;text-align:center; font-family:'agroverdana';font-size:14px;">Central de Controle da Engenharia</header>

  <section id="content">
    <header id="navbar">

      <input type="text" id="vpad-pesq" />
      <select id="searching">
        <option>Código</option>
        <option>Nome</option>
      </select>

      <div id="navbutton">
        <button id="btfirst"></button>
        <button id="btprev"></button>
        <button id="btnext"></button>
        <button id="btlast"></button>
      </div>

    </header>
  </section>


  <div class="scrollingtable">
    <div>
      <div>
        <table>
          <thead>
            <tr>
              <th class="thead_prop">
                <div label="Código"></div>
              </th>
              <th class="thead_prop">
                <div label="Descrição"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor1"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor2"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor3"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor4"></div>
              </th>
              <th class="thead_prop">
                <div label="Valor5"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
            <tr class="tbody_prop">
              <td>001</td>
              <td>coxa c/sobrecoxa s/ osso s/ pele</td>
              <td>1.00</td>
              <td>5.00</td>
              <td>10.00</td>
              <td>10.00</td>
              <td>5.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <section id="msgbar"></section>
    <footer id="footer">
      <button class="footerButton">Salvar</button>
      <button class="footerButton">Alterar</button>
      <button class="footerButton">Excluir</button>
      <button class="footerButton">Voltar</button>
    </footer>
  </div>
</body>

</html>

html css button footer
Original Q&A
2

There are 2 best solutions below

1
On BEST ANSWER

I didn't actually test any of this, but in theory, these are possible solutions.

So as not to mess up the CSS you have working on the set of buttons, Wrap the set of buttons in a div and apply one of these classes to the div.

.footerButtonWrapper {
  margin: auto;
  position: absolute;
  top: 0; bottom: 0; right: 0;
}

and this as an alternate (adjust for row height)

.footerButtonWrapper {
   padding-top: 10px;
   padding-bottom: 10px;
}

And if push comes to shove, as long as the footer row will always be consistent in height, you could try using a simple margin-top or padding-top and "eyeball" center.

1
On

I think I don't understand your problem correct. You want to move buttons to left and center it vertical ? If you want to move buttons in footer to left don't use text-align: right. It move your buttons to right. When you know height of footer - 60px you can use margin-top: 5px to center it vertically.

This is the answer on your questions ?

Related Questions in HTML

Related Questions in CSS

Related Questions in BUTTON

Related Questions in FOOTER

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.