HTML & CSS - Невозможно разделить меню и другие объекты - PullRequest
Новая
       38

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

0 голосов
/ 07 апреля 2019

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

Одна главная страница, мне просто нужно сделать 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>

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

Вот вывод:

enter image description here

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

Ответы [ 2 ]

1 голос
/ 07 апреля 2019

Как сказал вам Раз, вам нужно переместить <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>

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

.button {
  clear: left;
}
1 голос
/ 07 апреля 2019

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

во-вторых, вам нужно добавить новый div class = "container", который будет родительским длякнопка # div.и дайте ему немного 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;
     }
...