Что нового:

Популярное

Наши Новости

Ваше имя: *
Ваш e-mail: *

Закрытый Раздел

Уроки и видео
которые будут
полезны многим
вебмастерам

Узнать подробнее...

Получить доступ

Блочная вёрстка DIV в CSS

PDF Печать
Рейтинг пользователей: / 4
ХудшийЛучший 

Теперь рассмотрим такое важное понятие как блочная вёрстка DIV, при помощи которой создаются макеты сайтов.
Заодно закрепим знания по блокам CSS.

Как вы знаете в HTML документе текст и другое содержимое можно разметить на странице двумя разными способами.

1. При помощи таблиц, теги <table>, <tr>, <td>.

2. При помощи блоков, тег <div>.

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

Блочная вёрстка в 98% используется для построения макетов сайтов (шаблонов) и разметки другого содержимого, например каталога товаров или услуг.
На примере каталога мы как раз её и рассмотрим. Каталог смартфонов и КПК.

Предположим что у нас в каталоге будет 3 колонки с изображением смартфонов.
Архив изображений смартфонов можно скачать здесь (для распаковки нужен WinZIP или WinRAR).

Создадим какую нибудь папку на диске, например Catalog.
В ней будет два файла, это index.html и style.css, и плюс папка с изображениями img.

 

Код файла index.html:

Здесь мы сделаем главный блок, в котором будут выводиться изображения с коммуникаторами.
Так как он у нас единственный, то можем присвоить ему id = "main"
А изображения будут заключены в другие блоки. Их много и они повторяются поэтому им будет присвоен класс box.

Так же здесь присутствует блок со стилем clear: both - это значит что обтекание блоков завершено и параграф с текстом начнётся с новой строки. Этот блок я назвал "Очиститель".

Если файл стилей был бы пустым, то мы увидели бы нашу страницу вот такой:

Блочная вёрстка DIV

Но мы в нём укажем стили для id="main" и class="box".

#main {
width:547px;
min-height:250px;
border:1px solid #ccc;
margin:20px auto;
background:#eee;
}

.box {
width:170px;
height:160px;
border:1px solid #888;
float:left;
background:#fff;
}
 

Здесь мы указали:
для id="main":

  • ширину главного блока 547 пикселей
  • минимальную высоту в 250 пикселей (максимальная будет зависеть от количества и размеров содержимого)
  • сплошную рамку серого цвета, толщиной в 1 пиксель.
  • отступ сверху/снизу 20 пикселей и auto слева/справа, чтобы блок был посередине.
  • ... и фон, светло-серого цвета.

для class="box":

  • ширину 170 пикселей, чтобы три блока по ширине вмещались в главный блок.
  • высоту 160 пикселей
  • серую сплошную рамку в 1 пиксель
  • выравнивание по левому краю (блок будет выравниваться слева, а всё остальное будет обтекать справа, в том числе и остальные блоки)
  • белый фон

И наша страница уже будет вот такой:

Блочная вёрстка CSS

Тут есть одно НО! Наш "любимый" браузер Internet Explorer никак не хочет правильно понимать CSS стили. Поэтому для особо непонятливых в файл стилей style.css добавим строчку, в самом начале:

body {
text-align:center;
}

И ещё одна тонкость:

Для главного блока мы указали определённую ширину, а для маленьких блоков задали свойство float: left.
То есть все блоки обтекаются друг другом справа и по идее должны быть в одну строку.
Но так как ширина главного блока ограничена, то в одну строку вмещается всего лишь 3 блока, а остальные переносятся на следующую и так далее. Это часто применяется в CSS.

А если ширина основного блока не указывается, то после каждых трёх блоков нужно ставить "Очиститель" (div style="clear:both") в index.html, иначе все блоки будут в одной строке.

Вот такая маленькая деталь, может приводить к разным результатам.

Для более красивого отображения добавим к .box ещё два стиля:

margin:5px;
border-radius:10px;

Теперь всё стало ровненько. Мы добавили отступ от блока со всех сторон по 5 пикселей и радиус в 10пикселей для углов блока. (border-radius работает только в новых браузерах, которые поддерживают CSS 3)

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

Попробуем:

В index.html добавим следущее (выделено жирным):

- 1 ссылка на описание (остальные аналогично)
- несколько ценников (остальные также аналогично)

<html>
<head>
<title>Каталог коммуникаторов</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h2 align="center">
Распродажа! Коммуникаторы по низким ценам!</h2>

<div id="main"><!--Главный блок -->
 <div class="box">
<a href="http://ulyanovsk.dns-shop.ru/catalog/i124512/">
 <img src="/img/kpk1.jpg"></a>
 <div class="price">5990 рублей</div>
 </div>
 <div class="box"><img src="/img/kpk2.jpg">
 <div class="price">7990 рублей</div>
 </div>
 <div class="box"><img src="/img/kpk3.jpg">
 <div class="price">16990 рублей</div>
 </div>
 <div class="box"><img src="/img/kpk4.jpg">
 <div class="price">23990 рублей</div>
 </div>
 <div class="box"><img src="/img/kpk5.jpg"></div>
 <div class="box"><img src="/img/kpk6.jpg"></div>
 <div class="box"><img src="/img/kpk7.jpg"></div>
 <div style="clear:both;"></div><!-- Очиститель -->
 <p align="center">
На все коммуникаторы распространяется гарантия 1 год!</p>
</div>
</body>
</html>

А в style.css добавим такой класс:

.price {
background:#fff;
color:#ef7407;
padding:5px 0 0 0;
margin-left:5px;
}

И изменим высоту .box со 160px на:

height:190px;

Для того чтобы вместился блок с ценой.

Что мы указали для class="price":

  • белый фон
  • оранжевый цвет для текста
  • отступ внутри блока (по очереди указали отступ: сверху/ справа/ снизу/ слева)
  • отступ от блока с левой стороны 5 пикселей, чтобы не залезал на рамку (для Оперы)

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

Как убрать рамку с картинки-ссылки?

И конечно для нашего "любимого" Internet Explorer'а и ему подобных нужно добавить своё правило, иначе картинка-ссылка будет иметь синюю рамку.

Добавляем в style.css куда нибудь в конец:

a img {
border:none;
}

Чем больше тренируетесь, тем лучше понимаете что к чему. Разные браузеры могут по-разному отображать содержимое, но в основном это мелкие детали, которые легко устранить, дописав дополнительное свойство.
Исключение это Internet Explorer, у него постоянно какие то глюки. Но будем надеятся разработчики MicroSoft уделят этому внимание.

Скачать все файлы одним архивом: Download

P.S.: Как реализовать подобное в статье на Joomla?
1. В режиме HTML редактора вписываются теги (за исключением тегов: <html>,<head>,<title>,<link rel...>,<body> так как их ставит сама Joomla).
2. В файл стилей шаблона (обычно это - template.css) дописываются соответствующие классы и стили для них.

Успехов!

Перейти к изучению трёхмерных страниц: свойство Z-index
Обновлено 30.11.2011 21:57
 
Интересная статья? Поделись ей с другими:

Добавить комментарий


Защитный код
Обновить

Скажите, какая тема вам интересна больше всего.

Ответить >>

Оставьте отзыв