0
По какой-то причине, когда я просматриваю разные страницы на своем веб-сайте, некоторые элементы немного перемещаются в зависимости от того, на какой странице вы идете. Вот короткий clip элементов, перемещающихся. Как вы видите, элементы моего веб-сайта, похоже, немного перемещаются, и я не могу понять, почему. Если бы кто-нибудь мог помочь мне сделать так, чтобы все оставалось неподвижным, когда я переходил на разные страницы, я был бы признателен.Стили CSS - Элементы немного перемещаются при переходе на разные страницы.
Вот мои CSS стили:
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {background:url('E:/Server/CRAFT412-Website/images/SiteBackground.png');
background-repeat: no-repeat;
background-attachment: fixed;}
#wrapper {width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1px 5px;}
/*TOP BANNER SECTION*/
#logo {margin-top: -90px;
margin-bottom: -95px;
text-align: center;}
#ip {float: left;
margin-left: 458px;
margin-top: -55px;}
#ip_text {float: left;
margin-left: 449px;
margin-top: -51px;
color: white;
font-size: 15px;}
#teamspeak_logo {float:right;
margin-right: 450px;
margin-top: -55px;}
/*TOP NAV BAR SECTION*/
* {margin: 0px;
padding: 0px;}
#nav_bar {background-color: #a22b2f;
box-shadow: 0px 1px 10px;
height: 45px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;}
#nav_bar ul {padding: 0;}
#nav_bar > ul > li {display: inline-block;}
#nav_bar ul > li > a {color: white;
display: block;
text-decoration: none;
font-weight: normal;
padding-left: 15px;
padding-right: 15px;
line-height: 45px;
transition: all 0.5s ease;}
#nav_bar ul li ul {display: none;
list-style: none;
position: absolute;
background: white;
margin-left:0px;
box-shadow: 0px 1px 5px;
text-align: left;
z-index:1;}
#nav_bar ul li a.active-page {background-color: #8c1d20;}
#nav_bar ul li:hover ul li a {line-height: 2em;}
#nav_bar ul li a:hover {background: #8c1d20;}
#nav_bar ul li:hover ul {display: block;}
#nav_bar ul li ul li a {color: #252525;
display: block;}
#nav_bar ul li ul li a:hover {background: #4485f5;
color: white;}
/*BOTTOM FOOTER SECTION*/
#bottom_footer {height: 50px;
margin: 0px auto;
margin-top: 15px;
margin-bottom: 15px;
background:white;
width: 1000px;
border-radius: 5px;
box-shadow: 0px 1px 5px;}
#created_by {padding: 17px;
text-align: center;}
#social_media_youtube {float: left;
margin: -46px;
margin-left: 315px;}
#social_media_twitch {float: left;
margin: -43px;
margin-left: 380px;}
#social_media_twitter {float: right;
margin: -53px;
margin-right: 368px;}
#social_media_facebook {float: right;
margin: -47px;
margin-right: 325px;}
/*ELEMENT SELECTIONS SECTION*/
p {font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;
margin-right: 20px;}
ul {font-family: Arial, Helvetica, sans-serif;
margin-left: 37px;}
h3 {font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;}
h4 {font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;}
Здесь вы HTML с индексной страницы:
<!DOCTYPE HTML>
<html>
<head>
<title>CRAFT412 - Home</title>
</head>
<!--PAGE LINKS-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/index.css" rel="stylesheet" type="text/css" media="screen">
<!--HTML FOR ALL PAGES-->
<!--BODY SECTION-->
<body>
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip">
<img class="top" src="images/CRAFT412 - Box - IP.png" alt="IP">
</div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_logo">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK"></a>
</div>
</div>
<!--WRAPPER SECTION-->
<div id="wrapper">
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li><a href="index.html" class="active-page">Home</a>
</li
><li><a href="status.html">Status</a>
</li
><li><a href="info.html">Info</a>
</li
><li><a href="">Gamemodes</a>
<ul>
<li><a href="survival.html">Survival</a>
</li
><li><a href="pure-pvp.html">Pure-PVP</a>
</li
><li><a href="gamesworld.html">Gamesworld</a>
</li>
</ul>
</li
><li><a href="rules.html">Rules</a>
</li
><li><a href="vote.html">Vote</a>
</li
><li><a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!--INDEX CONTENT-->
<div id="index_banner">
<img class="bottom" src="images/SPAWN IMAGE.png" alt="INDEX BANNER">
<img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" alt="INDEX BANNER 2">
</div>
<div id="welcome_text">
<h3>Welcome to CRAFT412</h3>
<h3>We are currently running version 1.8.1</h3>
<h3>Survival/PurePVP/GamesWorld</h3>
</div>
<div id="trailer_title">
<h4><br>SERVER TRAILER</h4>
</div>
<div id="trailer_video">
<iframe width="832" height="468" src="http://www.youtube.com/embed/dfbWw757Iow"></iframe>
</div>
</div>
<!--HTML FOR ALL PAGES-->
<!--BOTTOM FOOTER SECTION-->
<div id="bottom_footer">
<div id="created_by">
<p>© 2015 GR412</p>
</div>
<div id="social_media_youtube">
<a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40" alt="YOUTUBE"></a>
</div>
<div id="social_media_twitch">
<a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35" alt="TWITCH"></a>
</div>
<div id="social_media_twitter">
<a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
</div>
<div id="social_media_facebook">
<a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40" alt="FACEBOOOK"></a>
</div>
</div>
</body>
</html>
На одной странице есть полоса прокрутки, а другая нет? Полосы прокрутки неизбежно вызывают небольшое движение. –
Ах, да, да. –