<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

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

Помимо уроков к курсу идут упражнения для закрепления материала.

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

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Структура блочной вёрстки

Структура блочной вёрстки

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

Привожу HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Заголовок страницы</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Описание страницы." />
  <meta name="keywords" content="ключевые слова страницы" />
  <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="header">Шапка сайта</div>
  <div id="content">
    <div id="left">Левые блоки</div>
    <div id="right">Правые блоки</div>
    <div id="center">Центральная часть</div>
  </div>
  <div class="clear"></div>
  <div id="footer">Содержимое подвала</div>
</body>
</html>

И CSS-код:

#left {
  float: left; // Левые блоки размещаем слева
  width: 200px; // Установка ширины 200 пикселей
}
#right {
  float: right; // Правые блоки размещаем справа
  width: 200px; // Установка ширины 200 пикселей
}
#center {
  margin-left: 200px; // Отступ слева 200 пикселей
  margin-right: 200px; // Отступ справа 200 пикселей
}
.clear {
  clear: both; // Отменяем позиционирование (влияние float)
}

Эту структуру Вы можете смело копировать на свой сайт. Безусловно, некоторые элементы можно менять. Например, размеры левых и правых блоков. Соответственно, надо будет поменять и отступы у центрального блока. Также если вёрстка фиксированная, или она не должна растягиваться на всю страницу, то необходимо все блоки добавить в другой, самый верхний, у которого задать фиксированную ширину в пикселях (фиксированная вёрстка) или в процентах (резиновая, но не на всю страницу).

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (61):

soffrick soffrick 02.06.2012 07:33:18

А что же делать с РАЗНЫМИ РАСШИРЕНИЯМИ ЭКРАНОВ у пользователей ?( Может через JS проверять, и устанавливать ширину блоков?)))))

Ответить

Admin Admin 02.06.2012 11:49:04

Для этого можно ставить ширину в процентах.

Ответить

soffrick soffrick 02.06.2012 13:29:39

Если ширина блоков будет в процентах, то не повлияет это на фиксированную ширину контента? например картинка 200х200 будет одиннаково отображаться на всех разрешениях ? т.е. 200х200

Ответить

Admin Admin 02.06.2012 14:38:30

Размер картинки тогда надо тоже задавать в процентах.

Ответить

GoTo GoTo 02.06.2012 20:39:29

Михаил, а порядок описания селекторов важен? Или можно все id по алфавиту написать?

Ответить

Admin Admin 02.06.2012 20:45:45

Нет, не важен.

Ответить

GoTo GoTo 03.06.2012 19:23:18

Михаил, я правильно понимаю, что на вашем сайте резиновая верстка, а главная страница таких сайтов как яндекс и мэйл фиксированная?

Ответить

Admin Admin 03.06.2012 19:51:30

Нет, у них тоже вёрстка резиновая.

Ответить

GoTo GoTo 03.06.2012 20:13:48

У них при масштабировании контент сжимается, а у вас при любом масштабе растягивается на весь эран. Т.е. у вас в %, а у них в px блок "content"?

Ответить

Admin Admin 03.06.2012 20:26:53

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

Ответить

malina95 malina95 04.08.2012 02:23:38

А вы напишите статью как прижать подвал к низу? Если напишите то и расскажите про все методы? Просто это очень полезная вещь!!!

Ответить

Admin Admin 04.08.2012 13:37:31

Может напишу, в любом случае спасибо за идеи для статей.

Ответить

malina95 malina95 08.08.2012 20:56:56

За идеи спасибо не надо, Я взял на себя смелость лазить по интернету в поисках плохих статей - чтобы вы их усовершенствовали и раскрыли!!!

Ответить

BotaniQue BotaniQue 15.08.2012 12:59:39

Здравствуйте, Михаил. А как убрать расстояния между блоками в IE7? У меня шапка сайта состоит из трёх блоков, которые должны сливаться воедино. В Мозиле и Опере отображается как надо, а в Експлорере почему-то есть маленькие промежутки между каждым блоком. Что делать? Применял CSS-хаки - не помогло. Спасибо.

Ответить

Admin Admin 16.08.2012 01:13:03

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

Ответить

webblogphp.ru webblogphp.ru 07.09.2013 16:35:10

Была у меня такая проблема в свое время, решил ее просто, Margin: 0px и padding:0px.

Ответить

knight knight 05.10.2012 06:58:45

Здравствуйте Михаил скажите пожалуйста, не допущенно ли у вас случайно ошибки что header footer не находятся в одом div блоке вместе с content?

Ответить

Admin Admin 05.10.2012 18:29:15

Структура может быть разная. Но в данном случае в content должны быть только боковые блоки div.

Ответить

korjik korjik 19.11.2012 22:15:24

Михаил, подскажите, а играет ли роль слой div, в котором обычно и располагают header, footer, content-блоки? Т.е. общий блок (иногда и так верстают ведь)

Ответить

Admin Admin 20.11.2012 10:23:00

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

Ответить

korjik korjik 20.11.2012 10:27:12

Спасибо за комментарий :) Михаил, у вас замечательный "проект". По мне так- единичный случай того, как можно просто и понятно объяснить о самом главном и важном в верстке, и прочем. Спасибо!

Ответить

bargut bargut 02.12.2012 07:16:25

Здравствуйте Михаил скажите пожалуйста, куда сливать файлы для скачивания на хостинге джино и как написать ссылку на скачивание?

Ответить

Admin Admin 02.12.2012 10:32:29

В папку www или public_html, а ссылку надо прописывать по пути в ту директорию, в которую загружен файл.

Ответить

webblogphp.ru webblogphp.ru 07.09.2013 16:41:22

ссылку надо давать прямую, например так, у меня файлы для скачивания лежат в папке "uzerfile" , а прописываю ссылку так <a href="http://webblogphp.ru/uzerfile/blog_10.rar">Скачать архив</a>

Ответить

Andresias13 Andresias13 18.01.2013 03:33:14

Здравствуйте Михаил. Подскажите пожалуйста, куда именно необходимо вставить css-код по тексту? и что ещё для этого необходимо?

Ответить

Admin Admin 18.01.2013 11:06:35

http://myrusakov.ru/kak-zadat-css-stil.html

Ответить

Евг.Барановский Евг.Барановский 11.03.2013 12:02:17

Михаил, я всегда испытывал проблемы с пониманием, как работает подвал. Пожалуйста, осветите этот вопрос пошире. Приведенный пример волшебно прост и понятен... Однако общее непонимание остается.

Ответить

webblogphp.ru webblogphp.ru 07.09.2013 16:43:05

вопрос ваш не очень понятен, что знчит как работает подвал? Прижать его к низу или что?

Ответить

Silver78 Silver78 12.03.2013 02:20:22

А если див "контент" сделать в виде таблицы с тремя столбцами??? разве так не удобнее? если нет, то скажи, пожалуйста, ПОЧЕМУ?

Ответить

Admin Admin 12.03.2013 10:13:07

http://myrusakov.ru/html-table-block-verstka.html

Ответить

Silver78 Silver78 12.03.2013 11:20:11

да, это именно то, что я имел ввиду!!! допускал, что делать табличный каркас для контента имеет какие-то большие минусы, о которых не знал. теперь понятно, что вполне можно это делать. Михаил, а вот использование большого количества тегов <br> для увеличения высоты дива, наверно, уже является "плохим тоном" и знающие люди с этого скорее всего смеются? :)) Просто у меня дизайн сайта такой, что левый и правый контенты должны быть одного цвета (темноватого), а центральный белым. И бывает так, что контента в центре мало, и тогда приходится этот "контент" <br>ами дополнять. :) Так можно?

Ответить

Admin Admin 12.03.2013 16:41:55

Можно.

Ответить

Silver78 Silver78 12.03.2013 17:35:33

Спасибо огромное за внимание и помощь!!!

Ответить

Юрий В Юрий В 09.04.2013 00:40:41

А где задаются высоты шапки центра и подвала ?

Ответить

Admin Admin 09.04.2013 10:52:57

Через CSS.

Ответить

Webmaster98 Webmaster98 08.06.2013 09:02:19

Здравствуйте Михаил, скажите пожалуйста зачем нужно clear: both; // Отменяем позиционирование (влияние float)?

Ответить

Admin Admin 08.06.2013 11:14:28

Попробуйте без него сделать, затем с ним, и увидите разницу.

Ответить

Веселый Дрозд Веселый Дрозд 19.08.2013 23:13:56

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

Ответить

Веселый Дрозд Веселый Дрозд 19.08.2013 21:45:48

Хе-хе, картинка то со zvirec.com))) Сразу скажу, что на мой взгляд, здесь больше инфы.

Ответить

prog prog 30.09.2013 13:29:13

Здраствуйте, Михаил! Я делаю верстку двухколоночного сайта, у меня проблемы кроссбраузерностью в IE7 и IE6, размеры блоков стали крупные.

Ответить

prog prog 25.10.2013 11:41:41

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

Ответить

Admin Admin 25.10.2013 12:43:51

Ширина сайта должна быть 990px, либо он должен быть резиновый.

Ответить

prog prog 25.10.2013 14:25:48

Спасибо большое.

Ответить

Фёдоррр Фёдоррр 18.11.2013 18:28:17

Если блоки покрасить background-color в цвета, то они некорректно отображаются, когда одна из трёх колонок длиннее других. У колонок выходит несовпадающая высота. Как это исправить?

Ответить

tikkiwiki tikkiwiki 18.11.2013 18:36:15

Сделайте блок который другой высоты отдельным и задайте ему нужный цвет. Например: <body> <div class="block">Текст в блоке.</div> </body> <style type="text/css"> .block { background: #FFE446; } </style>

Ответить

Фёдоррр Фёдоррр 18.11.2013 19:06:10

Я не об этом. Вот картинка, что получается: http://i.imgur.com/ZygyS1d.png Как сделать, чтобы эти белые прямоугольники, которые я пометил поверх скриншота были соответствующего цвета. При этом не задавая им фиксированную высоту, чтобы они подстраивались под контент.

Ответить

tikkiwiki tikkiwiki 18.11.2013 21:32:59

Задайте Вашему div'у width=100% height=100%.

Ответить

midi63 midi63 17.01.2014 13:33:24

Как сделать чтобы шапка имела фиксированный размер и колонки. На этом сайте стоит просто width=100% но у меня при таком коде шапка вообще исчезает

Ответить

tikkiwiki tikkiwiki 23.01.2014 10:46:33

Указать height и width в px

Ответить

kjuby kjuby 10.05.2014 22:58:27

по чему мне браузер выдает мне вот это ����� ����� ����� ����� ������ ����� ����������� ����� ���������� �������:

Ответить

alexandrdante alexandrdante 11.05.2014 11:29:40

Кодировка нарушена

Ответить

renat52488 renat52488 28.05.2014 18:15:30

Огромное спасибо за шаблон)) Буду использовать на своём первом сайте)))

Ответить

Anna Troyan Anna Troyan 28.07.2014 20:03:50

Структура блочной вёрстки - это замечательно, но ещё возникает вопрос, как верстать при резиновой вёрстке? Что нужно прописывать в %, а что в пикселях? Было бы не плохо, что бы вы написали структуру резиновой вёрстки и фиксированной вёрстки. Что бы можно было бы уловить разницу между ними. Спасибо.

Ответить

klynik klynik 25.10.2014 11:22:08

Здравствуйте, Михаил! У меня центральный блок не ограничивается справа в 200 px от края экрана. Так должно быть или ошибка? Я думал, что "margin-right: 200px; // Отступ справа 200 пикселей" должен формировать правую границу для текста автоматически. Просветите, плз. дилетанта.

Ответить

alexandrdante alexandrdante 25.10.2014 13:37:26

margin-right,отступ от правой стороны до внешней границы блока

Ответить

klynik klynik 25.10.2014 13:44:10

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

Ответить

alexandrdante alexandrdante 25.10.2014 16:32:55

Уважаемый.отступ внутри блока,задаётся как padding,отступ снаружи,от блока,как margin. в плане,сохраняли рамки? верстать адаптивно.Посмотрите статьи на сайте про адаптивную блочную вёрстку

Ответить

klynik klynik 25.10.2014 19:36:18

Благодарю! Бум смотреть дальше.

Ответить

ElfAda ElfAda 24.05.2015 21:06:48

А как background сделать?

Ответить

ido1 ido1 14.05.2016 18:51:56

Здравствуйте, уважаемый Михаил! Я недавно познакомился с вашим сайтом ) Вопрос: почему вы сделали отдельный блок перед футером и присвоили ему clear:both;, а не присвоили это св-во самому футеру? Знаю, что этот вопрос уже задавали, но он, к сожалению, остался без ответа. Разъясните пожалуйста, а то не ясно)

Ответить

s2feed2 s2feed2 12.02.2017 04:18:50

Доброе время суток. Не получается. Все в браузере выводится слева. Может не получилось подключить CSS

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.