Задать вопрос
@Pyhon3x
html

Почему HTML выводит то что ему за благо рассудиться?

Код:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)}
    footer {
      background: #AAAAAA;
      align: bottom;
    }
    #a {
      align: center;
      text-decoration: none;
      outline: none;
      display: inline-block;
      margin: 10px;
      color: white;
      box-shadow: 0 0 0 2px white;
      padding: 20px 0;
      width: 150px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 3px;
      position: relative;
      overflow: hidden;
    }
    span {
      font-family: 'Montserrat', sans-serif;
      position: relative;
      z-index: 5;
    }
    #a:before,
    #a:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
    #a:before{
      transform: translateX(-100%);
      background: white;
      transition: transform .3s cubic-bezier(.55,.055,.675,.19);
    }
    #a:after {
      background: #413ad5;
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s;
    }
    #a:hover:before,
    #a:hover:after {transform: translateX(0);}
    </style>
  </head>
  <body>
    <div align="center">
      <a id="a" href="/AUTH-2/Log_In">Войти</a>
      <a id="a" href="/AUTH-2/Sign_In">Регистрация</a>
      <a id="a" href="/AUTH-2/Sign_Out">Выйти</a>
    </div>
    <footer>
      <h3 align="center">Copyright © 2019-2020 <a href="https://tsecret.net">tsecret.net</a>; <a href="https://accounts.tsecret.net">accounts.tsecret.net<a>. Все права защищены.</h3>
    </footer>
  </body>
</html>

Вывод(ссылка)

Почему так?
Ну или что я сделал не так?
Спасибо...
  • Вопрос задан
  • 146 просмотров
9 комментариев
Подписаться 1 Средний 9 комментариев
Решения вопроса 1
Kiriniy
@Kiriniy
Графический и веб-дизайнер
1. У элементов должны быть уникальные id и что-бы, как вы в комментариях к вопросу, не копировать стили меняя только имя, используют классы. Например:
<a class="a" href="/AUTH-2/Log_In">Войти</a>
<a class="a" href="/AUTH-2/Sign_In">Регистрация</a>
<a class="a" href="/AUTH-2/Sign_Out">Выйти</a>


2. И в css тоже меняете на класс. Кстати, есть html атрибут align, но нет такого свойства css.

body {
    background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)
}
footer {
    background: #AAAAAA;
}
.a {
    text-decoration: none;
    outline: none;
    display: inline-block;
    margin: 10px;
    color: white;
    box-shadow: 0 0 0 2px white;
    padding: 20px 0;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
}
.a span {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 5;
}
.a:before, .a:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.a:before {
    transform: translateX(-100%);
    background: white;
    transition: transform .3s cubic-bezier(.55, .055, .675, .19);
}
.a:after {
    background: #413ad5;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.16, .73, .58, .62) .3s;
}
.a:hover:before, .a:hover:after {
    transform: translateX(0);
}


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

<a class="a" href="/AUTH-2/Log_In"><span>Войти</span></a>
<a class="a" href="/AUTH-2/Sign_In"><span>Регистрация</span></a>
<a class="a" href="/AUTH-2/Sign_Out"><span>Выйти</span></a>
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
15000 руб./за проект
Приложение или модуль для Wordpress для учета поездок по QR
25 апр. 2024, в 03:58
10000 руб./за проект
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Ещё заказы