brsy
nah mang
- May 12, 2011
- 1,530
- 272
Okay, so I created a login panel using Photoshop, and I am trying to code it in CSS and HTML. Here is the actual Photoshop layout:
Here is what I have done so far:
So here's my issue. I would like that little box above to be a text box, but I have no clue how I can set the CSS for it. Here is my current CSS and HTML.
HTML:
CSS:
Here is what I have done so far:
So here's my issue. I would like that little box above to be a text box, but I have no clue how I can set the CSS for it. Here is my current CSS and HTML.
HTML:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/global.css" />
<title>Administrative Panel: Login</title>
</head>
<body>
<div class="loginContainer">
<div class="loginBox">
<div class="loginHeader">
<div class="loginDivider">
<div class="loginUsername">
<form action="postz" target="submit.php">
<input class="inputTextBox" type="text" name="username" />
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS:
HTML:
.loginContainer {
background-image: url(../images/loginBackground.png);
border-radius: 15px;
width: 450 px;
height: 300 px;
margin-left: 450 px;
margin-top: 100 px;
}
.loginBox {
background-image: url(../images/loginBox.png);
width: 450 px;
height: 300 px;
margin-top: 100 px;
}
.loginHeader {
background-image: url(../images/loginHeader.png);
width: 450 px;
height: 300 px;
}
.loginDivider {
background-image: url(../images/loginDivider.png);
width: 450 px;
height: 300 px;
}
.loginUsername {
background-image: url(../images/loginInput.png);
width: 394 px;
height: 132 px;
}
.loginSubmit {
background-image: url(../images/loginSubmit.png);
height: 500px;
width: 500px;
}
/*.inputText {
background-image: url(../images/hover/loginInput.png);
background-repeat: no-repeat;
margin-top: 100px;
margin-left: 180px;
padding-left: 1px;
padding-top: 1px;
}*/
.inputTextBox {
background:none;
border:none;
width:134px;
height:15px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px
}
