Как правильно делить сайт на блоки?
Всем здравствуйте!
В то время, когда наши космические корабли бороздят просторы Вселенной, у меня возникли вопросы, потому прошу помощи и совета.
1. Посоветуйте статьи/новости/что угодно, где рассказывают как правильно разбивать сайт перед версткой. То есть что лучше отдать под header, что в footer и т.д.
2. Есть простенький сайт и с ним возник вопрос, как мне его разбить. Даты которые слева, отдать их под sidebar или учитывать с правой частью там где контент?
Просто нашел 2 решения (если даты я не делаю под sidebar):
1. Дату и контент делаю как 2 div’a и по необходимости у контентной части меняю фон.
2. «Играюсь» с градиентом, как привели примером тут, но немного сложновато.
Или может все таки часть с датами отдать под sidebar отдельно?
Заранее спасибо Вам за ответы! 🙂
- Вопрос задан более трёх лет назад
- 988 просмотров
Комментировать
Решения вопроса 3
Как по мне, таблицы лучше верстать таблицами.
По-моему универсальных советов нет, ко мне это пришло просто с опытом и с логикой.
По ссылке если уж верстать дивами, то каждая эм «новость» — див, в диве ещё два, один из них под дату, другой под текст. Иначе если Вы будете делать сайд-баром (отдельный див я так понимаю во всю высоту и рядом отдельный див под текст) то проблематично будет их выровнять что бы даты начинались там же где и контент по высоте, если не фиксированным делать.
Заголовок в див, ниже поля recent search и тд ещё в один див.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Star Trooper @FirstTime Автор вопроса
1. Не прошу прям универсальных советов, но может определенные правила, с которыми все согласны и в мире так делается верстка, что-то подобное есть?
2. Также думал, взять 1 див и вложить туда 2, как вы и сказали. А то так буду мучатся с выравниванием.
Может быть и есть, но давненько я был новичком, поэтому не слежу за этим =) Могу предложить посмотреть bootstrap-3.ru/bootstraptheme.php и попробовать осваивать вёрстку так.
Т.е. от сложного к простому. Но это моё имхо.
CSS — Урок 10. Позиционирование блоков
В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).
В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:
| шапка сайта | |
| меню | контент |
| низ сайта | |
Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:
CSS позиционирование
| шапка сайта | |
| меню | контент |
| низ сайта | |
Разделы веб-страницы
Практически любую веб-страницу можно разбить на ряд визуальных блоков, которые обычно отделяются друг от друга фоном или пустым пространством, поэтому хорошо заметны (рис. 1).
Рис. 1. Деление веб-страницы на разделы
Подобное разделение помогает нам ориентироваться на веб-странице и сразу выделять главное и второстепенное содержимое. Нам проще воспринимать веб-страницу, когда на ней всё интуитивно понятно — вот навигация, это основная статья, а это строка для поиска. Браузеры так же учитывают такое деление и могут готовить версию для чтения или печати, содержащую только статью — без рекламы, ссылок и лишнего оформления. Речевые браузеры, нацеленные на слабовидящих людей, тоже могут пропускать ненужную в данный момент информацию и переходить непосредственно к чтению самой статьи.
Таким образом от разделения веб-страницы на блоки выигрывают все. Пользователям удобнее и нагляднее пользоваться сайтом, а разработчику проще писать код HTML и его поддерживать.
Вот какие разделы могут присутствовать на веб-странице.
- Навигация — основные ссылки для перехода к разным веб-страницам сайта.
- «Шапка» — вступительная верхняя часть веб-страницы, содержащая логотип сайта, его название, поиск по сайту, навигацию и др.
- Основное содержимое — для информационных сайтов это статья с названием, датой публикацией, автором, комментариями к статье.
- Боковая панель — как правило, вертикальный блок, содержащий второстепенную информацию, вроде формы поиска, меню, голосования, рекламы и др.
- «Подвал» — заключительная нижняя часть веб-страницы, обычно содержащая контактную и правовую информацию. Это телефоны, адреса, схема проезда, кнопки социальных сетей, дублирование навигации и др.
В HTML есть несколько элементов, позволяющих поделить веб-страницу на разделы и задать им определённый смысл.
Разделение страницы на 3 независимых вертикальных блока
Задача состоит в том, что необходимо разделить на три части страницу. Два сайдбара слева и справа, и контент посередине. Ширина каждого блока статическая и главное что блок с контентом должен отображаться по центру. Неожиданно возникли проблемы с такой задачей и нигде не могу найти решение, уже вроде все перепробовал и интернет прошерстил. Вот что у меня вышло с помощью display: table. Но блоки между собой очень зависимы, и я даже не могу воспользоваться какими-либо отступами для контента, не затрагивая другие блоки. HTML:
some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content .page-wrapper < display: table; width: 100%; height: 100%; >.left-panel-wrapper, .right-panel-wrapper < display: table-cell; width: 100px; height: 100%; background-color: #f6f8fa; >.left-panel, .right-panel < display: inline-block; >.content-wrapper < display: table-cell; >.content
Отслеживать
задан 13 мар 2018 в 18:23
355 3 3 серебряных знака 19 19 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.page-wrapper < display: flex; justify-content: space-between; >.left-panel-wrapper < width: 200px; background-color: orange; >.right-panel-wrapper < width: 200px; background-color: green; >.content-wrapper < /*width: 250px;*/ width: calc(100% - 400px); padding: 0 30px; > some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
на inline-block с костылём
.page-wrapper < text-align: justify; overflow: hidden; min-width: 1000px; >.page-wrapper:after < content: ''; width: 100%; display: inline-block; >.left-panel-wrapper < display: inline-block; width: 200px; background-color: orange; vertical-align: top; >.right-panel-wrapper < display: inline-block; width: 200px; background-color: green; vertical-align: top; >.content-wrapper < display: inline-block; vertical-align: top; width: 500px; margin: 0 auto; padding: 0 10px; >/* костыль */ .left-panel-wrapper, .right-panel-wrapper, .content-wrapper < position: relative; >.left-panel-wrapper:before, .right-panel-wrapper:before, .content-wrapper:before
some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
Суть в том, что обвертки даёте overflow: hidden; а каждой колонки подкладку в виде before, через absolute, что создаёт вид background.