Должность: Абсолют; Div делает страницу слишком широкой и добавляет пустое пространство сбоку. Как мне уменьшить его размер?

0

В настоящее время я работаю на сайте по адресу http://crowfell.com/index2.php, если вы введете имя пользователя в форму регистрации и войдите в профиль игрока в правом верхнем углу. Когда пользователь не зарегистрирован на странице, это нормально, но после того, как они вошли в профиль игрока, div создает деление ширины 100%, которое начинается с правой стороны страницы, без необходимости излишне вправо в пустое пространство.

Как я могу остановить позицию: абсолютный div от 100% ширины?

Это создается с помощью следующего кода:

HTML/PHP:

<div class='fixed'>
    <?php
        echo "<h1>" . $_SESSION['name'] . "</h1>";
        include 'comp.php';
    ?>
    <p>0 posts, 0 votes</p>
</div>
<div class='userimg'>
    <img src='images/user.jpg'>
</div>

CSS:

.fixed { 
    /*font-family: 'Cinzel Decorative', cursive;*/
    width: 160px;
    color: #eeeeee;
    position: absolute;
    top: 0;
    margin-left: 86%;
}

.userimg { 
    position: absolute;
    top: 2px;
    margin-left: 78%;
}

PHP файл в include - это просто генератор случайных дополнений и добавляет короткую строку, на которую влияет только div css.

Я пробовал добавить ширину: 20%; для каждого стиля CSS, я также попытался дать ему низкое левое значение, добавив переполнение: hidden ;, а также содержащий два div в третьем и придающие ему разные свойства ширины и переполнения. Никто не работает!

Заранее благодарим за любую помощь, которую вы можете предложить!

Теги:
css-position

1 ответ

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

Вы делаете это сложнее, чем это должно быть с left и margin-left userimg на ваших fixed и userimg классах.

Попробуйте этот CSS вместо этого. Удалите left и margin-left на обоих из них и используйте

.fixed {
  color: #EEEEEE;
  position: absolute;
  right: 2px;
  top: 0;
  width: 160px;
}
.userimg {
  position: absolute;
  right: 180px;
  top: 2px;
}

Теперь вы делаете их относительно друг друга в правой части экрана вместо того, чтобы пытаться ударить слева.

  • 0
    Спасибо, но это все еще не сработало. .fixed { /*font-family: 'Cinzel Decorative', cursive;*/ color: #eeeeee; position: absolute; top: 0; right: 0; } .userimg { position: absolute; top: 2px; right: 180px; } Это мой код сейчас, но ширина div все еще создает огромное пустое пространство справа.
  • 0
    Это не правда. У вас НЕТ позиционирования на эти элементы. Я только что просмотрел исходный код, и единственное, что установлено, это верхнее и правое.
Показать ещё 3 комментария

Ещё вопросы

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