i'm having problem in html page. when zoom out or in, it's design brakes. please me find solution.
html { /*position:relative;*/ left:0; right:0; top:0; bottom:0; background:url(in_2.jpg); /*background-image: url("in_2.jpg") no-repeat-x no-repeat-y;*/ background-size:cover; /*opacity:0.9;*/ margin: auto; } h1 { /*position:relative;*/ margin-left:520px; font-family:lucida sans unicode,serif; font-size:35px; color:white; opacity:0.4; size:normal; margin: auto; } #textbox { position:relative; top:100px; left:510px; margin: auto; } #textbox1 { position:relative; top:110px; left:510px; margin: auto; } .inputs { background:white; font-size: 1em; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 50px; border: non; padding: 13px 10px; /* margin-bottom: 20px;*/ box-shadow: inset 0 2px 3px rgba( 0, 0, 0,0.2); /*position:500 500;*/ z-index:1; } .inputs:focus { background: #fff; box-shadow: 0 0 0 3px pink, inset 0 0px 2px rgba( 0, 0, 0, 0.4 ), 0px 5px 5px rgba( 0, 0, 0, 0.15 ); outline:10px; } div { width: 300px; height: 400px; background-color:#f0f0f0; border-radius: 50px; padding-right:100px; position: relative; left: 5px; top:-100px; z-index:-1; margin: auto; box-shadow: 5px 5px 50px black; }<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0">a <meta name="handheldfriendly" content="true"/> <link rel="stylesheet" type="text/css" href="style1.css"/> </head> <body> <h1>helping hand</h1> <!--<input type="button" id="register" value="register here"/>--> <form action="" > <input type="text" class="inputs" placeholder="e-mail" id="textbox"/> <br> <br> <input type="password" class="inputs" placeholder="password" id="textbox1"/> <br> <br> <button class="button"> <a href="register.html"> <span> login </span> </a> </button> <button class="button" ><span> register </span></button> </form> <div> </div> </body> </html><!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0">a <meta name="handheldfriendly" content="true"/> <link rel="stylesheet" type="text/css" href="style1.css"/> </head> <body> <h1>helping hand</h1> <!--<input type="button" id="register" value="register here"/>--> <form action="" > <input type="text" class="inputs" placeholder="e-mail" id="textbox"/> <br> <br> <input type="password" class="inputs" placeholder="password" id="textbox1"/> <br> <br> <button class="button"> <a href="register.html"> <span> login </span> </a> </button> <button class="button" ><span> register </span></button> </form> <div> </div> </body> </html> css file
html { /*position:relative;*/ left:0; right:0; top:0; bottom:0; background:url(in_2.jpg); /*background-image: url("in_2.jpg") no-repeat-x no-repeat-y;*/ background-size:cover; /*opacity:0.9;*/ margin: auto; } h1 { /*position:relative;*/ margin-left:520px; font-family:lucida sans unicode,serif; font-size:35px; color:white; opacity:0.4; size:normal; margin: auto; } #textbox { position:relative; top:100px; left:510px; margin: auto; } #textbox1 { position:relative; top:110px; left:510px; margin: auto; } .inputs { background:white; font-size: 1em; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 50px; border: non; padding: 13px 10px; /* margin-bottom: 20px;*/ box-shadow: inset 0 2px 3px rgba( 0, 0, 0,0.2); /*position:500 500;*/ z-index:1; } .inputs:focus { background: #fff; box-shadow: 0 0 0 3px pink, inset 0 0px 2px rgba( 0, 0, 0, 0.4 ), 0px 5px 5px rgba( 0, 0, 0, 0.15 ); outline:10px; } div { width: 300px; height: 400px; background-color:#f0f0f0; border-radius: 50px; padding-right:100px; position: relative; left: 5px; top:-100px; z-index:-1; margin: auto; box-shadow: 5px 5px 50px black; } output of html file:
without zoom out 
with zoom out 
you must make div , inside of it form,then determine position,i chose relative.
this code:
html { /*position:relative;*/ left: 0; right: 0; background: url(in_2.jpg); /*background-image: url("in_2.jpg") no-repeat-x no-repeat-y;*/ background-size: cover; /*opacity:0.9;*/ margin: auto; } h1 { /*position:relative;*/ margin-left: 520px; font-family: lucida sans unicode, serif; font-size: 35px; color: white; opacity: 0.4; } #textbox { position: relative; top: 10px; left: 20px; margin: auto; } #textbox1 { position: relative; top: 10px; left: 20px; margin: auto; } .inputs { background: white; font-size: 1em; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 50px; border: none; padding: 13px 10px; /* margin-bottom: 20px;*/ box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); /*position:500 500;*/ z-index: 1; } .inputs:focus { background: #fff; box-shadow: 0 0 0 3px pink, inset 0 0 2px rgba(0, 0, 0, 0.4), 0 5px 5px rgba(0, 0, 0, 0.15); outline: 10px; } #form { width: 300px; height: 400px; background-color: #f0f0f0; border-radius: 50px; padding-right: 100px; position: relative; left: 5px; top: -100px; z-index: -1; margin: auto; box-shadow: 5px 5px 50px black; }<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="handheldfriendly" content="true"/> <link rel="stylesheet" type="text/css" href="style1.css"/> </head> <body> <h1>helping hand</h1> <!--<input type="button" id="register" value="register here"/>--> <form action=""> <div id="form"> <input type="text" class="inputs" placeholder="e-mail" id="textbox"/> <br> <br> <input type="password" class="inputs" placeholder="password" id="textbox1"/> <br> <br> </div> </form> <button class="button"><a href="register.html"> <span> login </span> </a></button> <button class="button"><span> register </span></button> </body> </html>
Comments
Post a Comment