Съезжает верстка. Кто виноват и что делать?

Question

[Станислав Ботев]

Здравствуйте.
Взялся за новый макет с горящими глазами. Вырезал, накидал разметку, сверстал. Появились вопросы:

1. В макете ниже хедера присутствуют три изображения, находящиеся не друг на друге. То есть их нельзя взять и отцентровать вместе. Подгоняю попиксельно - при скроллинге съезжаются в кашу. Желаемой адаптивностью даже и не пахнет. Как решить проблему? Может, их надо склеить?
   
2. При просмотре финального результата колонки съезжаются друг на друга. При отдалении всё нормально. В чем может быть проблема?
   
3. Как понимаю, стрелка вниз должна скроллить экран до футера?
   
4. Фоновая картинка не отображается слева внизу. Уже почти всё перепробовал. Как замостить?
   
   

P.S. Футер переделываю, не обращайте внимания.

Answer 1

[Егор Живагин]

1) Да, склеить, причём было бы лучше вместе с фоном, имхо. Но если совсем хочется отдельными элементами делать, то каждому:

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Отдельно красному шарику меняете значение transform под нужный вам сдвиг. (Вообще это дедовский метод центрирования). Какой-то адаптив будет.
2) Уже сказали про wrap. Вообще, проверьте свой масштаб браузера, у меня порядок вроде
3) Нет. Обычно она либо просто "плавает", мол, "можно проскролить вниз там что-то есть" или при клике скроллит на следующий экран (секцию).
4) Слева внизу эт где? Не нашёл

Comments

[alvvi]

Ну, на моем 1280 пиксельном мониторе там вообще каша, но уж промолчал, поскольку понял, что адаптива нет совсем)

А про 1) так их проще в один контейнер загнать, сделать в нем композицию и потом двигать контейнер как вздумается, я то сначала не прошарил, что тс про них вел речь.

Answer 2

[Дмитрий Пыркин]

начну с 4 пункта: Посмотрите на картинку она собрана не верно, по этому по левому краю ее и нет.


пункт 3 стрелка сделана для того что весь хедер должен быть на высоту экрана и она сообщает о том что нужно листать сайт
2 пункт не понял проблемы
и наконец-то пункт 1 делай картинки абсолютом и центруй их.