0

@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>

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

введите сюда описание изображения

4
  • Там можно все это без позиционирования сделать, такое чувство что этот код от какой нибудь визуальной программы
    – Bert
    11 июл 2018 в 6:48
  • если без позиционирования то чем оперировать ? margin ?
    – Karter
    11 июл 2018 в 6:51
  • где css код блока group? Код который добавлен ничего не выводит.
    – Sergey B
    11 июл 2018 в 6:54
  • все залил , group ,был лишним ,убрал его
    – Karter
    11 июл 2018 в 7:12

2 ответа 2

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>

1

* {
  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;. И позиционировать элементы можно разными способами, а абсолютом, это мое мнение, в последнюю очередь разве что по вертикали и то это можно табличной версткой сделать.

1
  • Спасибо за подробное обьяснение ,будем учиться )
    – Karter
    11 июл 2018 в 7:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.