HTML и CSS - нельзя разделить меню и другие объекты

Я делаю простой сайт автосервиса, я только начал, и я немного новичок, изучаю и делаю сайт в целом.

Одна главная страница, мне просто нужно сделать 2 вещи: 1. Меню 2. 2 кнопки (Войти и зарегистрироваться)

Я уже сделал Меню и сделал кнопки, но проблема в том, что я не могу разделить их друг от друга и, возможно, мне нужно сделать что-то, чего я еще не знаю.

КОД:

/*CSS(Including Registration Form Which Shouldn't Be Needed Now):*/

body {
  background-color: #00e673;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  z-index: 999;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: black;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-right: 2px;
  z-index: 999;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
  z-index: 999;
}

ul li a:hover {
  background-color: green;
  z-index: 999;
}

ul li ul li {
  display: none;
  z-index: 999;
}

ul li:hover ul li {
  display: block;
  z-index: 999;
}

.simple-form {
  text-align: center;
  margin: 100px 0px;
  z-index: 10;
}

#registration {
  width: 100%;
  padding: 40px 0px;
  z-index: 10;
}

#reg {
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#button {
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#ph {
  width: 100px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#phone {
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

#rd {
  color: white;
  font-size: 18px;
  z-index: 10;
}

#but {
  color: white;
  font-size: 18px;
  z-index: 10;
}

#butt {
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  outline: 0px;
  z-index: 10;
}

input.MyLog {
  width: 200px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 150%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
}

input.MyReg {
  width: 200px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 150%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <title>Home</title>
  <link href = "style.css" rel = "stylesheet" type = "text/css">
  <div>
    <ul>
      <li><a href = "index.html">Home</a></li>
      <li><a href = "about.html">About</a></li>
      <li><a href = "services.html">Services</a>
        <ul>
          <li><a href = "services/a-type.html">A Type</a></li>
          <li><a href = "services/b-type.html">B Type</a></li>
          <li><a href = "services/c-type.html">C Type</a></li>
          <li><a href = "services/d-type.html">D Type</a></li>
          <li><a href = "services/tech-check.html">Tech Check</a></li>
        </ul>
      </li>
      <li><a href = "registration.html">Registration</a>
        <li><a href = "contact.html">Contact</a></li>
        <li><a href = "profile.html">Profile</a></li>
    </ul>
  </div>
</head>

<body>
  <div class = "button">
    <form id = "myButtons">
      <input class = "MyLog" type = "button" value = "Login" onclick = "location.href='profile.html'" />
      <input class = "MyReg" type = "button" value = "Register" onclick = "location.href='registration.html'" />
    </form>
  </div>
</body>

</html>

Я искал, но я предполагаю, что это довольно конкретная ошибка для меня и моего кода, и я не мог ничего сформулировать.

Вот результат:

HTML и CSS - нельзя разделить меню и другие объекты

Мне нужно как-то переместить эти ВХОД и РЕГИСТР в центр страницы, не перемещая и не трогая МЕНЮ.

ну, во-первых, ваш HTML-код недействителен ... вы поместили свою навигацию в <head>. Весь контент веб-страницы должен помещаться внутри тега <body>, включая вашу навигацию. Ни один контент не должен попасть в <head>

— 07.04.2019 00:01

Для начала вам нужно переместить всю свою разметку из тега <head> в тег <body>. Оставьте meta, title и link в голове, все остальное, что у вас там есть, теперь принадлежит телу.

— 07.04.2019 00:01

html css margin

06.04.2019 23:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Во-первых, вам нужно вставить меню в тело где должно находиться все содержимое страницы.

во-вторых, вам нужно добавить новый div class="container", который будет родителем div #button. и дайте ему немного CSS.

    <div class = "container">
    <div class = "button">
        <form id = "myButtons">
            <input class = "MyLog" type = "button" value = "Login" onclick = "location.href='profile.html'" />
            <input class = "MyReg" type = "button" value = "Register" onclick = "location.href='registration.html'" />
        </form>
    </div>
</div>

вот ваш css для контейнера

.container {
        text-align: center; 
        padding-top: 10rem;
     }

07.04.2019 01:12

Ответ принят как подходящий

Как сказал вам Раз, вам нужно переместить <div> за пределы <head> и в теги <body>.

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <title>Home</title>
  <link href = "style.css" rel = "stylesheet" type = "text/css">
</head>

<body>
  <div>
    <ul>
      <li><a href = "index.html">Home</a></li>
      <li><a href = "about.html">About</a></li>
      <li><a href = "services.html">Services</a>
        <ul>
          <li><a href = "services/a-type.html">A Type</a></li>
          <li><a href = "services/b-type.html">B Type</a></li>
          <li><a href = "services/c-type.html">C Type</a></li>
          <li><a href = "services/d-type.html">D Type</a></li>
          <li><a href = "services/tech-check.html">Tech Check</a></li>
        </ul>
      </li>
      <li><a href = "registration.html">Registration</a>
        <li><a href = "contact.html">Contact</a></li>
        <li><a href = "profile.html">Profile</a></li>
    </ul>
  </div>
  <div class = "button">
    <form id = "myButtons">
      <input class = "MyLog" type = "button" value = "Login" onclick = "location.href='profile.html'" />
      <input class = "MyReg" type = "button" value = "Register" onclick = "location.href='registration.html'" />
    </form>
  </div>
</body>

</html>

Кроме этого, вы должны добавить этот класс: