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.
HTML CODE:
<!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>
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;
}
I searched, but I guess its pretty specific mistake for me and my code and couldn't formulate anything.
Here is the output:
I need to somehow move those LOGIN and REGISTER to the center of the page, without moving and touching the MENU.
Aucun commentaire:
Enregistrer un commentaire