HTML tasarımı bozuldu

Benim html sayfamda bir sorun yaşıyorum. Uzaklaştığımda veya içeri girdiğimde, tasarım frenleri. Lütfen bir çözüm bulmama yardım et. dışarı zoom olmadanHTML tasarımı bozuldu

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

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; 

}

html dosyasının Çıktı

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>

zoom ile

i göreceli seçti dışarı

kaynak

2016-03-26 pream marvaniya

Bir div yapmalısınız ve formunuzu olacak bunun içinde, daha sonra konumunu belirlemek.

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"> 
 
    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=""> 
 
    <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>

kaynak

2016-03-26 18:51:00

iyi yanıtı @ pream-marvaniya seçiniz:

kodudur –

HTML tasarımı bozuldu

cevap

İlgili konular