За последние 24 часа нас посетили 21966 программистов и 985 роботов. Сейчас ищет 691 программист ...

ломаный блок

Тема в разделе "HTML и CSS", создана пользователем deaderror, 3 июл 2021.

  1. deaderror

    deaderror Новичок

    С нами с:
    20 июн 2021
    Сообщения:
    16
    Симпатии:
    1
    Всем привет.
    Не могу корректно поместить в блок авторизацию, прилип к блоку
    Как пофиксить?
    HTML:
    1.  <div id="form_auth">
    2. <form action="auth.php" class="block glow" method="post" name="form_auth">
    3.        <font color="#FFFFFF"><h3>Авторизация</h3>
    4.      
    5.                         <table>
    6.          
    7.                 <tbody><tr>
    8.                     <td> Email: </td>
    9.                     <td>
    10.  
    11.                         <input type="email" name="email" required="required"><br>
    12.                         <span id="valid_email_message" class="mesage_error"></span>
    13.                     </td>
    14.                 </tr>
    15.          
    16.                 <tr>
    17.                     <td> Пароль: </td>
    18.                     <td>
    19.                         <input type="password" name="password" placeholder="минимум 6 символов" required="required"><br>
    20.                         <span id="valid_password_message" class="mesage_error"></span>
    21.                     </td>
    22.                 </tr>
    23.                
    24.                 <tr>
    25.                     <td> Введите капчу: </td>
    26.                     <td>
    27.                         <p>
    28.                             <img src="captcha.php" alt="Изображение капчи" /> <br>
    29.                             <input type="text" name="captcha" placeholder="Проверочный код">
    30.                         </p>
    31.                     </td>
    32.                 </tr>
    33.                 <tr>
    34.                     <td colspan="2">
    35.                         <script src="/js/java.js"></script>
    36.                        
    37.                      <input type="checkbox" name="remember_me" checked="checked" /> Считывать мой IP
    38.                       <!-- <input type="submit" name="btn_submit_auth" value="Войти"> -->
    39.             <br><button type="submit" class="btn btn-dark" name="btn_submit_auth" value="Войти">Войти</button>
    40.  
    41.  
    Код (CSS):
    1. */
    2. .clear{
    3.     clear: both;
    4. }
    5.  
    6. .mesage_error{
    7.     color: #cc0000;
    8. }
    9.  
    10. .success_message{
    11.     color: green;
    12.    
    13. }
    14.  
    15. .block_for_messages{
    16.     text-align: center;
    17. }
    18.  
    19. #header, #footer{
    20.     border: 2px solid #000;
    21. }
    22.  
    23. #header{
    24.     padding-left: 10px;
    25. }
    26.  
    27. #footer{
    28.     position: absolute;
    29.     bottom: 0;
    30.     right: 0;
    31.     width: 100%;
    32. }
    33.  
    34. td {
    35. color: #fff;
    36.  
    37. }
    38.  
    39. h2 {
    40. color: #fff;
    41.   margin-left: 15px;
    42.  
    43. }
    44. h3 {
    45.     color: #fff;
    46.   margin-left: 15px;
    47.  
    48.     }
    49.  
    50. #header h2, #footer h2{
    51.     text-align: center;
    52.     margin: 0;
    53. }
    54.  
    55. #auth_block{
    56.     width: 290px;
    57.     float: right;
    58.     text-align: center;
    59. }
    60.  
    61. #auth_block a{
    62.     display: block;
    63.     padding: 10px;
    64.     border-radius: 10px;
    65.     color: #fff;
    66.     width: 110px;
    67.     height: 30px;
    68.     text-decoration: none;
    69. }
    70.  
    71. #auth_block a:hover{
    72.     text-decoration: center;
    73.  
    74. }
    75. #link_register{
    76.     float: left;
    77. }
    78.  
    79. #link_auth, #link_logout{
    80.     float: right;
    81. }
    82.  
    83. #link_register a{
    84.     background: #54d854;
    85. }
    86.  
    87. #link_auth a, #link_logout a{
    88.     background: #4e4eec;
    89.     text-align: center;
    90. }
    91.  
    92. /* Блок с формой регистрации */
    93. #form_register, #form_auth{
    94.     width: 300; /*block auth*/
    95.     margin: 0 auto;
    96. }
    97.  
    98.  
    99. #authorized h2{
    100.     text-align: center;
    101. }
    102.  
    103. /*ДИЗАЙН AND ФОРМА*/
    104.  
    105. body {
    106.   margin: 1;
    107.   padding: 0;
    108.   background-color: white;
    109. }
    110.  
    111. .block {
    112.   position: relative;
    113.   margin: 15% auto 0;
    114.   border-radius: 4px;
    115. width: 600px;
    116.   height: 380px;
    117.    left: 100;
    118.   background: linear-gradient(0deg, #131414, #131414);
    119.   box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    120. }
    121.  
    122. .glow::before, .glow::after {
    123.   content: '';
    124.   position: absolute;
    125.   left: 0px;
    126.   top: 0px;
    127.   border-radius: 4px;
    128.   background: linear-gradient(45deg, #e6fb04, #ff6600, #00ff66, #00ffff, #ff00ff, #ff0099, #6e0dd0, #ff3300, #099fff);
    129.   background-size: 400%;
    130.   width: calc(100% + 0px);
    131.   height: calc(100% + 0px);
    132.   z-index: -1;
    133.   animation: animate 60s linear infinite;
    134. }
    135.  
    136. @keyframes animate {
    137.   0% {
    138.     background-position: 0 0;
    139.   }
    140.   50% {
    141.     background-position: 400% 0;
    142.   }
    143.   100% {
    144.     background-position: 0 0;
    145.   }
    146. }
    147.  
    148. .glow::after {
    149.   filter: blur(30px);
    150.   opacity: .95
    151.    
    152. }
    153.  
    154.  
    155. body {
    156. background-color: #000;
    157. }
    158. /* черный фон заголовка, белый цвет шрифта */
    --- Добавлено ---
    upload_2021-7-3_9-34-25.png
     
  2. roboformation

    roboformation Активный пользователь

    С нами с:
    30 авг 2020
    Сообщения:
    162
    Симпатии:
    40
    Легко и просто. Если говорить чисто о вашей таблице, то она не прилипла вовсе. Обычным margin позиционируется.
     
  3. deaderror

    deaderror Новичок

    С нами с:
    20 июн 2021
    Сообщения:
    16
    Симпатии:
    1
    Подскажите, что нужно сделать? пожалуйста
    --- Добавлено ---
    @roboformation
     
  4. roboformation

    roboformation Активный пользователь

    С нами с:
    30 авг 2020
    Сообщения:
    162
    Симпатии:
    40
    Ну, к примеру, я у вас добавил в код
    Код (CSS):
    1. table {
    2.   margin: auto;
    3. }
    и соответственно таблица ваша встала по центру блока. Дальше позиционируйте как вам нужно
     
    deaderror нравится это.