|
|
Login panel without using table tag - HTML
|
Views : 895
|
|
Tagged in : HTML
|
|
|
Report This Scrap as Inappropriate We request you to choose the appropriate categroy and subcategory that suits your
objectionable concern about the scrap, So that our team can review and find out whether it violates our Guidelines or the
scrap is not suitable for all viewers.
|
Hi,
copy the code below and you see a login panel without using table tag in html.works well from firefox 3.6 and ie 7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.lg{
margin-left:150px;
width:403px;
height:250px;
/*background: transparent url(cr.png) bottom right no-repeat;*/
background: -moz-linear-gradient(top, #66CC00, #669900);
background: -webkit-gradient(linear, center top, center bottom, from(#66CC00), to(#669900));
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;
box-shadow:2px 2px 2px #999;
-webkit-box-shadow:2px 2px 2px #999;
-moz-box-shadow:1px 1px 1px #999;
}
.input{
font-size:16px;
border:1px solid #FFF;
text-shadow:1px 1px 1px #999;
background:transparent;
box-shadow:2px 2px 2px #666;
-moz-box-shadow:2px 2px 2px #666;
-webkit-box-shadow:2px 2px 2px #666;
margin-top:5px;
width:254px;
height:30px;
}
.input:hover{
background:#FFF;}
</style>
</head>
<body>
<form action="" method="get">
<div style="border-radius:20px; -moz-border-radius:20px; width:150px; margin-bottom:-20px; background:#6C0; margin-left:160px; height:65px;"><div style="font-family:Verdana; font-size:18px; color:#FFF; padding-left:20px; padding-top:20px;">Login Here</div></div>
<div class="lg">
<div style="padding-left:30px; padding-top:40px; margin-bottom:10px; ">
<label style="font-family:Verdana; font-size:16px; color:#FFF; text-shadow: #666 0px 1px 0px; ">User Name<br />
<input class="input"type="text" name="test" id="test" />
</label>
</div>
<div style="padding-left:30px;">
<label style="font-family:Verdana; font-size:16px; color:#FFF; text-shadow: #666 0px 1px 0px;">Password<br />
<input class="input" type="text" name="test" id="test" />
</label>
</div>
<div style="margin-left:30px; margin-top:20px;"> <input style="width:70px; cursor:hand; height:25px; background:#FFF; border:none;" type="submit" name="button" id="button" value="Submit" /></div>
</div>
</form>
</body>
</html>
|
|
By Guna, On - 2010-11-13 |
|
|
|