Выровнять div блоки

229
30 августа 2018, 13:40

@media only screen and (min-width: 480px) { 
  html { 
    background: url(https://oboi.ws/filters/earlybird_17_9338_oboi_temnyj_fon_1920x1080.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    overflow: hidden; 
  } 
  * { 
    padding: 0; 
    margin: 0; 
  } 
  body { 
    height: 100%; 
  } 
  #panel { 
    width: 30em; 
    height: 35em; 
    border-color: #83ff79; 
    border-style: double; 
    border-width: 5px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 30px; 
    -webkit-box-shadow: 0 0 10px black; 
    -moz-box-shadow: 0 0 10px black; 
    box-shadow: 0 0 50px #68ffae; 
    background: rgba(205, 208, 206, 0.6); 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    top: 200px; 
  } 
  #panel #res_name { 
    padding-top: 40px; 
    text-align: center; 
    width: 100%; 
    font-family: 'Fjalla One', sans-serif; 
    height: 130px; 
    color: #ffffff; 
    font-size: 40px; 
  } 
  /*КНОПКА*/ 
  #test1 { 
    position: absolute; 
    margin-top: -80px; 
    margin-left: -57px; 
    height: 50px; 
    width: 180px; 
    -webkit-border-radius: 6; 
    -moz-border-radius: 6; 
    border-radius: 6px; 
    -webkit-box-shadow: 2px 2px 3px #666666; 
    -moz-box-shadow: 2px 2px 3px #666666; 
    box-shadow: 2px 2px 3px #666666; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 30px; 
    background: #a0a0a0; 
    padding: 10px 20px 10px 20px; 
    border: solid #808080 2px; 
    text-decoration: none; 
    ; 
  } 
  #result1 { 
    position: relative; 
    font-size: 30px; 
    left: 150px; 
    top: -70px; 
    display: inline-block; 
    z-index: 0; 
  } 
  #test2 { 
    position: absolute; 
    margin-top: -10px; 
    margin-left: -76px; 
    height: 50px; 
    width: 180px; 
    -webkit-border-radius: 6; 
    -moz-border-radius: 6; 
    border-radius: 6px; 
    -webkit-box-shadow: 2px 2px 3px #666666; 
    -moz-box-shadow: 2px 2px 3px #666666; 
    box-shadow: 2px 2px 3px #666666; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 30px; 
    background: #a0a0a0; 
    padding: 10px 20px 10px 20px; 
    border: solid #808080 2px; 
    text-decoration: none; 
    ; 
  } 
  #result2 { 
    position: relative; 
    font-size: 30px; 
    left: 132px; 
    top: -3px; 
    display: inline-block; 
    z-index: 0; 
  } 
  #test3 { 
    position: absolute; 
    margin-top: 60px; 
    margin-left: -95px; 
    height: 50px; 
    width: 180px; 
    -webkit-border-radius: 6; 
    -moz-border-radius: 6; 
    border-radius: 6px; 
    -webkit-box-shadow: 2px 2px 3px #666666; 
    -moz-box-shadow: 2px 2px 3px #666666; 
    box-shadow: 2px 2px 3px #666666; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 30px; 
    background: #a0a0a0; 
    padding: 10px 20px 10px 20px; 
    border: solid #808080 2px; 
    text-decoration: none; 
    ; 
  } 
  #result3 { 
    position: relative; 
    font-size: 30px; 
    left: 113px; 
    top: 70px; 
    display: inline-block; 
    z-index: 0; 
  } 
  #test4 { 
    position: absolute; 
    margin-top: 130px; 
    margin-left: -114px; 
    height: 50px; 
    width: 180px; 
    -webkit-border-radius: 6; 
    -moz-border-radius: 6; 
    border-radius: 6px; 
    -webkit-box-shadow: 2px 2px 3px #666666; 
    -moz-box-shadow: 2px 2px 3px #666666; 
    box-shadow: 2px 2px 3px #666666; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 30px; 
    background: #a0a0a0; 
    padding: 10px 20px 10px 20px; 
    border: solid #808080 2px; 
    text-decoration: none; 
  } 
  #result4 { 
    position: relative; 
    font-size: 30px; 
    left: 95px; 
    top: 135px; 
    display: inline-block; 
    z-index: 0; 
  } 
  #test5 { 
    position: absolute; 
    margin-top: 200px; 
    margin-left: -129px; 
    height: 50px; 
    width: 180px; 
    -webkit-border-radius: 6; 
    -moz-border-radius: 6; 
    border-radius: 6px; 
    -webkit-box-shadow: 2px 2px 3px #666666; 
    -moz-box-shadow: 2px 2px 3px #666666; 
    box-shadow: 2px 2px 3px #666666; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 30px; 
    background: #a0a0a0; 
    padding: 10px 20px 10px 20px; 
    border: solid #808080 2px; 
    text-decoration: none; 
    ; 
  } 
  #numberID { 
    position: relative; 
    font-size: 30px; 
    left: 120px; 
    top: -125px; 
    display: inline-block; 
    z-index: 0; 
  } 
  #test7 { 
    margin: 350px auto; 
    min-height: 200px; 
    min-width: 200px; 
    -webkit-border-radius: 50%; 
    -webkit-box-shadow: 2px 2px 3px #666666; 
    -moz-box-shadow: 2px 2px 3px #666666; 
    box-shadow: 2px 2px 3px #666666; 
    color: #ffffff; 
    font-size: 30px; 
    background: #363636; 
    padding: 10px 20px 10px 20px; 
    border: solid #808080 2px; 
    -webkit-box-shadow: 0px 0px 160px #0aff0a; 
    font-family: Arial; 
    text-decoration: none; 
  } 
  #test7:hover { 
    background: #848484; 
    text-decoration: none; 
  } 
  text-decoration: none; 
} 
 
 
}
<html lang='en' class=''> 
 
<head> 
  <title>TECH_USER</title> 
  <script src='//static.codepen.io/assets/editor/live/console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js'></script> 
  <meta charset='UTF-8'> 
  <meta name="robots" content="noindex"> 
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> 
  <link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'> 
  <link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'> 
  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <link rel="stylesheet" href="css/style.css"> 
  <link rel="stylesheet" href="css/login.css"> 
 
  <script src="js/user.js"></script> 
 
</head> 
 
<body> 
 
  <!-- панель позьзователей--> 
 
  <div id="panel"> 
    <div id="res_name">USER</div> 
    <div id="numberID">0</div> 
    <!--кнопка РАБОТА --> 
 
    <button id="test1" onclick="myEvent1()"><p id="text1" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">РАБОТА</p></button> 
    <div id="result1">0</div> 
 
 
    <!--кнопка КОМАНДИРОВКА --> 
    <button id="test2" onclick="myEvent2()"><p id="text2" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">КОМАНД.</p></button> 
    <div id="result2">0</div> 
 
    <!--кнопка ОТПУСК --> 
    <button id="test3" onclick="myEvent3()"><p id="text3" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">ОТПУСК</p></button> 
    <div id="result3">0</div> 
 
    <!--кнопка ОТСУТСТВИЕ --> 
    <button id="test4" onclick="myEvent4()"><p id="text4" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">НЕ РАБ.</p></button> 
    <div id="result4">0</div> 
 
    <!--кнопка ВЫХОД --> 
    <button id="test5"><p id="text5" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">ВЫХОД</p></button> 
  </div> 
 
 
  <button id="test7" style="display:none;"><p id="text7" style="position:relative;color:#ffffff;top:-5px;left:0px;font-size:39px;">ВЫХОД</p></button> 
 
 
 
 
</body> 
 
</html>

Ребята ,есть проблема, скачут блоки то влево то в право в зависимости от браузера , можете подкорректировать что не так ,пожалуйста. В хроме все более менее вроде как

Answer 1

Как вариант использовать table:

html { 
  background: url(https://oboi.ws/filters/earlybird_17_9338_oboi_temnyj_fon_1920x1080.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
* { 
  padding: 0; 
  margin: 0; 
  box-sizing:border-box; 
} 
body { 
  height: 100%; 
} 
 
#panel  { 
  width: 30em; 
  height: 35em;    
  border-color: #83ff79;   
  border-style:double; 
  border-width: 5px;     
  border-radius: 30px; 
  -webkit-box-shadow: 0 0 10px black; 
     -moz-box-shadow: 0 0 10px black; 
          box-shadow: 0 0 50px #68ffae; 
  background: rgba(205, 208, 206, 0.6);     
  margin: 0 auto;       
  text-align: center; 
  position:relative; 
  top: 200px;  
 
} 
 
table { 
  margin: auto; 
} 
 
thead th { 
  height: 130px; 
  padding-top: 40px; 
} 
 
#res_name { 
   
  text-align: center; 
  width: 100%; 
  font-family: 'Fjalla One', sans-serif; 
   
  color: #ffffff; 
  font-size: 40px; 
} 
 
#numberID { 
} 
 
 
table td { 
  vertical-align: middle; 
} 
 
.group-result { 
  position: relative; 
  font-size: 30px; 
  display:inline-block; 
  vertical-align: middle; 
  z-index: 0; 
  padding-left: 10px; 
  padding-right:10px; 
} 
 
.group-item td { 
  padding-bottom: 15px; 
  position: relative;   
} 
 
.group-item button { 
  cursor:pointer; 
  display:block; 
  vertical-align: middle; 
  border-radius: 7px; 
  -webkit-box-shadow: 2px 2px 3px #777; 
  -moz-box-shadow: 2px 2px 3px #777; 
  box-shadow: 2px 2px 3px #777; 
  font-family: Arial; 
  font-size: 30px; 
  color:#fff; 
  padding: 10px 20px 10px 20px; 
  border: solid #808080 2px; 
  text-decoration: none;   
  background: #a0a0a0; 
  width: 200px; 
} 
 
.group-item button>span { 
  font-size: 30px; 
  color:#000; 
}
<div id="panel" > <!--style="display:none;"--> 
  <table id="group"> 
    <thead> 
      <tr> 
        <th> 
          <div id="res_name">USER</div> 
        </th> 
        <th> 
          <div id="numberID">0</div> 
        </th> 
      </tr> 
    </thead> 
     
    <tbody> 
      <tr class="group-item"> 
        <td> 
          <button  id="test1" onclick="myEvent1()"> 
            <span id="text1">РАБОТА</span> 
          </button> 
        </td> 
        <td> 
          <div id="result1" class="group-result">0</div> 
        </td> 
      </tr> 
       
      <tr class="group-item"> 
        <td> 
          <button id="test2" onclick="myEvent2()"> 
            <span id="text2">КОМАНД.</span> 
          </button> 
        </td> 
        <td> 
          <div id="result2" class="group-result">0</div>  
        </td> 
      </tr> 
       
      <tr class="group-item"> 
        <td> 
          <button id="test3" onclick="myEvent3()"> 
            <span id="text3">КОМАНД.</span> 
          </button> 
        </td> 
        <td> 
          <div id="result3" class="group-result">0</div>  
        </td> 
      </tr> 
       
      <tr class="group-item"> 
        <td> 
          <button id="test4" onclick="myEvent4()"> 
            <span id="text4">КОМАНД.</span> 
          </button> 
        </td> 
        <td> 
          <div id="result4" class="group-result">0</div>  
        </td> 
      </tr> 
       
      <tr class="group-item"> 
        <td> 
          <button id="test5"> 
            <span>ВЫХОД</span> 
          </button> 
        </td> 
        <td> 
          &nbsp; 
        </td> 
      </tr> 
    </tbody> 
  </table> 
</div>

Answer 2

* { 
  margin: 0; 
  paddiing: 0; 
} 
 
body { 
  background: url(https://oboi.ws/filters/earlybird_17_9338_oboi_temnyj_fon_1920x1080.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover; 
  background-size: cover; 
  height: 100%; 
} 
 
.info-block { 
  position: relative; 
  display: block; 
  width: 30%; 
  margin: 5% auto; 
  padding: 1.5rem; 
  text-align: center; 
  border-color: #83ff79; 
  border-style: double; 
  border-width: 5px; 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 30px; 
  -webkit-box-shadow: 0 0 10px black; 
  -moz-box-shadow: 0 0 10px black; 
  box-shadow: 0 0 50px #68ffae; 
  background: rgba(205, 208, 206, 0.6); 
} 
 
.info { 
  text-align: center; 
  font-family: 'Fjalla One', sans-serif; 
  color: #ffffff; 
  font-size: 30px; 
  margin-bottom: .5rem; 
  text-transform: uppercase; 
} 
 
a.button { 
  text-decoration: none; 
  color: black; 
  padding: .5rem 1rem; 
  position: relative; 
  -webkit-border-radius: 6; 
  -moz-border-radius: 6; 
  border-radius: 6px; 
  -webkit-box-shadow: 2px 2px 3px #666666; 
  -moz-box-shadow: 2px 2px 3px #666666; 
  box-shadow: 2px 2px 3px #666666; 
  font-family: Arial; 
  color: #ffffff; 
  font-size: 20px; 
  background: #a0a0a0; 
  border: solid #808080 2px; 
  display: block; 
  white-space: normal; 
  width: 150px; 
} 
 
a.button+a.button { 
  margin-top: .5rem; 
}
<div class="info-block"> 
  <div class="info">User</div> 
  <a class="button" href="/">Работа</a> 
  <a class="button" href="/">Командировка</a> 
  <a class="button" href="/">Не Работ.</a> 
  <a class="button" href="/">Отпуск</a> 
  <a class="button" href="/">Выход</a> 
</div>

И если надо что бы текст был большими буквами, никогда не пишите его в HTML большими буквами, для этого есть свойство text-transform: uppercase;. И позиционировать элементы можно разными способами, а абсолютом, это мое мнение, в последнюю очередь разве что по вертикали и то это можно табличной версткой сделать.

READ ALSO
Изменение текста в кнопке Jquery
HTML

Изменение текста в кнопке Jquery

https://codepenio/st-iv/pen/LBEpzg

 189
В чем разница между nth-child и nth-of-type?
HTML

В чем разница между nth-child и nth-of-type?

не могу понять в чем разница между nth-child и nth-of-type в css?

 188
Подчеркивание текста
HTML

Подчеркивание текста

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

 213
Как подгружать спрайты jquery?
jQuery

Как подгружать спрайты jquery?

Так не работает, как можно по другому?

 176