Главная » Создание сайтов » Верстка » Оформляем блоки в 3 колонки

Оформляем блоки в 3 колонки

Оформляем блоки в 3 колонки

Рассказываю сразу, о чем пойдет речь. Нам нужно сделать красиво оформленные блоки в 3 колонки.

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

Чтобы не мозолить вам глаза, я не поленился и закомментировал для вас код css:

/* Задание стилей всего блока */
#body {
width:99%; /* Установка ширины блока в 99% */
}
/* Задание стилей левого столбца */
#left {
float:left; /* Установка обтекания */
width:33%; /* Установка ширины столбца */
background:#aeddff; /* Установка фонового цвета */
height: 200px; /* Установка высоты столбца */
border:2px solid #333; /* Границы правого столбца */
}
/* Задание стилей названия левого столбца */
#left .name {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #0274b0; /* Задание цвета фона */
border-bottom: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; /* Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей правого столбца */
#right {
float:right; /* Установка обтекания */
width:33%; /* Установка ширины столбца */
background:#ffecbe; /* Установка фонового цвета */
height: 300px; /* Установка высоты столбца */
border:2px solid #333; /* Границы правого столбца */
}
/* Задание стилей названия правого столбца */
#right .name {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #D5BA56; /* Задание цвета фона */
border-bottom: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; /* Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей среднего столбца */
#center {
margin-left:33%; /* Установка отступа */
margin-right:33%; /* Установка отступа */
background:#beffc0; /* Установка фонового цвета */
height: 100px; /* Установка высоты столбца */
border:2px solid #333; /* Границы правого столбца */
}
/* Задание стилей названия центрального столбца */
#center .name {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #5BC468; /* Задание цвета фона */
border-bottom: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; /* Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей текста во всех блоках */
.text {
color:#333; /* Задание цвета текста */
font-size:12px; /* Задание размера шрифта */
padding:10px; /* Задание отступа в 5 пикселей со всех сторон */
}

Чтобы посмотреть как этот код работает, добовляем html код:

<html>
<head>
</head>
<body>
<div id="body">
<div id="left">
<div class="name">Заголовок левого столбца</div>
<div class="text">Текст левого блока.</div>
</div>
<div id="right">
<div class="name">Заголовок правого столбца</div>
<div class="text">Текст правого блока.</div>
</div>
<div id="center">
<div class="name">Заголовок центрального столбца</div>
<div class="text">Текст центрального блока.</div>
</div>
</div>
</body>
</html>

С уважением, Vasilenko Ivan!

Комментарии — 6 комментариев

  1. #156 vanoID в 1:20, 10 декабря 2008:

    Ответить | Цитировать

    а пример, как работает можно?

  2. #186 Piks в 13:22, 24 декабря 2008:

    Ответить | Цитировать

    Спасибо :)

  3. #187 WebMast в 13:37, 24 декабря 2008:

    Ответить | Цитировать

    Пожалуйсто!

  4. #456 Вода в 14:38, 21 февраля 2009: (подписался)

    Ответить | Цитировать

    «Чтобы не мозолить вам глаза, я не поленился и закомментировал для вас код css:»

    можно было пробелы сделать, а то все сливается в одну кашу, и если возникнут какие-то проблемы, то сразу не разберешься что, где и как. Аккуратность — вежливость королей :)

  5. #457 WebMast в 15:15, 21 февраля 2009:

    Ответить | Цитировать

    Прошу прощения, это технические проблемы!

  6. #9060 Артём в 15:53, 29 декабря 2009:

    Ответить | Цитировать

    piumosso.ru/a/css/forms/compact-cols — здесь представлен способ вёрстки форм

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting