HTML Divs перемещается при масштабировании в/из

Мои div перемещаются, когда пользователь масштабируется и выходит из браузера или уменьшает его размер. Создаваемый мной веб-сайт выглядит нормально, когда вы на 100% увеличиваете масштаб браузера, что является стандартным.HTML Divs перемещается при масштабировании в/из

Проверьте сами на http://www.enlytn.me

Вот мой код, я ищу, чтобы сделать это так DIV-х не двигают вокруг, когда вы увеличивать и уменьшать масштаб, они сохраняют свои соответствующие расстояния между друг с другом, они не перекрываются, они остаются одного и того же размера и т. д. Как правило, средний веб-сайт имеет свои divs, которые остаются неизменными при масштабировании и выходе из браузера.

HTML -

<!DOCTYPE HTML> 
<html> 


<head> 
     <title>Enlytn.me</title> 
     <link rel='stylesheet' type='text/css' href='indexstyle03.css'/> 
</head> 

<body> 
<script src="indexjs.js"> 
</script> 



<div class="banner"> 
    <div> 
    <a href="http://enlytn.me"><p id="enlytn">e.</p></a> 
    </div> 
</div> 

<div class="form"> 
    <h2>Sign in</h2> 
     <input name='username' placeholder='Username' type='text'/> 
     <input id='pw' name='password' placeholder='Password' type='password'/> 
     <div class='remember'> 
     <input checked='' id='remember' name='remember' type='checkbox'/> 
     <label for='remember'></label>Remember me 
     </div> 
     <input type='submit' value='Sign in'/> 
     <a class='forgot' href='#'>Forgot your password?</a> 
     <a class='reg' href='#'Register</a> 
</div> 

<div class="anon"> 
    <h2>Continue as Anonymous</h2> 
     <input name='anonymous' type='submit' value='Anonymous' /> 
</div> 

<div class="gall"> 
     <h2>Current Affairs</h2> 
</div> 



</body> 


</html>

А вот мой CSS

html { 
background:url(Images/Background1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

html, body { 
margin:0; 
padding:0; 
} 


/*Banner font start*/ 
@font-face { 
font-family:bannerfont; 
src:url(fonts/SketchRockwell-Bold.ttf); 
} 

@font-face { 
font-family:bannerfontreg; 
src:url(fonts/hapole_marker.ttf); 
} 
/*Banner font end*/ 


@font-face { 
font-family:loginfont; 
src:url(fonts/sketchy.ttf); 
} 


/*Banner start*/ 
.banner{ 
position:absolute; 
top:0; 
left:0; 
width:100%; 
background-color:#373f42; 
height:58px; 


} 
.banner #enlytn{ 
position:absolute; 
color:#EEF3FF; 
font-family:bannerfont; 
font-size:75px; 
top:-95px; 
left:75px; 
opacity:1; 
} 


/*Banner end*/ 

.form { 
width: 250px; 
position: absolute; 
top: 40%; 
right: 10%; 
margin: -184px 0px 0px -155px; 
background: rgba(0,0,0,0.2); 
padding: 20px 30px; 
border-radius: 5px; 
box-shadow: 0px 1px 0px rgba(0,0,0,0.3),inset 0px 1px 0px rgba(255,255,255,0.07) 
} 

.form h2 { 
font-family: sans-serif; 
color:#5EBA2C; 
font-size: 15px; 
font-weight: 600; 
text-align: center; 
margin-bottom: 10px; 
} 

.form a { 
color: #5EBA2C; 
text-decoration: none; 

} 

input[type="text"], input[type="password"] { 
width: 250px; 
padding: 25px 0px; 
background: transparent; 
border: 0; 
border-bottom: 1px solid #5EBA2C; 
outline: none; 
color:#5EBA2C; 
} 
input[type=checkbox] { 
display: none; 
} 

label { 
display: block; 
position: absolute; 
margin-top: 2px; 
width: 4px; 
height: 4px; 
border-radius: 50%; 
background: #46485c; 
content: ""; 
transition: all 0.3s ease-in-out; 
cursor: pointer; 
border: 3px solid #252730; 
box-shadow: 0px 0px 0px 2px #46485c; 
} 

#remember:checked ~ label[for=remember] { 
background: #b5cd60; 
border: 3px solid #252730; 
box-shadow: 0px 0px 0px 2px #b5cd60; 
} 


input[type="submit"] { 
background: #b5cd60; 
border: 0; 
width: 250px; 
height: 40px; 
border-radius: 3px; 
color: white; 
cursor: pointer; 
transition: background 0.3s ease-in-out; 
} 
input[type="submit"]:hover { 
background: #16aa56; 
} 

.forgot { 
margin-top: 30px; 
display: block; 
font-size: 11px; 
text-align: center; 
font-weight: bold; 
} 
.forgot:hover { 
margin-top: 30px; 
display: block; 
font-size: 11px; 
text-align: center; 
font-weight: bold; 
color: #5EBA2C; 
} 

.remember { 
padding: 30px 0px; 
font-size: 15px; 
text-indent: 25px; 
line-height: 15px; 
font-family:sans-serif; 
color: #5EBA2C; 
} 

::-webkit-input-placeholder { 
color: #5EBA2C; 
} 

[placeholder]:focus::-webkit-input-placeholder { 
transition: all 0.2s linear; 
transform: translate(10px, 0); 
opacity: 0; 
} 

.anon { 
width: 250px; 
position: absolute; 
top: 85%; 
right: 10%; 
margin: -184px 0px 0px -155px; 
background: rgba(0,0,0,0.2); 
padding: 20px 30px; 
border-radius: 5px; 
box-shadow: 0px 1px 0px rgba(0,0,0,0.3),inset 0px 1px 0px rgba(255,255,255,0.07) 
} 

.anon h2 { 
font-family: sans-serif; 
color:#5EBA2C; 
font-size: 15px; 
font-weight: 600; 
text-align: center; 
margin-bottom: 10px; 
} 

.gall { 
width: 250px; 
position: absolute; 
top: 40%; 
right: 50%; 
margin: -184px 0px 0px -155px; 
background: rgba(0,0,0,0.2); 
padding: 20px 30px; 
border-radius: 5px; 
box-shadow: 0px 1px 0px rgba(0,0,0,0.3),inset 0px 1px 0px rgba(255,255,255,0.07) 
} 

.gall h2 { 
font-family: sans-serif; 
color:#5EBA2C; 
font-size: 15px; 
font-weight: 600; 
text-align: center; 
margin-bottom: 10px; 
}

Спасибо любую помощь я могу Получать, я буду вечно благодарен, как я чувствую, что не может прогрессировать с развитием моего сайта пока эта проблема не будет решена.

источник

2014-03-16 user3413313

Вы не можете использовать фиксированные размеры пикселей и перемещать элементы при перемещении канвы. Куда бы они пошли, если они не подходят?

Вместо объявления размеров в виде фиксированных пикселей их устанавливают с использованием ems, который является относительным размером для родительского элемента. 1em = 100% от родителя.

http://www.w3schools.com/cssref/css_units.asp

источник

2014-03-16 00:19:31 Merch

Так просто изменить значение пикса значений эм, а и я буду хорошо идти? – user3413313

Привет, я просто изменил все значения на EM и ничего не изменилось. – user3413313

HTML Divs перемещается при масштабировании в/из

ответ

Смежные вопросы