Intereting Posts
конвертировать число в слово в php не работает jQuery mailto с элементом привязки Как заставить пользователя вводить определенный шаблон в поле ввода с помощью регулярных выражений и javascript Предварительный просмотр изображения AngularJS перед загрузкой, отображающей предыдущее изображение переменные формы, не переходящие на php IE7 CSS Прокрутка Div Bug Почему Chrome «разгружается» при обновлении, но не при использовании ярлыка? Разметка HTML для многодневных событий календаря Существует ли стандартизованный (мета) тег для даты веб-сайта? Как сделать div той же высотой, что и родительский (отображается как table-cell) Изменение размера высоты iframe в соответствии с высотой содержимого Добавление поля вверх в контейнерную загрузку Изменить текст абзаца динамически с помощью textarea, нажав третий элемент с помощью jQuery? Twitter Bootstrap Модальная прокрутка страницы вверх JQuery поворачивает изображение и соответственно корректирует родительский элемент

Почему есть пробел справа от моего сайта?

Я делаю свой личный сайт с Animate.css и заметил, что справа находится пустое место, и не мог понять, почему

Вот мой код:

    .hudson { color: white; position: relative; font-size: 60px; left: 400px; top: 110px; font-family: Futura, 'Trebuchet MS', Arial, sans-serif; } .threeD { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } .p1 { position: relative; top: 75px; left: 100px; -webkit-animation-delay: 1s; } .p2 { position: relative; top: 85px; left: 100px; -webkit-animation-delay: 1s; } .p3{ position: relative; top: 95px; left: 95px; -webkit-animation-delay: 1s; } .coding { position: relative; top: -325px; left: 535px; } .paracolor { color: skyblue; font-size: 25px; font-family: Tahoma, Geneva, sans-serif; } .img1 { position: relative; top: 250px; left: 20; } body { background-image: url(PICTURES1/mountains4.jpeg); background-size: 102%; background-repeat: no-repeat; }     

Hudson Reamer

I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.

I hope to one day go to MIT or Stanford to study computor science of computor engineering.

I will build people custom computors for an 100 dollar building fee and the price of the PC parts

Спасибо за помощь и ответы!

Большая область пробелов справа от вашей страницы вызвана относительным позиционированием .

Вы применяете position: relative ко всем вашим элементам. Затем вы перемещаете все их вправо left: 400px и left: 535px и left: 100px и т. Д. left свойство определяет, как далеко нажать элемент из левого края.

Кроме того, когда элемент расположен относительно, его исходное пространство зарезервировано. Поэтому, когда элементы смещаются вправо, они также сохраняют свои исходные пространства (хотя их больше нет), и документ растягивается горизонтально.

Удалите все left свойства и увидите разницу. Все сдвигается влево, а горизонтальная полоса прокрутки исчезает. DEMO

Я не уверен, какова цель вашего макета, но, просто для контраста, вот альтернатива: вместо relative попытки absolute позиционирования, которая удаляет элементы из streamа документов, поэтому их исходное пространство устраняется.

Вот хорошая ссылка из MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Все tags вашего абзаца расположены слева с количеством пикселей «х»

пример

  • p1 из левой позиции – 100 пикселей
  • p2 из левой позиции – 100 пикселей
  • p3 из левой позиции – 95px
  • Возьмите вышеуказанное из своего css, и все должно быть хорошо

    fragment ниже

          

    Hudson Reamer

    I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.

    I hope to one day go to MIT or Stanford to study computor science of computor engineering.

    I will build people custom computors for an 100 dollar building fee and the price of the PC parts

    его ваш hudson, p1, p2, p3 абсолютный левый шаг направо. вы можете заменить «left:» в этих стилях text-align: center;