что значит съехала верстка
Съезжает верстка. Кто виноват и что делать?
P.S. Футер переделываю, не обращайте внимания.
1) Да, склеить, причём было бы лучше вместе с фоном, имхо. Но если совсем хочется отдельными элементами делать, то каждому:
Отдельно красному шарику меняете значение transform под нужный вам сдвиг. (Вообще это дедовский метод центрирования). Какой-то адаптив будет.
2) Уже сказали про wrap. Вообще, проверьте свой масштаб браузера, у меня порядок вроде
3) Нет. Обычно она либо просто «плавает», мол, «можно проскролить вниз там что-то есть» или при клике скроллит на следующий экран (секцию).
4) Слева внизу эт где? Не нашёл
Ну, на моем 1280 пиксельном мониторе там вообще каша, но уж промолчал, поскольку понял, что адаптива нет совсем)
А про 1) так их проще в один контейнер загнать, сделать в нем композицию и потом двигать контейнер как вздумается, я то сначала не прошарил, что тс про них вел речь.
начну с 4 пункта: Посмотрите на картинку она собрана не верно, по этому по левому краю ее и нет.
пункт 3 стрелка сделана для того что весь хедер должен быть на высоту экрана и она сообщает о том что нужно листать сайт
2 пункт не понял проблемы
и наконец-то пункт 1 делай картинки абсолютом и центруй их.
Съезжает верстка
Съезжает кнопка поиска
В общем, я студент и задали в колледже сделать сайт на WordPress, начал делать, нашел тему, все.
Съезжает блок вывода событий
На главной странице сайта http://nirvana-ekb.com/ съезжает первый блок события. Не могу понять в.
Съезжает footer и поля для отзывов
Здравствуйте, такие вопросы: 1) Поставил тему virtue для Woocommerce, есть проблема,при малом.
Съезжает Верстка
Доброго времени суток. Я начинающий вебкодер и возникла следующая проблема. Есть сайт pianonots.ru.
. Было изначально в шаблоне. Из за этого h1 у меня получается два заголовка h1, что семантически неверно. Но ничего не могу с этим сделать. Пробовала поменять на div с таким id, но при этом едет верстка не только шапки, но и навигационного меню. Смотрела стили, вроде эти изменения не должны сказаться, но на деле выходит иначе
Вложения
 | basic_child.rar (46.4 Кб, 2 просмотров) |
— плохо искал значит. В папке inc все
Тег сработает в любом случае: будь это страница с выводом последних постов или страница где для главной страницы сайта установлена статическая страница.
Когда для главной установлена статическая страница, is_home() уже не работает на главной, а работают: is_front_page(), is_singular(), is_page()
В настройках Параметры > Чтение > На главной странице отображать (Settings > Reading > Front page displays) можно установить статическую страницу для главной и статическую страницу для вывода последних постов. is_front_page() в любом случае будет работать для главной страницы сайта, а is_home() будет срабатывать только для страницы с выводом последних постов.
Добавлено через 1 минуту
— конечно отпад. Пьяный он там что ли тему писал.
Слетает верстка при подгрузке постов
Обнаружил баг, открыв пост в новой вкладке переключил на полную версию сайта. Вернувшись на предыдущею вкладку, где осталась мобильная версия, начал прокручивать вниз при подгрузки постов верстка съехала.
Багрепорты
4.6K постов 1K подписчиков
Правила сообщества
— Порядок действий для повторения проблемы
— Версию Пикабу: ПК, мобильная браузерная, приложение Android, приложение iOS
— Ваше устройство, ОС, браузер
Приложите скриншоты или видео с проблемой
И мы постараемся помочь 🙂
Сломался поиск тегов
Уважаемый @SupportTech, у меня на мобильной версии пикабу перестал работать поиск по тегам. Когда вводишь тег, то ничего не отображается. Это можно как нибудь исправить?
Проблема с воспроизведением видео
Для тех, у кого в «лучшем» пусто
Включаешь NSFW и видишь новые посты:
@SupportTech, Ребята, у вас там точно все ок? Может, настало время уволить менеджеров и внедренцев умной ленты и вернуть все назад, не?
P.S. Я не даю согласие размещать мой пост в любом сообществе без моего ведома и разрешения.
Особенно это касается «Чая с вареньем» или как его там.
Когда зашёл на пикабу со смартфона
Баг при подгрузке постов
@SupportTech, вот удалось записать видео, когда при подгрузке постов тебя кидает не понятно куда, и предыдущие посты уходят далеко вверх. redmi note 7, браузер chrome обновлен
точно так же посты прокручивает и на пк
Баг с откатом на старые посты
Происходит с ноутбука, браузер хром. Обычно я, когда закрываю браузер перед выключением ноута, никогда не закрываю вкладки по отдельности. Чтобы при следующем запуске хрома все мои вчерашние вкладки сразу открывались. Теперь представим, что я открыла хром «с нуля», то есть без вчерашних вкладок. Открываю заново Пикабу, читаю несколько страниц горячего от сегодняшней даты, отвлекаюсь на другие вкладки, а когда возвращаюсь на Пикабу, то вижу не то место, где остановилась, а тот самый первый пост, с которого и начала чтение. Обновляю горячее, снова читаю, отвлекаюсь, возвращаюсь на Пикабу и вижу снова тот первый пост.
Но даже в рамках одного дня это раздражает, потому что открыв утром Пикабу и прочитав несколько страниц, вечером я вернусь на открытую вкладку и увижу первый утренний пост.
С другими сайтами в хроме такого косяка нет.
Это блог
Эта статья для студентов базового и продвинутого курсов по вёрстке в HTML Academy.
Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В продвинутом курсе этому посвящён отдельный раздел. Я разберу типичные ошибки новичков.
Фиксированная высота
Студенты часто попадаются на кнопках. Например, на таких:
Задают кнопке высоту 50px, верхний паддинг 10px. Кнопка выглядит отлично. Что будет, если написать на кнопке «Купить за 1000 рублей»? Текст вылезет из кнопки:
Как надо? Надо паддингами:
Есть паддинги сверху и снизу — контент сам растягивает кнопку. Бывает, что нужно задать высоту какому-нибудь блоку с фоновой картинкой и текстом внутри:
Заголовок на фоне фотографии
Вместо высоты — паддинги и минимальная высота.
Где можно использовать фиксированную высоту? Там, где нет текста. Например, в декоративных блоках.
Выравнивание по центру
У нас всё та же кнопка:
Маркетологи провели исследование и решили, что «заказать онлайн» больше привлекает пользователей, чем купить. Так и написали:
Текст упёрся в края. Если бы были паддинги по бокам, всё было бы хорошо:
Выровняли по центру — проверьте паддинги.
Не все паддинги
Вот симпатичная текстария:
Но я пишу в ней текст, и вот он упёрся в правый и нижний края:
Потому что паддинг есть только сверху и слева:
Если отступ снизу отличается от отступа сверху, используйте запись в три числа (сверху, по бокам, снизу):
Ну и в тех редчайших случаях, когда отступ слева отличается от отступа справа, используйте четыре числа:
Паддинги описываются по часовой стрелке, начиная с верхнего:
Если значения для стороны нет, значение берётся с противоположной стороны. Когда это понимаешь, порядок сторон и что значат два или три паддинга уже не забудешь. У бордеров и марджинов порядок такой же.
Проставляйте все паддинги одним свойством.
Выпадающие элементы
Этот блок хорошо смотрится в своём окружении за счёт отступов соседей:
Но если перед ним встанет какой-нибудь другой блок, то всё:
Старайтесь делать так, чтобы из блока ничего не выпадало. Ни сверху, ни снизу, ни справа, ни слева:
Тогда ваша вёрстка будет гораздо более предсказуемой.
Из блоков ничего не должно выпадать.
Флоаты
Флоаты придумали для вставки картинок и врезок в текст, чтобы текст их обтекал:
Потом флоаты стали использовать для раскладки страницы, компоновки блоков и вообще чего угодно. Например, для вёрстки такого контрола:
Здесь чекбокс прифлоачен и имеет правый отступ. Вот что будет, если добавить больше текста:
Строки ниже чекбокса подвигаются влево, потому что обтекают чекбокс:
На этом же принципе основаны раскладки на флоатах. Но в 2016-м году такие штуки и на флексах делать можно.
Уберите лишнее обтекание.
Абсолютное позиционирование
Абсолютно позиционировать декоративные блоки — это нормально. Вот, например, абсолютно спозиционированный псевдоэлемент (новинка):
А вот что будет, если текст будет подлиннее:
Последнее слово уже не влезло. Чтобы такого не было, зарезервируйте место под абсолютным элементом. Например, с помощью паддинга:
Резервируйте место под абсолютно спозиционированными блоками.
Как сверстать и не облажаться
Откройте вашу вёрстку. Откройте веб-инспектор. Возьмите какой-нибудь блок. И добавьте в него побольше текста. Ещё больше. Что будет, если добавить четыре строки? Шесть? Длинное слово без пробелов?
Протестируйте всю страницу блок за блоком. И поправьте всё, что развалилось. Ну а как вы хотели?
Подписывайтесь на телеграм-канал про фронтенд, дизайн, работу и жизнь.
Переполнение и потеря данных в CSS
В этой статье Рейчел Эндрю рассматривает ситуации, в которых вы можете столкнуться с переполнением при верстке сайтов, и объясняет, как развивался CSS, чтобы создавать более эффективные методы разметки в ситуациях, когда объёмы контента заранее неизвестны
CSS был спроектирован, чтобы содержимое было удобочитаемым. Если вы рассматриваете HTML-документ, который размечен с помощью заголовков и параграфов (без применения CSS), он отображается в браузере в удобном для чтения виде. Заголовки большие и полужирные, а между параграфами остаётся пространство, которое контролируется таблицами стилей, встроенными в браузер. Однако, как только потребуется изменить макет страницы, вы начнете брать контроль над оформлением в свои руки. В некоторых ситуациях это будет значить, что вы берете на себя работу с переполнением элементов.
В этой статье я собираюсь рассмотреть разные ситуации, при которых мы можем столкнуться с переполнением в вебе. Мы увидим, как новые методы разметки и новые значения в CSS могут помочь нам справиться с переполнением и создавать менее хрупкий дизайн. Я также объясню одну из фундаментальных концепций, лежащих в основе проектирования на CSS — это предотвращение потери данных.
Что мы подразумеваем под переполнением?
Если вернуться на несколько лет назад (перед приходом таких методов разметки, как Flexbox и Grid), подумайте, как бы вы реализовали пример, отображенный ниже. Очень простой макет из трёх блоков, имеющих разное количество содержимого, но нижняя граница которых должна быть на одной линии.
С помощью float такая, казалось бы, простая задача была невозможна. Когда блок становится обтекаемым (float), он никак не взаимодействует с соседними; это значит, что нет возможности узнать, что следующий элемент выше и увеличить текущий до такой же высоты.
Иногда, пытаясь выстроить элементы по одной линии, разработчики задавали фиксированную высоту блоков, пытаясь предугадать количество возможного содержимого, чтобы сделать высоту одинаковой. Конечно, в вебе все не так просто и когда количество содержимого отличалось, или размер текста становился больше, текст начинал выходить за нижнюю грань блока. Это и было переполнение (overflow).
Иногда люди спрашивают, как они могут предотвратить попадание слишком большого количества содержимого на сайт. В техподдержку моей CMS обращались пользователи, которые спрашивали, как ограничить содержимое по этой самой причине. Они говорили, что этот дополнительный контент «ломает макет». Для тех из нас, кто понимал, что невозможность узнать высоту элементов было фундаментальной природой вёрстки, вынуждало создавать макеты, которые скрывали отсутствие равных по высоте блоков. Распространённым решением было добавление градиента с эффектом исчезновения контента, выходящего за границы. Мы бы избегали использования фоновых цветов и рамок для блоков. Или мы бы использовали техники создания искусственных колонок, чтобы сделать высоту элементов одинаковой.
Функция minmax() дает вам возможность создавать интерфейсы так, будто они имеют идеальный фиксированный размер. В идеальном мире (когда количество содержимого соответствует ожиданиям), вы получите эти красивые одинаковые строки. Однако, если добавить дополнительный контент, не произойдет переполнения, как если бы вы задали фиксированную высоту строк в 200px. Строка будет расширяться; это может быть не совсем то, чего хотелось бы вам, как разработчику, но это не будет нечитаемым.
Строчное переполнение
Риск переполнения возникает всякий раз, когда мы ограничиваем размер элементов. В примере выше я описываю ограничение в измерении блока, которое пользователи с горизонтальным направлением языка будут воспринимать как высоту. Тем не менее, мы также можем получить переполнение, если ограничим ширину блока. Это то, что мы видим в меме «CSS is Awesome».
Автор этого мема, прокомментировал публикацию на CSS-Trick об этом, сказав:
Теперь я немного лучшее понимаю концепцию переполнения, но в то время мой мозг просто взрывало непонимание того, почему кто-то подумал, что поведение по умолчанию должно просто выталкивать текст справа от блока, вместо того, чтобы сделать блок больше, как это всегда делали таблицы.
Так почему CSS выталкивает текст за рамки блока, вместо увеличения размера самого блока?
В меме получается переполнение в строчном направлении. Слово «awesome» больше, чем ширина, примененная к блоку, поэтому и переполняет его. CSS довольно разумно предполагает, что если вы задали блоку определённую ширину, вам нужен блок именно такой ширины. Возможно, он должен поместить в макет, который сломается, если блоки внезапно станут больше, чем было установлено.
Эта конкретная проблема (то есть, необходимость задавать размеры всем элементам макета и убеждаться, что в сумме они не превышают доступное пространство контейнера), — это та проблему, которую современные методы вёрстки решаются для нас. Если мы представим, что наш блок имеет такой специально подобранный размер, чтобы поместиться в строку с другими блоками в float-сетке, сегодня вместо этого вы можете выбрать использование Flexbox.
Используя float-макет, вы должны устанавливать размеры каждому элементу — возможно, до того, как вы узнаете какое у него будет содержимое. В этом случае вы можете столкнуться с тем, что большое содержимое будет находиться в маленьких контейнерах, а у небольшого содержимого останется лишнее пространство вокруг.
Однако, если мы используем Flexbox, мы можем позволить браузеру рассчитать, сколько пространства отдавать каждому элементу. Flexbox обеспечит более крупные элементы бОльшим пространством, а маленькие получат меньше. Это гибкое распределение размеров означает, что блок, который содержит слово «awesome» увеличится, чтобы вместить весь контент и текст не выйдет за его рамки. Проблема переполнения решена; такое поведение является именно тем, для чего Flexbox был создан. Flexbox отлично справляется с элементами разного размера и организует их в наиболее подходящий для них макет.
Вне Flexbox можно сказать, что наш блок должен быть настолько большим, насколько это нужно для контента и не более. Ключевое слово min-content может быть использовано как значение для свойства width или inline-size при работе с логическими свойствами, относящимися к потоку. Установите width: min-content и блок увеличится настолько, чтобы вместить слово «awesome».
Предотвращение потери данных
В определенных ситуациях это может быть серьезной проблемой. Если вы умудрились сделать вёрстку настолько хрупкой, что кнопка вашей формы вышла за пределы видимой области, у ваших пользователей не будет возможности отправить форму. Если последний абзац текста обрезан, мы никогда не узнаем, чем закончилась история. Также, проблема с исчезающими элементами заключается в том, что не всегда очевидно, что они пропали. Как разработчик, вы можете не заметить проблему, особенно если это происходит только при определенных размерах области просмотра в отзывчивом дизайне. Ваши пользователи могут не заметить проблему — они просто не увидят призыв к действию, или подумают, что проблема, по которой они не могут сделать заказ, в их устройстве и просто уйдут. Тем не менее, если элементы переполняются там, где не должны, вы, скорее всего, заметите это. Или, в худшем случае, кто-то, зашедший на сайт, заметит это и даст вам знать.