Как разделить контент на 2 части?
Есть сайт http://educationmm.shn-host.ru/
Хочу разделить в нем разделить контент на 2 части, один — на сам контент, второй — на сайд бар. У меня почему-то при разделении сайд бар появляется в углу контента, помогите, пожалуйста.
Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 21 окт 2014 в 13:59
11 1 1 серебряный знак 2 2 бронзовых знака
Попробуйте вот что: csstemplater.com
21 окт 2014 в 14:08
21 окт 2014 в 14:53
Ничего из этого мне, к сожалению, не подходит. 🙁
21 окт 2014 в 17:49
@k0stik0v как такое вообще возможно?
21 окт 2014 в 17:55
@inferusvv, ну, я, короче, хотел расписать, почему у меня не получается, но напишу просто то, что руки не из того места растут.
21 окт 2014 в 18:13
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
#content < float:left; >#sidebar
Отслеживать
ответ дан 21 окт 2014 в 20:15
176 2 2 золотых знака 5 5 серебряных знаков 19 19 бронзовых знаков
Вообще плохое решение. Тогда уже сначала sidebar, ему float left и ширину задать. А у контента margin-left равный или больший ширине сайдбара.
22 окт 2014 в 14:31
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как поделить страницу на 2 области (на каждой своя полоса прокрутки)?
Нужно разделить страницу на 2 области, в левой части список, а в правой контент по выбору из списка.
При наведении мыши прокручивается та или иная область. Подскажите, как это сделать, желательно в деталях.
- Вопрос задан более трёх лет назад
- 19231 просмотр
1 комментарий
Оценить 1 комментарий
Алексей Чернов @Limme Автор вопроса
При этом не должна быть видна сама полоса прокрутки, или изменить ее внешний вид
Вёрстка страницы сайта
Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
- Содержание:
- 1. Как разбить макет страницы на секции
- 2. Разметка шапки сайта и позиционирование её элементов
- 3. Создание сетки для основной части страницы
- 4. Разметка подвала страницы
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.
Стандартная веб-страница содержит следующие секции:
Мы не будем использовать элемент , так как он поддерживается не всеми браузерами.
Элементы , и — блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента . Страница с такой разметкой будет хорошо смотреться на небольших экранах, но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:
.container < width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; >Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементов
Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:
Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):
.logo < float: left; >nav < float: right; >nav ul < margin: 0; padding: 0; list-style: none; >nav li < display: inline-block; /*один из способов разместить элементы в строку*/ >Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.
Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float ) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container :
.container:after
Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:
.container
Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.
В нашем примере высота логотипа равна 38px , поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:
nav a
3. Создание сетки для основной части страницы
Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float :
.container div < float: left; margin-bottom: 15px; >.col-1-2 < width: 50%; >.col-1-3 < width: 33.3333333333%; >.col-1-4 < width: 25%; >.col-2-3
Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:
Высоту блоков можно зафиксировать, указав её явно, например, .container div . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.
4. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
Разбиваем страницу на две равные колонки
Два div’а с абсолютным позиционированием. И что Вы будете делать, если ниже этих колонок, имеющих произвольную и заренее неизвестную высоту, необходимо будет вывести подвал?
Никита :
Отберите у школьников права на публикацию.
Administrator :
Школьников среди авторов нет.
Administrator :
Друзья, данный сниппет, впрочем как и другие, является одним из вариантов разбивки страницы на две равные колонки, поэтому не стоит его рассматривать как единственно верный. Существует 1000 и 1 способ разбить страницу или блок на колонки, равные по ширине/высоте. И ни про один из этих многочисленных способов нельзя сказать, что он будет единственно правильным, который должен применяться всеми. Поэтому данный сниппет можно применить не только к странице в целом, но и к отдельному блоку, а также в совокупности с другими приемами разметки страницы.
Так или иначе этот способ является наиболее неоптимальным.
Интересно а как разделить страницу на две разноцветные части по 50% но по горизонтали? Т.е. когда первая часть расположена над второй.
SelenIT :
Если нужно разделить видимую область на две половины по вертикали, то проще всего использовать единицу vh (min-height: 50vh). Либо стандартный вариант с html, body
Александр :
Как сделать так чтобы слева формировались обьявления на покупку,а справа на продажу? Есть возможность переделать вышеописанный скрипт под это?