Разместить меню и логотип в одну строку и правильно выровнять их внутри блока

Разместить меню и логотип в одну строку и правильно выровнять их внутри блока

В css-файле указать ширину получившийся линии, а так же центрировать контейнер по горизонтали, вот так:

width: 930px; — ширина

margin: 0 auto; — центрировать элемент по горизонтали (контейнер центрируется по горизонтали страницы)

Вcssbody написать: — это уберет рамочку вокруг страницы, по сути боди – это страница

padding: 0; — отступы внутрь элемента. количество пикселей внутрь элемента рамочкой за счет пикселей самого элемента (элемент не увеличивается)

margin: 0; — отступы наружу элемента>

Указать, в divcss свойство box-sizing: border-box; — применяется чтобы коммандыпаддинг и маргинне расширяли элемент настолько, насколько должны забрать пикселей.

Например я указываю высоту и ширину в 500 пикселей, если я делаю паддинг или марджин на 10 пикселей, то блок автоматически увеличится, игнорируя заданную высоту и длину на 10 пикселей, если не применить это свойство.

Сделать фоновую картинку на первом экране и сам первый экран

Вsection, вheaderиfooterввестифоновые картинки или цвета. Для этого в css файле указать

то же самое для футера, а в каждом section указать classв html иcss. И каждому классу так же как и в хедере добавить фоновую картинку.

no-repeat — не повторять картинку при уменьшении масштаба в браузере (т.е. не замощать)

center — положение картинки по горизонтали по центру

top — положение картинки по вериткали (прикрепить к верхнему краю)

cover — чтобы картинка расширялась на всю ширину экрана, растягивалась

! Из заотсутсвия контента (высоты) фоновая картика не будет отображаться

Для того, чтобы сделать высоту фоновой картинки на весь экран нужно написать в css:

height: 100vh; — обращаю внимание на vh ! (по сути это процент области экрана по высоте)

background: url(../img/first-bg.jpg) no-repeat center top / cover;

Так же можно в ручную задать количество пикселей, той же коммандой, только использовать не vh, а px

Разбить на крупные элементы – строки и блоки

Логотип и меню – как правило в одну строку, их оба стоит написать внутри одного div

nav — тег меню (обычно внутри хедера и див), внутри него уже открывается список.

в нем всегда есть стандартные паддинги (рамки), которые нужно обнулить

для создания пунктов меню:

ul– список, врнутри него пункты – li

a – ссылки, если не знаю адресс ссылки, пишу #

display: inline; – преобразует блочный элемент в строчный, так можно пункты меню преобразовать в строку

Для этого это свойство нужно применить ко все li в ul

Так же для того, чтобы убрать подчеркивания ссылоки придать нужные свойства тексту меню в css ввести применительно к ссылкам aследующее:

color: #fff; — задает цвет отображаемой ссылки в данном случае указан белый цвет

text-decoration: none; — убирает подчеркивания в меню (при строке)

text-transform: uppercase; — делаеттекстбольшимибуквами

font-size: 14px; — указывает размер шрифта>

Для того, чтобы слделать в меню отступы нужного размера между словами используется команда в css для li

margin-right: 41px; — отступы справа между каждым пунктом списка (в данном случае строки меню)

Для того, чтобы выровнять текстовый блок по центру используется команда cssвнутри div

text-align: center; — выравнивание текста по центру

Так же для того, чтобы сделать полноценную строку или блок, в котором будет только его содержимое, и следующие элементы вне этого блока из за расположения контента блока справа и слева не будут заполнять пустое пространстов по центру или где нибудь еще в блоке.

Разместить меню и логотип в одну строку и правильно выровнять их внутри блока

Узнать предназначение:

content:»; — особенно что это такое

width: 100%; — видимо это ширина 100% от экрана

Узнать:Указать в bodycssшрифты, а так же убрать стандартные паддинги у указать фоновый цвет

font-family: Arial, sans-serif;

font-family: Arial, — запрашиваем на компьютере пользователя шрифт Ариал, если его нету, то будет использовано свойство:

sans-serif; — группа шрифтов без засечек (любой шрифт из этой группы)

· Стандартные вводимые значения: сделать у бодиморнинг 0 и паддинг 0 и т.п.

· Методы управления блоками и строками, ориентации элементов в пространстве

· Правила верстки в целом

· Операторы ссылок, кнопок и форм, списки.Специальные операторы.

· Операторы управления изображениями

· Подключение библиотек, шрифтов, языки – то что в хеад

Правила верстки в целом

· Там, где используется float лучше всего обарачивать в общий контейнер и присваивать ему класс clearfix

· Можно в css писать в классах конкретные элементы к котрорым применяется правило, не обязательно указывая всю последовательность вложенности, например .menuli

· Принцип наследования – дочерние элементы (не все и не всегда) присваивают свойства тех, в которые они вложены. Это позволяет сильно упрощать код.

· Можно очень быстро задать класс для тега вот так: имятега.класстега

· Порядок верстки. От больших элементов к их деталям. Сверху-вниз, слева-направо.

· Обрати внимание на то, какой цвет текста и шрифт преобладает (и другие свойства текста) на сайте, затем опиши эти свойства в body

· Не нужно задавать блокам с разным содержимым но одинаковыми стилевыми свойствами разные классы (классы мы указываем для стилей а не по смыслу)

· Можно задать несколько классов одному тегу, для этого нужно указать их через пробел в одном class

· Нужно разбивать однотипные элементы на блоки

· Лучше сразу в боди прописать наиболее распрастраненный цвет текста, размер шрифта и другие текстовые параметры

Операторы ссылок, кнопок и форм, списки.

· Все меню всегда делаются тегом списков – так принято. Так же принято всегда окружать список ul тегом nav, обозначающим меню.

· Уul и liпо-умолчаниюdisplay: list; Чтобы не было проблем со свойствами, нужно превратить их в блок, применяется display: block;А затем, чтобы сделать элемент строчным применяется float: left; (или right).

· Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>.При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

· list-style-type изменяет вид маркера для каждого элемента списка.

Маркированный список – свойства:

circle Маркер в виде кружка.

disc Маркер в виде точки.

square Маркер в виде квадрата.

Нумерованный список – свойства:

armenian Традиционная армянская нумерация.

decimal Арабскиечисла (1, 2, 3, 4. ).

decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ).

georgian Традиционная грузинская нумерация.

lower-alpha Строчные латинские буквы (a, b, c, d. ).

lower-greek Строчные греческие буквы (α, β, γ, δ. ).

lower-latin Это значение аналогично lower-alpha.

lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ).

upper-alpha Заглавные латинские буквы (A, B, C, D. ).

upper-latin Это значение аналогично upper-alpha.

upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ).

Общие свойства:

noneОтменяет маркеры для списка.

InheritНаследует значение родителя.

· Для создания форм пишется тег form в html, внутри него помещаются теги input,

Как выровнить по центру блок с элементами DIV, UL, LI

Admin 18.12.2017 , обновлено: 09.05.2018 CSS, HTML

Разбираем центровку блочных элементов в CCS. Располагаем по центру несколько DIV или LI элементов. Предлагаю несколько своих вариантов на большинство случаев.

В этой статье нет цели привести все варианты центровки и переписать то, что уже где-то есть. Не помню уже почему, но меня часто не устраивали предлагаемые варианты. Либо там были фиксированные блоки либо все слетало при адаптивной вёрстке либо ещё какие недостатки.

Иногда для выравнивания по центру достаточно добавить пару атрибутов и не нужно ничего сложного городить. Например, так я центрировал рекламу РТБ от Яндекс.

Ниже несколько вариантов адаптивной вёрстки выравнивания блоков по центру, которые я использую на своих сайтах. И если первый достаточно распространённый, то возможно, какие-то другие способы даже не будут описаны в Интернете именно таким образом.

Вариант 1

Отцентрируем содержимое UL из 4 элементов LI, которые находятся в блоке DIV с классом container.

В таком случае в CSS достаточно следующих правил:

.container ul <
text-align: center;
list-style: none;
>

.container li <
display: inline-block;
>

Получим следующий вид:

Здесь отцентрировано 4 элемента LI. При уменьшении размеров экрана не помещающиеся элементы уходят вниз.

Если блоки LI с этими свойствами не устанавливаются по центру, значит какое-то другое свойство им мешает. Например, это может быть свойство float:left или display: table; или какое-то иное.

Теперь верхнюю структуру (в базовый каркас выравнивания CSS) можно добавить и другие стили. Например, сделать фиксированного размера блоки и отступы друг от друга:

Но в таком варианте есть один минус. Блоки расположены по центру, но слева и справа огромные расстояния. Их можно уменьшить изменяя width.

А можно сделать контейнеры одинакового размера так, чтобы отступы были только между контейнерами, а слева и справа их не будет.

Тогда мы уберём margin и добавим ширину такого width, чтобы он полностью покрывал область.

Между блоками останется небольшой участок пустого пространства. А чтобы его сделать ещё больше, можно отступать внутри с помощью параметра padding.

В блоках я специально не добавляю ничего лишнего, чтобы оставить ровно те стили которые непосредственно влияют на выравнинвание. Но если вы сделаете тоже самое, то такие блоки не получить. Хотя бы потому что, во-первых, нужно добавить цвет к блоку, а во-вторых, если он пустой поставить height: 100px;. Другие атрибуты уже по своему вкусу.

Итоговый вариант такой:

В приведенном скриншоте выше я оставил другие участки сайта, чтобы было понятно, где границы блоков, потому что если они прилегают к краю, то самого края уже не видно. А на картинке белые края слева и справа — это уже другая центровка, не имеющая ничего общего с рассматриваемым примером. Повторюсь, сами блоки прилегают к краям, которых не видно, потому что блоки их полностью покрывают.

Вариант 2

Как выровнять все блоки div по центру так, чтобы блок на следующей строке выравнивался по левому краю?

Имеем следующую структуру:

Для них прописываем классы:

.archive-container-for-articles <
width: 90%;
margin: 0 auto;
>

.archive-article <
display: inline-block;
vertical-align: top;

width: calc(33.3333% — ( 0.666666666667 * 36px ) );
margin: 0 10px 0 11px;
>

Следует обратить внимание, что если менять размеры calc, то затем надо подстраивать экспериментальным путём размеры margin. Иначе блоки не будет располагаться по центру.

Эту центровку приходиться делать на глаз. Зато, если на новой строке блоков меньше, чем на строке выше, этот одинокий блок будет с левой стороны. И это смотрится куда симпатичнее, чем когда на следующей строке один единственный блок располагается по центру.

Применив технику выше, мы получим адаптивную вёрстку, со всеми равными краями, которая не будет портиться при изменении размеров экрана.

А если мы хотим, чтобы на мобильной версии было не 3 блока, а 2, то в ccs для разрешения 768 пикселей, разобьём блоки иначе:

Получим те же блоки в мобильном варианте, но уже по два блока на строку:

Вариант 3

Теперь будем выравнивать с помощью flex. Может показаться, что это идеальный способ выравнивания, потому что он действительно работает очень просто. Однако FLEX не справляется с задачей описанной в варианте 2. По крайней мере, у меня не получалось достигнуть тех же результатов.

К следующей секции:

#cssmenu ul <
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
>

#cssmenu > ul > li <
margin: 1px;
>

В приведенном примере:

Перекидывает блоки на следующую строку, если они заполняют контейнер. Иначе они будут уходить дальше за окно браузера.

Мы выравниваем содержимое блоков по центру.

Вариант 4

Ещё один вариант выравнивания с помощью технологии flex.

Имеем контейнер с двумя блоками внутри. Нам нужно, чтобы эти 2 блока делили ширину на две равные стороны.

Для этого пропишем в стилях следующие свойства:

Вариант 5

Есть ещё один вариант центровки блоков, если их строго равное количество. Например: блоков 9, по 3 на каждую строчку. И вы знаете, что так будет оставаться всегда. Например, вы делаете лендинг пейдж и знаете наверняка, что ничего лишнего между этими блоками добавляться на сайт не будет.

Итак, имеем 9 блоков следующего вида (не стал дублировать 9 раз строки, но имейте ввиду, что блоков 9):

Применяем стили для них:

.archive-container-for-articles <
width: 100%;
text-align: center;
>

.archive-article <
width: 25%;
vertical-align: top;
display: inline-block;
text-align: left;
>

.archive-article:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) <
margin: 20px 0 30px 40px;
>

.archive-article:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) <
margin: 20px 40px 30px;
>

.archive-article:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) <
margin: 20px 40px 30px 0;
>

Получим тоже адаптивную вёрстку. При уменьшении экрана не помещающийся блок будет уходить в центр низа

Преимущество данного вида центровки в том, что вы можете четко и понятно проделать отступы между блоками.

А главный недостаток, что внутрь блоков нельзя ничего поместить. Любой элемент:

будь то div или p или ещё что-то, будет считаться как внутренний элемент nth-child. В результате на него наложится стили CSS и все отступы сделанные с помощью margin сместят блоки не так как было задумано изначально.

Читайте также

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Как поставить div справа, обтекание, пример

Свойство блока float со значением right. Свойство right со значением 0.

О позиционировании блока div справа.

Позиция блока справа свойство float со значением right

Если вы используете свойство «float» со значением «right» — без дополнительных свойств, то получится блок с обтеканием.

Поставим свойство — float и положение справа –right.

float:right;/* Положение справа */

background: #fd0; /* Цвет фона */

width: 300px; /* Ширина */

Далее создадим div, присвоим ему класс, который описали сверху. И напишем в самом диве текст — Класс — sprava.

Смотрим, что мы получили:

Этот текст написан выше блока.

Далее текст, который будет написан, будет находиться ниже блока, как видим, только тот текст, что написан ниже блока див будет обтекать наш блок слева. Это дает возможность соответствующей декорации страницы, например расположение картинки, в виде превью!

И как только текст заполнит всю высоту, блока, который находится справа, то текст будет уже заполнять всю ширину родительского блока.

Div расположен справа свойство float без обтекания.

Самое простое, с моей точки зрения, поместить наш див с классом «sprava» в другой див, который будет иметь аналогичную высоту, что и класс sprava, т.е. 100px.

И добавим нашему наружному блоку «border: 1px solid;», чтобы мы его смогли увидеть!

У нас получится:

border: 1px solid;

Результат расположения блока справа:

Как видим, наш блок расположился справа, и текст, который написан ниже, и расположился ниже блока.

Div справа с помощью свойства margin-left

Создадим ещё раз новый див. С новым классом.

Родительский блок имеет ширину 740px , и поставим в свойствах «margin-left =740px».

background: #fd0; /* Цвет фона */

width: 300px; /* Ширина */

Смотрим, что получилось:

Дело в том. что мы не учли точку отсчета по умолчанию, а она располагается в верхнем левом углу. Нашего блока.

Поэтому, нам нужно отнять от 740 ширину нашего блока 300 — и поставить её в свойство «margin-left».

Как видим, наш блок справа не зашел за края родительского блока.

Div справа в крайней правой точке монитора

Создадим новый блока и новый класс:

Данный блок будет находится по горизонтали на этих словах, но никак не будет влиять на него.!

Если вы уменьшите размер окна, до менее чем 740(ширина родительского блока), то блок наедет на текст.

Когда данный блок будет наезжать на основной блок с текстом?!

Сделаем скрин, когда размер экрана меньше 1080 и поставим родительскому блоку «border», чтобы мы могли его увидеть.

Если вы читали внимательно, то должны были заметить, что цифры не бьется.

Главный блок » div » = 740px.

Прибавляем 300px — ширину нашего блока справа 740 + 300 = 1040, а на скрине 1080. где еще 40 px?

Дело в том, что у «main_text» есть дополнительные 20px отступа с каждой стороны, вот 20 + 20 — 40.

Поэтому, как только ширина окна будет меньше 1080, наш блок будет наезжать на основной блок «main_text».

Div справа в крайней правой точке родительского блока

Когда мы рассматривали позицию блока справа с помощью «margin-left: 440px;», но если ваш родительский блок имеет резиновую ширину, то этот блок справа, будет уезжать вправо, при уменьшении основного и влево при увеличении.

Смотрим на скрине :

И далее следующий вариант, блок будет находиться справа, в любой ситуации.

Div справа с помощью свойства right

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

HTML & CSS: как не надо

Не задавайте контейнерам ширину, равную брикпойнтам

Это решение подходит для мобильных устройств, где прокрутки нет, но не годится для десктопных браузеров, где она есть и занимает место на странице.

Как это увидеть? #

Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:

И посмотрим в браузере что получилось. Начнём с мобильных:

На мобильных всё как надо. Десктоп:

На десктопе появилась не только вертикальная прокрутка, но и горизонтальная. Почему?

Потому что вертикальная прокрутка отъела часть ширины окна, и для контента осталось меньше места.

На десктопе body будет меньше ширины окна, поэтому на ширине окна 600px элемент той же ширины не поместится, что и вызовет появление горизонтальной прокрутки.

Есть несколько вариантов решений, в зависимости от того, что требуется сделать, и свободного времени на это.

Вариант с фиксированной колонкой

На макете, как правило, предусмотрены поля. Можно измерить ширину контента без учёта этих полей и использовать это значение, задав колонке выравнивание по центру.

Так контейнер, который мог бы растопырить страницу, оказывается уже, чем доступное пространство, и горизонтальной прокрутки не будет.

Простое и быстрое решение.

Если всё же нужно ограничить ширину колонки вместе с полями внутри, вместо width используйте max-width :

Так колонка не растянется шире заданного значения, а если места окажется недостаточно — сожмётся.

Вариант с резиновой колонкой

Чтобы на узких экранах конент не болтался узкой полосой, а занимал всю доступную ширину, можно сделать иначе: никак не ограничивать ширину контейнера (и он растянется на всю ширину body ), но задать боковые margin или padding .

Контейнер без фиксированной ширины сам подгонится под доступное пространство не вызывая горизонтальную прокрутку, и будет тянуться вместе с окном браузера.

Не забудьте ограничить ширину колонки на десктопе, чтобы страницу не ратстягивало на всё окно, если у пользователя широкий экран.

Минус способа в том, что в этом случае также надо будет предусмотреть резиновое поведение содержимого, чтобы оно не сбивалось в кучу или не размазывалось по странице. Если на это нет времени, просто используйте способ с фиксированной колонкой.

Вариант с фоном на всю ширину страницы

Например, в макете требуется что-то такое:

У шапки фон по ширине страницы, содержимое по центру.

На самом деле, вариант почти ничем не отличается от предыдущих. В случае с резиновой колонкой и паддингами, можно задать фон самой колонке, потому что она и так растянута на ширину страницы. В остальных случаях снаружи контейнера нужно просто задать обёртку, которой и будет задан фон.

Обёртка с фоном не будет ограничиваться по ширине и всегда будет растягиваться по ширине body не вызывая появление прокрутки. При этом содержимое внутри неё будет придерживаться заданной ширины в зависимости от выбранного способа.

Вариант с картинкой на всю ширину страницы

Иногда нужно, чтобы тянулась не вся колонка, а часть содержимого, например, картинка в статье:

В этом случае ширина колонки с текстом делается с помощью какого-то из предыдущих способов, но для картинки потребуется дополнительный код.

Если нужно, чтобы картинка растягивалась и сжималась вместе с контентом, достаточно будет кода для картинки:

Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:

Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:

На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:

Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.

Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .

Горизонтальная прокрутка пропала, всё работает как надо.

Итого

Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.

Div верстка. Как ее использовать, различные варианты исполнения

В интернете очень много материалов по поводу div-ов. Поэтому я решил создать такую статью, которая бы все содержала бы в себе, что касается блочной верстки. Из данной статьи Вы узнаете, как создать Вашу первую страницу, используя блочную верстку. Но основной акцент данной статьи я все-таки хочу сделать на различных проблемах, с которыми сталкиваются обычные пользователи, особенно новички, которые только начинают свое знакомство с Div-ами. Благодаря этой статье мы рассмотрим всевозможные варианты употребления div-ов, узнаем, что можно делать с этими блоками, как их изменять и вообще как ими пользоваться. Под статьей Вы увидите комментарии, оставляйте свои комменты, вопросы, и я обязательно помогу решить Вашу проблему и даже добавлю Вашу проблему в основную статью для остальных пользователей.

Div — верстка, это что такое?

Раньше, в эпоху становления интернета сайты верстались с помощью таблиц, что было достаточно неэффективно, и на смену этому устаревшему способу пришел новый — блочная верстка, используя Div-ы. Как видно, даже названия методов верстки сайтов отражают те теги, которые используются в создании сайта. Раньше это был тег <table> сейчас тег <div>.

Если взглянуть практически на любой современный сайт, то можно отметить их некоторое сходство, а именно присутствие на этих сайтах определнных зон: меню (menu), контент (content), шапка (header), низ сайт (footer). Такие зоны есть практически у любого сайта. А выглядят они все примерно так, как показано ниже.

На рисунке разными цветами я указал разными цветами зоны моего сайта. Красным — шапку, зеленым — меню, синим — контент, черным — низ сайта. В середине конента также я добавил блок названия статьи, и собственно блок самой статьи (текста). Вот таким образом выглядит процентов 70 сайтов в интернете, может быть только блоки меняются местами, но суть остается такой же.

Преимущества блочной div верстки

Преимущества дивной верстки следующие:

• меньше кода, а значит меньше «мусорных» тегов на странице
• возможность более гибкой разметки, т.к. каждый div не привязан ни к чему (в отличие от ячейки таблицы)
• возможность поменять местами блоки в коде не характерным способом (например, сначала идет контент, а потом идет шапка, хотя визуально сначала идет шапка, а потом контент)
• гораздо больше возможностей для разных JavaScript’ов
• современный вариант (табличная верстка более не применяется)

Начинаем кодить, используя Div (тег <div>)

Естественно, начинать мы будем с простого, а цель у нас создать макет сайта, который изображен выше. Да, весь код, который необходимо писать на страницах я буду включать в соответствующие коды.

Давайте создадим простенький шаблон страницы, используя div-ы. Учтите, данный код надо выставить после <body> и перед </body>. Ну это я надеюсь объяснять Вам не нужно.

Что получилось? На странице должны появится слова: block 1, block 2, block 3, которые идут в столбик, один за другим, при этому на странице больше ничего нет. Такой же эффект, кстати, можно получить, используя html тег <p>. Вы спросите, и что дальше. А вот теперь то и начинается самое интересное. Для того, чтобы управлять нашими div-ами, изменять их и вообще делать с ними все, что Вашей душе угодно (на самом деле не все, но это в конце статьи) мы обязаны использовать файл CSS. Я не буду здесь подробно останавливаться на нем, так как думаю, что Вы знаете, что это такое. Желательно сразу себя приучить подключать файл стилей к своим страницам сразу же, а не вставлять в каждый файл стили. В итоге у нас должно получиться два файла: index.html и style.css — данные файлы необходимо создать в любом редакторе (даже блокнот сгодиться), главное, это правильно задать расширение файла при его сохранении.

Давайте теперь зададим для наших div-ов разделительную полосу красного цвета. Внимание, ниже код который нужно указать в css.

Этот же код вставляем в index.html

Создав эти два файла (style.css и index.html) и открыв index.html мы увидим всё то же самое, что и в предыдущем случае, но у каждого дива будет красная граница. «Управлять» блоками мы будем с помощью CSS и присвоения конкретному div’у собственного класса. Сразу говорю, что писать что-то вроде style=»color: #a00;» (то есть использовать инлайновые стили) прямо на html-странице считается дурным тоном, а позже усложнит жизнь и вам — сложно отлаживать такую страницу. (представьте что Вы что-то захотели изменить на сайте, а у Вас тысячи страница, устанете изменять. Тут же просто надо изменить всего один файл.

Свойство float для Div-ов

Вот мы и создали выделение наших блоков красной линий, но, как говориться, на этом далеко не уедешь. Поэтому давайте разместим наши блоки горизонтально. Чтобы это сделать, воспользуемся отличным свойство CSS — float. Данное свойство отвечает за выравнивание наших блоков, и с помощью данного свойства мы сможем выравнивать наши блоки как нам хочется. Теперь давайте разместим наши блоки горизонтально, один за другим. ВНИМАНИЕ! Задать выравнивание можно только слева или справа, по центру выравнивания нет, учтите это! Напишем наш код в CSS.

Если мы сейчас откроем страницу в нашем браузере, то получим результат — наши дивы располагаются друг за другом. При этом их ширина зависит от того контента, который находится в этих дивах, и вычисляется автоматически браузером. Если второму div-у задать свойства float:right , то мы увидим, что второй блок прибился к правой стороне нашей страницы. Таким образом легко можно задавать порядок наших дивов и формировать меню или контент. В будущем каждому div-у желательно задавать ширину, что потом не получалось всякой ненужной нам мишуры.

Важно! Сразу хочу отметить, если Вы новичок в css, то сразу привыкайте к хорошему, а именно используйте в css классы, а не id. Это поможет Вам в будущем, особенно тогда, когда Вы будете работать с библиотеками jQuery. Кроме того, названия классов очень рекомендуется писать «говорящие». Например, для контента желательно назвать класс дива .content, а для сайдбара — .sidebar. Если же Вы желаете выделить какое-то свойство для определенного элемента на Вашей странице, тогда используйте #id.

Важно! В коде Вы можете заметить странную приписку в html — <div style=»clear: both;»></div> . Что это за непонятный такой третий div спросите Вы? Все просто, уважаемые программеры, мы обязаны сообщить браузеру, что после этой команды, все остальные div-ы должны идти ниже предыдущих. Если это не сделать, то может получиться нехорошая ситуация, когда дивы выстраиваются в одну колонку, или нализают друг на друга. Это команда браузеру типа html тега <br>, но для div-ов.

Свойство padding и margin для div-oв

Важные свойства в блочной верстке div-ами. И умения ими пользоваться помогут Вам в создании индивидуальных дизайнерских решений для Вашего сайта. Изначально, если упустить эти свойства наших div-ов (блоков), то мы получим следующую картину, что все div-ы располагаются вплотную к друг другу, в независимости от того, идут они друг за другом или один под другим. Именно благодаря нашим свойствам, таким как padding и margin — можно задавать промежутки между div- ами, либо внутри самих дивов. Например:

Данным кодом в CSS мы указали нашим дивам расстояние между ними, а также расстояние внутреннего контента внутри самого блока.

Если же нам нужно, чтобы один наш блок (div) располагался на каком-то особенном расстоянии от своего соседнего блока, то нам необходимо использовать свойство margin.

Важно! Свойства padding и margin имеют следующие параметры. Если мы просто зададим количество пикселей и все, это то, что мы проделали с padding, то со всех четырех сторон будем сделано это расстояние. Если задать две величины, например так: margin: 10px 5 px. То сверху и снизу будет расстояние в 10px, а слева и справа по 5px.

Важно! Также существуют и персонализированные промежутки. Они задаются присвоением к нашим свойствам слов bottom (низ), top (верх), left, right. В нашем примере, приведенном выше мы используем расстояние справа.

Свойство border — задаем границы нашим div-ам

Бывает, что нам нужно задать отчетливую границу нашим блокам, чтобы наглядно демонстрировать их разницу между собой. В этом случае нам необходимо свойство border. Благодаря этому свойству мы сможем задать границу нашему диву по нашему выбору. Данное свойство имеет три параметра, которые разделяются пробелами. Первый — ширина, задается пикселями. Собственно это ширина нашей границы. Второй параметр — стиль. Стилей достаточно много, и потребуется целая статья , чтобы описать их все. Какие могут быть стили? Например двойная граница, или прерывистая. И так далее. В нашем примере мы используем solid — одиночную линию заданной ширины. Третий параметр — это собственно цвет. Может задаваться 16-ричным кодом, либо словом по-английски, например black.

Также можно указывать границу для каждой из сторон нашего div-а, для этого воспользуйтесь уже упомянутыми top, bottom, left, right. Пример кода ниже.

Свойство width и height для div-ов

Вот теперь мы можем задать нашим div-ам ширину и высоту, что сделает наши дивы более наглядными. Просто добавьте в свойства каждого класса наших div-ов width:300px; height:500 px. Откроем теперь нашу страницу, вы увидите, что наши блоки стали намного больше и теперь выглядят более полноценно. Забегу сразу вперед и скажу, что ширина и высота может задаваться в пикселях или процентах. Учтите это.

Wrapper. Что это и зачем?

Мы с Вами дошли до довольно важного момента в верстке сайта, а именно до wrapper-а. Вы сами должны выбрать использовать его Вам в будущем или нет, но я Вам советую использовать его. Но для начала давайте поймем, что это вообще такое.

Обычно, при создании сайта нам нужно, чтобы наш сайт был по центру нашего окна браузера. При этом обычно мы задаем нашему сайту какие-то фиксированные параметры, ширину там или высоту. Поэтому нам бы хотелось, чтобы все это отлично выглядело и было наглядным. Поэтому появился такой div-блок, который назвали Wrapper. Он представляет из себя некий контейнер, в котором находятся все остальные блоки.

Как его использовать? Для этого мы создаем наш div wrapper сразу же после тега <body>, после чего размещаем внутри нашего враппера все остальные блоки нашего сайта, а затем закрываем div wrapper.

В CSS мы задаем нашему wrapper-у фиксированную ширину (обычно указывают 990 px, но здесь можно эксперементировать — это связано с тем, что на данный момент большинство пользователей используют разрешение 1024×768, но разрешение все время растет, поэтому в будущем эту величину надо менять), а также указываем следующее: margin-left: auto; margin-right: auto;

Все это сделает наш сайт оцентрованным по середине, при этом надо учитывать, что у нашего тега <body> тоже есть свои отступы, поэтому желательно их сразу убрать. Вставляем код ниже в наш CSS файл.

Также прошу Вас заметить, что если мы хотим изменить расстояние сверху или вообще с любой другой стороны, то лучше всего воспользоваться свойством margin у wrapper.

Div верстка — Кодим блочную верстку ИТОГ

Так, ну вот и пришло время, чтобы, наконец нам сверстать весь сайт, который был показан на картинке выше. Ниже я указал код, который должен быть в index.html и в style.css.

CSS файл:

Из вышепредставленного кода Вы можете видеть, что, благодаря блочной верстке, мы сократили наш код в index.html до минимума, при этом, наша страница очень функциональна, ее легко видоизменять, при этом редактируя всего один файл style.css. Вот собственно и все, можете пользоваться этим кодом или делать свой на примере этого.

ОБНОВЛЕНИЯ

ВНИМАНИЕ! Я буду постоянно обновлять данную страницу и внедрять в нее различные свойства, которые можно будет задавать нашим дивам. Поэтому почаще заглядывайте на эту страницу, чтобы быть в курсе последних изменений, которые касаются div-ов. Удачи в кодинге.