Разделить блок на две части
HTML + CSS Разделить сайт на две части
Здравствуйте, в html и css я не очень силён. У меня не получается сделать два столбика на.
Разделить блок на 4 части
Хочу разделить на 4 области, две области margin суммируется и отступ идет двойной. <div.
Разделить горизонтальный блок на три части
Уже который час не могу разобраться, как можно разделить горизонтальный блокна три части в .css .
Разделить страницу на 4 части
Как разделить страницу на 4 части так что бы по середине то бы был блок Что бы эти все блоки.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Разделить сайт на 4 части
Добрый день! Подскажите, пожалуйста, с CSS, как правильно разбить сайт на 4 части. Должно.
Разделить div на 3 равные части
Приветствую. Интересоваться вёрсткой начал около 2-ух недель назад. Пока-что всё получается, за.
Как разделить меню горизонтально на 2 части
Помогите пожалуйста с Оформлением меню (как разделить горизонтально меню на 2 части, чтобы по.
Не получается разделить страницу на 2 активные части
Прошу помочь: Задача следующая надо разделить страницу на 2 активных части (при нажатии переходим.
Разбить один div на 2 колонки. не получается выполнить разметку
У меня на странице есть div. Этот div надо разбить на две колонки: колонка1 с шириной 70% колонка2 с шириной 30% Мои проблемы с высотой. Высота колонок может быть любой. Также, ширина колонок можно задаваться только в процентах. Раньше у меня было это сделано на основе таблиц, то сейчас вроде используют css: position, float. Реализовать такое решение у меня не получается 🙁 Вот изображение: http://s020.radikal.ru/i709/1406/c3/2f9021202ede.png
Отслеживать
задан 29 июн 2014 в 14:11
alexanderdronov alexanderdronov
147 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
div1 div2 .div1 < width: 70%; min-height: 150px; background: #ccc; float: left; >.div2 < width: 30%; min-height: 150px; background: #c00; margin-left: 70%; >.footer
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
ответ дан 29 июн 2014 в 14:29
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Как разделить блок div на две части?
Здравствуйте! Подскажите пожалуйста, как мне разделить блок на две части, но при этом, чтобы они были в общем блоке? 1-я часть картика + описание черным текстом, а 2-я часть должна быть только с описанием зеленого текста.
Я имею ввиду, у меня есть описание черным текстом и оно от картинки имеет отступ и при этом по всей высоте идет ровно. Так вот как сделать отступ зеленого текста от черного и чтобы зеленый текст шел так же ровно по всей высоте как черный.
Извините за то, что криво объяснил, по другому не знаю как объяснить =( Я приложил скриншот на котором нарисовал разделение. Но мне нужно чтобы самой полоски разделения в блоке не было видно. Нужно чтобы зеленый текст был за черной полосой , но при этом этой полосы не было видно — как-то так
- Вопрос задан более трёх лет назад
- 3810 просмотров
2 комментария
Простой 2 комментария
Вёрстка страницы сайта
Вёрстка страницы представляет собой процесс разработки структуры 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. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.