Поэтому я заметил эту ошибку на днях, когда кнопка для входа в систему будет перемещаться в другое место, когда страница обновляется. Однако, если страница загружается из ссылки, она остается в правильном положении. Я рисую пустой вопрос, почему это будет сделано, вот ссылка и код на мой сайт.
Веб-сайт: http://www.clanrippgaming.net/
HTML :
<div class="login_box"> <li> <?php define('IN_PHPBB', true); $phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './forums/'; $phpEx = substr(strrchr(__FILE__, '.'), 1); include($phpbb_root_path . 'common.' . $phpEx); $user->session_begin(); $auth->acl($user->data); if (!$user->data["is_registered"]) { ?> <div class="logged_out"> <form action="./forums/ucp.php?mode=login" method="post" enctype="multipart/form-data"> <input type="text" placeholder="username" style="height:20px;" maxlength="20" size="17px" name="username" /> <input type="password" placeholder="password" style="height:20px;" maxlength="50" size="16px" name="password" /> <div class="button"> <input type="image" name="login" value="Log in" src="images/login.png" width="28px" onmouseout="this.src='images/login.png'" onmouseover="this.src='images/loginhover.png'" onmouseout="t"> </div> <div class="logged_out_txt"> <br> <input type="checkbox" name="autologin" id="autologin" /> <font size="2" color="#BDBDBD"> Remember Me <div class="forgot"> <font size="2"> <a href="forums/ucp.php?mode=sendpassword">Forgot Password?</a> </font> </div> <div class="New"> <br> <a href="forums/ucp.php?mode=register">New Member? Register Now!</a> </div> </div> <input type="hidden" name="redirect" value="./../index.php" /> </form> </div> <?php } else { echo "<div class='logged_in'>"; echo "<div class='welcome'>" . $user->data['username']; "</div>"; echo "<br><div class='account'><a href=\"logout.php\">Logout</a></div>"; echo "<div class='account'><a href=\"forums/ucp.php?i=pm&folder=inbox\">Messages</a></div>"; echo "<div class='account'><a href=\"forums/ucp.php\">My Account</a></div>"; echo "</div>"; } ?> </li> </div> CSS :
.login_box { float: right; width: 330px; height: 75px; margin-top: 7px; margin-right: -5px; list-style: none; } .login_box li { } .login_box li a { color: #BDBDBD; text-decoration: none; padding-left: 60px; padding: 0px; } .logged_in { background-image: url(images/bg_login2.png); border: 3px solid#000000; outline: 1px solid#BDBDBD; width: 304px; height: 55px; margin-left: -2px; padding-top: 5px; } .logged_out { margin-right: 38px; } .logged_out_txt { margin-top: -20px; }
Обновите следующие изменения в своих классах CSS, и все будет в порядке.
CSS
.logged_out { margin-right: 22px; position: relative; } .button { position: absolute; top: 0; right:0; }
Удалить display:inline; float:right; margin-top: 0; and margin-left: 4px display:inline; float:right; margin-top: 0; and margin-left: 4px display:inline; float:right; margin-top: 0; and margin-left: 4px от .button
Глядя на ваш сайт, я предлагаю внести следующие изменения в ваш CSS:
.button { display: inline-block; float: right; } .logged_out { margin-right: 22px; }