HTML кнопка движется при обновлении страницы?

0

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

Веб-сайт: 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;
}
  • 0
    Я не уверен, что вы имеете в виду, когда говорите, что кнопка движется, но я заметил, что страница создает горизонтальную полосу прокрутки, потому что ваш контент в некоторых разрешениях превышает ширину устройства. Я бы рекомендовал не допустить этого.
  • 0
    Да, я намеревался это исправить, создавая страницу на экране 1920x1080. Я пытался получить какой-то автоматический зум для CSS, что бы вы порекомендовали?
Теги:
formatting

2 ответа

1
Лучший ответ

Обновите следующие изменения в своих классах 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

  • 0
    Это работает, но я не могу переместить кнопку с поля формы.
  • 0
    Куда вы хотите переехать?
Показать ещё 9 комментариев
1

Глядя на ваш сайт, я предлагаю внести следующие изменения в ваш CSS:

.button {
display: inline-block;
float: right;
}

.logged_out {
margin-right: 22px;
}
  • 0
    Спасибо, мужик, просто пришлось отрегулировать верхнее поле, и это сработало как шарм!
  • 0
    Это не правильный способ сделать это, хотя. Просто нажмите на кнопку и вернитесь на домашнюю страницу, вы увидите, что кнопка снова сдвигается.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню