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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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