Как адаптировать кнопки?

258
16 сентября 2019, 18:40

Все 6 кнопок "график" съезжают постоянно куда-то как только я меняю размер экрана, все остальное в флекс-боксе нормально остается. Что не так?

    .main-flex-container { 
      display: flex; 
      margin-top: 30px; 
    } 
 
    .flex-container { 
      display: flex; 
      flex-direction: column; 
    } 
 
    .column-reverse { 
      display: flex; 
      flex-direction: column; 
    } 
 
 
    /* отображение блоков ровномерно 
        -------------------- */ 
 
    html { 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0; 
    font-family: helvetica; 
    background: rgba(250, 200, 160, 120); 
} 
 
header { 
    text-align: center; 
    color: #000000; 
    font-size: 20px; 
} 
 
body { 
    padding: 10px; 
} 
/*-----------MENU-------------*/ 
.macmenu { 
    height: 60px; 
    margin-left: 230px 
    /*высота общего блока*/ 
} 
 
.button { 
    margin: 0px auto 0px auto; 
    /*выравнивание блока по центру*/ 
    width: 400px; 
    /*ширина всего блока с меню*/ 
} 
 
.button a img, 
.button a { 
    display: block; 
    float: left; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    height:60px; 
    width: 70px; 
 
} 
 
.button a { 
    margin: 5px 5px; 
    text-align: center; 
    color: #000000; 
    font: normal normal 10px Verdana; 
    text-decoration: none; 
    word-wrap: normal;  /*запрещает автоматически разрывать слова на перенос*/ 
} 
 
.macmenu a:hover img { 
    height: 70px; 
    width: 80px; 
} 
 
.button a:hover { 
    font: normal bold 12px Verdana; 
} 
 
 
.colr { 
    color: #2f2d2d; 
    font-size: 100%; 
    /* Размер шрифта */ 
    border-bottom: 2px solid #000000; 
    /* Параметры линии под текстом */ 
    font-weight: normal; 
    /* Убираем жирное начертание */ 
    padding-bottom: 5px; 
    /* Расстояние от текста до линии */ 
} 
 
.col2 { 
    display: block; 
    width: 600px; 
    padding-top: 10px; 
    margin: 0 auto; 
    text-align: center; 
    color: #2f2d2d; 
    font-size: 80%; 
    /* Размер шрифта */ 
 
} 
.main-flex-container { 
    display: flex; 
    margin-top: 30px; 
     
} 
 
.flex-container { 
    display: flex; 
    flex-direction: column; 
     
} 
 
.column-reverse { 
    display: flex; 
    flex-direction: column; 
     
} 
 
/* отображение блоков ровномерно 
-------------------- */ 
 
.flex-container { 
    margin: auto; 
    width: 45%; 
    padding: 2px; 
    background: rgba(196, 196, 196, 0); 
    border-radius: 10px; 
    justify-content: center; 
 
} 
 
.column-reverse { 
    margin: auto; 
    float: right; 
    width: 45%; 
    padding: 2px; 
    background: rgba(196, 196, 196, 0); 
    border-radius: 10px; 
    justify-content: center; 
} 
 
.flex-item { 
    margin: 5px; 
    height: 220px; 
    padding: 13px; 
    background: rgba(175, 175, 175, 0); 
    border-radius: 5px; 
    border: 1px solid rgba(255, 255, 255, 0); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0); 
} 
.but1{ 
width: 95px; 
height: 12px;     
margin-left: -180px; 
margin-top: 540px;     
text-decoration:none; text-align:center;  
 padding:12px 18px;  
 border:solid 1px #004F72;  
 -webkit-border-radius:4px; 
 -moz-border-radius:4px;  
 border-radius: 4px;  
 font:12px Arial, Helvetica, sans-serif;  
 font-weight:bold;  
 color:#fcfcfc;  
 background-color:#3636e8;  
 background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -ms-linear-gradient(top, #3636e8 0% ,#2c02d4 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4',GradientType=0 );  
 background-image: linear-gradient(top, #3636e8 0% ,#2c02d4 100%);    
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;   
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
z-index: 999;     
   
  }.but1:hover{ 
 padding:11px 18px;  
 border:solid 1px #004F72;  
 -webkit-border-radius:4px; 
 -moz-border-radius:4px;  
 border-radius: 4px;  
 font:12px Arial, Helvetica, sans-serif;  
 font-weight:bold;     
 color:#ffffff;  
 background-color:#3ba4c7;  
 background-image: -moz-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);  
 background-image: -webkit-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);  
 background-image: -o-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);  
 background-image: -ms-linear-gradient(top, #3ba4c7 0% ,#1982a5 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982a5', endColorstr='#1982a5',GradientType=0 );  
 background-image: linear-gradient(top, #3ba4c7 0% ,#1982a5 100%);    
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;   
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
   
 }.but1:active{ 
 padding:11px 18px;  
 border:solid 1px #004F72;  
 -webkit-border-radius:4px; 
 -moz-border-radius:4px;  
 border-radius: 4px;  
 font:12px Arial, Helvetica, sans-serif;  
 font-weight:bold;  
 color:#fcfcfc;  
 background-color:#3636e8;  
 background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -ms-linear-gradient(top, #3636e8 0% ,#2c02d4 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4',GradientType=0 );  
 background-image: linear-gradient(top, #3636e8 0% ,#2c02d4 100%);    
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;   
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
   
 } 
.hbut1{ 
position:fixed;      
width: 95px; 
height: 12px;     
margin-left: 50em; 
margin-top: -1.5em;    
display: inline-block; 
outline: none; 
cursor: pointer; 
vertical-align: middle;     
text-decoration:none; text-align:center;  
 padding:12px 18px;  
 border:solid 1px #004F72;  
 -webkit-border-radius:4px; 
 -moz-border-radius:4px;  
 border-radius: 4px;  
 font:12px Arial, Helvetica, sans-serif;  
 font-weight:bold;  
 color:#fcfcfc;  
 background-color:#3636e8;  
 background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -ms-linear-gradient(top, #3636e8 0% ,#2c02d4 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4',GradientType=0 );  
 background-image: linear-gradient(top, #3636e8 0% ,#2c02d4 100%);    
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;   
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
z-index: 99999;     
   
  }.hbut1:hover{ 
 padding:11px 18px;  
 border:solid 1px #004F72;  
 -webkit-border-radius:4px; 
 -moz-border-radius:4px;  
 border-radius: 4px;  
 font:12px Arial, Helvetica, sans-serif;  
 font-weight:bold;     
 color:#ffffff;  
 background-color:#3ba4c7;  
 background-image: -moz-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);  
 background-image: -webkit-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);  
 background-image: -o-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);  
 background-image: -ms-linear-gradient(top, #3ba4c7 0% ,#1982a5 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982a5', endColorstr='#1982a5',GradientType=0 );  
 background-image: linear-gradient(top, #3ba4c7 0% ,#1982a5 100%);    
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;   
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
 z-index: 99999;        
   
 }.hbut1:active{ 
 padding:11px 18px;  
 border:solid 1px #004F72;  
 -webkit-border-radius:4px; 
 -moz-border-radius:4px;  
 border-radius: 4px;  
 font:12px Arial, Helvetica, sans-serif;  
 font-weight:bold;  
 color:#fcfcfc;  
 background-color:#3636e8;  
 background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%);  
 background-image: -ms-linear-gradient(top, #3636e8 0% ,#2c02d4 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4',GradientType=0 );  
 background-image: linear-gradient(top, #3636e8 0% ,#2c02d4 100%);    
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;   
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
  z-index: 99999;  
 }
<div class="main-flex-container"> 
 
  <!--ГИСТОГРАММ 1--> 
  <div class="flex-container"> 
    <div class="flex-item"> 
      <a href="chart1.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 1--> 
      <div id="gistorgam1" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 1--> 
      <div id="horizontal1" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
 
    </div> 
    <!--END--> 
 
    <div class="flex-item"> 
      <a href="chart2.html" class="hbut1">ГРАФИК</a> 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 2--> 
      <div id="gistorgam2" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 2--> 
      <div id="horizontal2" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
    <div class="flex-item"> 
      <a href="chart3.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 3--> 
      <div id="gistorgam3" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 3--> 
      <div id="horizontal3" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
  </div> 
 
  <div class="column-reverse"> 
    <div class="flex-item"> 
      <a href="chart4.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 4--> 
      <div id="gistorgam4" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 4--> 
      <div id="horizontal4" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
    <div class="flex-item"> 
      <a href="chart5.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 5--> 
      <div id="gistorgam5" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 5--> 
      <div id="horizontal5" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
    <div class="flex-item"> 
      <a href="chart6.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 6--> 
      <div id="gistorgam6" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 4--> 
      <div id="horizontal6" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
  </div> 
</div>

Answer 1

.main-flex-container { 
  display: flex; 
  margin-top: 30px; 
} 
 
.flex-container { 
  display: flex; 
  flex-direction: column; 
} 
 
.column-reverse { 
  display: flex; 
  flex-direction: column; 
} 
 
 
/* отображение блоков ровномерно 
        -------------------- */ 
 
html { 
  max-width: 100%; 
  max-height: 100%; 
  margin: 0; 
  font-family: helvetica; 
  background: rgba(250, 200, 160, 120); 
} 
 
header { 
  text-align: center; 
  color: #000000; 
  font-size: 20px; 
} 
 
body { 
  padding: 10px; 
} 
 
 
/*-----------MENU-------------*/ 
 
.macmenu { 
  height: 60px; 
  margin-left: 230px 
  /*высота общего блока*/ 
} 
 
.button { 
  margin: 0px auto 0px auto; 
  /*выравнивание блока по центру*/ 
  width: 400px; 
  /*ширина всего блока с меню*/ 
} 
 
.button a img, 
.button a { 
  display: block; 
  float: left; 
  -webkit-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  transition: all 0.5s ease; 
  height: 60px; 
  width: 70px; 
} 
 
.button a { 
  margin: 5px 5px; 
  text-align: center; 
  color: #000000; 
  font: normal normal 10px Verdana; 
  text-decoration: none; 
  word-wrap: normal; 
  /*запрещает автоматически разрывать слова на перенос*/ 
} 
 
.macmenu a:hover img { 
  height: 70px; 
  width: 80px; 
} 
 
.button a:hover { 
  font: normal bold 12px Verdana; 
} 
 
.colr { 
  color: #2f2d2d; 
  font-size: 100%; 
  /* Размер шрифта */ 
  border-bottom: 2px solid #000000; 
  /* Параметры линии под текстом */ 
  font-weight: normal; 
  /* Убираем жирное начертание */ 
  padding-bottom: 5px; 
  /* Расстояние от текста до линии */ 
} 
 
.col2 { 
  display: block; 
  width: 600px; 
  padding-top: 10px; 
  margin: 0 auto; 
  text-align: center; 
  color: #2f2d2d; 
  font-size: 80%; 
  /* Размер шрифта */ 
} 
 
.main-flex-container { 
  display: flex; 
  margin-top: 30px; 
} 
 
.flex-container { 
  display: flex; 
  flex-direction: column; 
} 
 
.column-reverse { 
  display: flex; 
  flex-direction: column; 
} 
 
 
/* отображение блоков ровномерно 
-------------------- */ 
 
.flex-container { 
  margin: auto; 
  width: 45%; 
  padding: 2px; 
  background: rgba(196, 196, 196, 0); 
  border-radius: 10px; 
  justify-content: center; 
} 
 
.column-reverse { 
  margin: auto; 
  float: right; 
  width: 45%; 
  padding: 2px; 
  background: rgba(196, 196, 196, 0); 
  border-radius: 10px; 
  justify-content: center; 
} 
 
.flex-item { 
  position: relative; 
  margin: 5px; 
  height: 220px; 
  padding: 13px; 
  background: rgba(175, 175, 175, 0); 
  border-radius: 5px; 
  border: 1px solid; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0); 
} 
 
.but1 { 
  width: 95px; 
  height: 12px; 
  margin-left: -180px; 
  margin-top: 540px; 
  text-decoration: none; 
  text-align: center; 
  padding: 12px 18px; 
  border: solid 1px #004F72; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  font: 12px Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  color: #fcfcfc; 
  background-color: #3636e8; 
  background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -ms-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4', GradientType=0); 
  background-image: linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  z-index: 999; 
} 
 
.but1:hover { 
  padding: 11px 18px; 
  border: solid 1px #004F72; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  font: 12px Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  color: #ffffff; 
  background-color: #3ba4c7; 
  background-image: -moz-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  background-image: -webkit-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  background-image: -o-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  background-image: -ms-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982a5', endColorstr='#1982a5', GradientType=0); 
  background-image: linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
} 
 
.but1:active { 
  padding: 11px 18px; 
  border: solid 1px #004F72; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  font: 12px Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  color: #fcfcfc; 
  background-color: #3636e8; 
  background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -ms-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4', GradientType=0); 
  background-image: linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
} 
 
.hbut1 { 
  position: absolute; 
  width: 95px; 
  height: 12px; 
  right: 5px; 
  display: inline-block; 
  outline: none; 
  cursor: pointer; 
  vertical-align: middle; 
  text-decoration: none; 
  text-align: center; 
  padding: 12px 18px; 
  border: solid 1px #004F72; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  font: 12px Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  color: #fcfcfc; 
  background-color: #3636e8; 
  background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -ms-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4', GradientType=0); 
  background-image: linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  z-index: 99999; 
} 
 
.hbut1:hover { 
  padding: 11px 18px; 
  border: solid 1px #004F72; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  font: 12px Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  color: #ffffff; 
  background-color: #3ba4c7; 
  background-image: -moz-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  background-image: -webkit-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  background-image: -o-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  background-image: -ms-linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982a5', endColorstr='#1982a5', GradientType=0); 
  background-image: linear-gradient(top, #3ba4c7 0%, #1982a5 100%); 
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  z-index: 99999; 
} 
 
.hbut1:active { 
  padding: 11px 18px; 
  border: solid 1px #004F72; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  font: 12px Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  color: #fcfcfc; 
  background-color: #3636e8; 
  background-image: -moz-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -webkit-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -o-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  background-image: -ms-linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c02d4', endColorstr='#2c02d4', GradientType=0); 
  background-image: linear-gradient(top, #3636e8 0%, #2c02d4 100%); 
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
  z-index: 99999; 
}
<div class="main-flex-container"> 
 
  <!--ГИСТОГРАММ 1--> 
  <div class="flex-container"> 
    <div class="flex-item"> 
      <a href="chart1.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 1--> 
      <div id="gistorgam1" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 1--> 
      <div id="horizontal1" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
 
    </div> 
    <!--END--> 
 
    <div class="flex-item"> 
      <a href="chart2.html" class="hbut1">ГРАФИК</a> 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 2--> 
      <div id="gistorgam2" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 2--> 
      <div id="horizontal2" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
    <div class="flex-item"> 
      <a href="chart3.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 3--> 
      <div id="gistorgam3" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 3--> 
      <div id="horizontal3" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
  </div> 
 
  <div class="column-reverse"> 
    <div class="flex-item"> 
      <a href="chart4.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 4--> 
      <div id="gistorgam4" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 4--> 
      <div id="horizontal4" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
    <div class="flex-item"> 
      <a href="chart5.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 5--> 
      <div id="gistorgam5" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 5--> 
      <div id="horizontal5" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
    <div class="flex-item"> 
      <a href="chart6.html" class="hbut1">ГРАФИК</a> 
 
      <!--ВЕРТИКАЛЬНАЯ ГИСТОГРАММ 6--> 
      <div id="gistorgam6" style="min-width: 310px; height: 200px; margin-top:-20px;text-align:center;"></div> 
 
      <!--ГОРИЗОНТАЛЬНЫЙ ГИСТОГРАММ 4--> 
      <div id="horizontal6" style="min-width: 310px; height: 80px; margin-top:-15px;"></div> 
    </div> 
  </div> 
</div>

Как пример, на кнопке поменять fixed на absolute и дать отступ справа

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте web-king.com.ua
ТОП-10
READ ALSO
vertical-align не работает с img
HTML

vertical-align не работает с img

Почему вот такой код, не делает изображения по центру?

 105
Перекрытие ссылок на странице
HTML

Перекрытие ссылок на странице

Я создавал меню используя HTML и CSSНо есть проблема

 138
как создать из обычного событие сетевое [закрыт]
c#

как создать из обычного событие сетевое [закрыт]

когда подключаюсь по сетимой персонаж выпускает ракету а персонаж который подключается не видит как я выпускаю ракету

 148
C# Как разбить строку
c#

C# Как разбить строку

В единственной строке входного файла INPUTTXT записана строка(без пробелов и чего либо еще) длиной от 1 до 50

 129