Верстка блока с вкладками

Distructor
Администратор
Для урока был взят внешний вид блока новостей (кстати ужасно сверстанный) с data-torrents.com с некоторыми изменениями.

Итак первоначальный вариант, к которому будем стремиться
v1.gif
Дабы урок был более простым верстать будем таблицами. Выделяем 3 основных области: "шапку", строки и "подвал"
v2.gif
Для начала подготовим страницу для верстки: укажем doctype, заголовок страницы и цвет фона

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Урок верстки блока с вкладками</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
  body {
    background-color: #efefef;
  }
</style>

</head>
<body>

</body>
</html>
теперь опишем каркас нашего блока

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Урок верстки блока с вкладками</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
  body {
    background-color: #efefef;
  }
  .block_table {
    width:50%;
    margin:150px auto 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
  }
</style>

</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" class="block_table">
  <tr>
    <td height="25"></td>
    <td>
        тут будут вкладки
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
        <br />тут будут строки с новостями<br /><br />
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
    
</body>
</html>
v3.PNG
теперь вырежем из исходного макета следующие части
v4.PNG
и добавим их к нашей верстке

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Урок верстки блока с вкладками</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
  body {
    background-color: #efefef;
  }
  .block_table {
    width:50%;
    margin:150px auto 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
  }
  
  .block_table .left {
    background: #f6f6f6 url('./images/brd_left.gif') 0 0 repeat-y;
  }
  .block_table .right {
    background: url('./images/brd_right.gif') 0 0 repeat-y;
  }
  .center {
    background-color: #f6f6f6;
    padding:5px 0 12px;
  }

  .block_table .bottom {
    height:8px;
    background: url('./images/brd_bottom.gif') 0 0 repeat-x;
  }
  .block_table .bottom_left {
    height:8px;
    background: url('./images/brd_bottom_left.gif') 0 0 no-repeat;
  }
  .block_table .bottom_right {
    height:8px;
    background: url('./images/brd_bottom_right.gif') 0 0 no-repeat;
  }

  .block_table .top {
    height:25px;
    background: url('./images/brd_top.gif') bottom right repeat-x;
  }
  .block_table .top_right {
    height:25px;
    width:8px;
    background: url('./images/brd_top_right.gif') bottom right no-repeat;
  }
  .block_table .top_left {
    height:25px;
    width:8px;
  }
</style>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" class="block_table">
  <tr>
    <td class="top_left"></td>
    <td class="top">
        тут будут вкладки
    </td>
    <td class="top_right"></td>
  </tr>
  <tr>
    <td class="left"></td>
    <td class="center">
        <br />тут будут строки с новостями<br /><br />
    </td>
    <td class="right"></td>
  </tr>
  <tr>
    <td class="bottom_left"></td>
    <td class="bottom"></td>
    <td class="bottom_right"></td>
  </tr>
</table>

</body>
</html>
v5.PNG
Теперь вырежем из макета еще фон для даты (можно было конечно его сделать границами, но был выбран такой вариант ) и сверстаем строки новостей
Добавим стили

Код: Выделить всё

  .block_table .items {
    width:100%;
    table-layout: fixed;
  }
  .block_table .items td div {
      overflow: hidden;
      height: 14px;
  }
  .block_table .items td {
    height:22px;
    border-bottom: 1px solid #d3d3d3;
    color: #4f6673;
    vertical-align: middle;
  }
  .block_table .items .date {
    width:60px;
    background: url('./images/bg_date.gif') center center no-repeat;
    text-align: center;
    color:#000;
      overflow: hidden;
      height: 14px;
  }
и заменим строку
<br />тут будут строки с новостями<br /><br />
следующим блоком

Код: Выделить всё

        <table border="0" cellpadding="0" cellspacing="0" class="items">
          <col width="60" /> <col />
          <tr> <td class="date">22:42</td><td><div> Воображариум доктора Парнаса / The Imaginarium of Doctor Parnassus (Терри Гиллиам) [2009 г., фэнтезb] </div></td> </tr>
          <tr> <td class="date">21:13</td><td><div> Щенок (Мария Евстафьева ) [2009 г., , DVDRip] </div></td> </tr>
        </table>
v6.PNG
Стоит отметить, что строка
Воображариум доктора Парнаса / The Imaginarium of Doctor Parnassus (Терри Гиллиам) [2009 г., фэнтезb]
длиннее ширины таблицы, и чтобы такие строки не раздвигали верстку были добавлены блоки div и использовано их свойство overflow, которое позволило скрывать весь лишний текст

Перейдем к верстке вкладок. Добавим стили

Код: Выделить всё

  .block_table .pg_left {
    width:5px;
    height:25px;
    background: url('./images/brd_pg_left.gif') bottom left no-repeat;
  }
  .block_table .pg {
    height:25px;
    color:#26517c;
    background: url('./images/brd_pg.gif') bottom left repeat-x;
    padding: 0px 10px;
  }
  .block_table .pg_right {
    height:25px;
    width:5px;
    background: url('./images/brd_pg_right.gif') bottom left no-repeat;
  }
и добавим в стиль

Код: Выделить всё

  .block_table .top_left {
    height:25px;
    width:8px;
  }
строку

Код: Выделить всё

background: url('./images/brd_top_left.gif') bottom left no-repeat;
и заменим

Код: Выделить всё

тут будут вкладки
на

Код: Выделить всё

        <table border="0" cellpadding="0" cellspacing="0" >
          <tr>
            <td class="pg_left"></td>
            <td class="pg" nowrap="nowrap" >Последние темы</td>
            <td class="pg_right"></td>
            <td></td>
          </tr>
        </table>
в макете не было картинки подходящей для brd_top_left.gif, она была получена отображением по горизонтали из brd_top_right.gif. Сделано это было для упрощения добавления вкладок и управления ими.
В итоге получаем следующий сверстанный блок:
v7.PNG
В качестве бонуса добавлю скрин с несколькими вкладками. Будет в качестве домашнего задания ;)
v8-1.PNG
v8-2.PNG
ИзображениеВерстка валидна.
Правильность отображения проверялась в IE6 и Opera 10

К теме прилагаю архив с картинками, код намеренно не будет в нем выложен, чтобы желание читать тему не пропадало ;)
images.zip    3.65 КБ • 108 скачиваний
Copyright © 2009 Creaternal (v-tanke.ru).
При копировании информации ссылка на источник и указание copyright обязательны.
Вернуться к началу
  • Непрочитанное сообщение

Вернуться в «Уроки и статьи по верстке»