Search code examples
htmlcssmargin

HTML & CSS - Can't divide Menu and Other Objects

I am making a simple car service website, I just started and I am somewhat a beginner, studying and making website altogether.

One the main page, I just need to do 2 things: 1. Menu 2. 2 Buttons (Login and Register)

I did Menu already and did buttons as well, but the problem is that I can't divide them from each other and maybe I need to do something I don't know yet.

CODE:

/*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>

I searched, but I guess its pretty specific mistake for me and my code and couldn't formulate anything.

Here is the output:

enter image description here

I need to somehow move those LOGIN and REGISTER to the center of the page, without moving and touching the MENU.

Solution

  • Like Raz told you, you need to move the <div> outside the <head> and into the <body> tags.

    <!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>

    Other than that, you should add this class:

    .button {
  clear: left;
}