Ещё раз вспомним наш макет. Две нижние ячейки — довольно простые для вёрстки. Но и здесь есть свои тонкости.
Сначала сверстаем левую ячейку.
В ячейке Copyright нужно добиться того, чтобы сверху она отчёркивалась линией, не доходящей до края ячейки на 5 пикселей. Для этого сделаем соответствующий отступ внутри ячейки (справа), а всё остальное пространство заполним таблицей с одной-единственной ячейкой. Верхняя граница у неё будет в виде серой линии, толщиной 1 пиксель (на рисунке она помечена красным пунктиром). Также для ячейки укажем цвет фона и шрифт. Текст разместим по центру.
index.html
<td class="copyright">
<table class="main">
<tbody>
<tr>
<td class="cprghtitem">Copyright © Seoded.com</td>
</tr>
</tbody>
</table>
</td>
style.css
td.copyright {
padding-right: 5px;
height: 32px;}
td.cprghtitem {
border-top: 1px solid #cacaca;
background-color: #f5f5f5;
font-size: 10px;
color: #656565;
vertical-align: middle;
text-align: center;}
Теперь правая ячейка (BottomMenu).
Для неё мы сделаем повторяющийся оранжевый фон. Внутри BottomMenu будет вложенная таблица (как и в первом случае, всего с одной ячейкой). Это сделано для того, чтобы в этой ячейке в качестве фона указать изображение тени. Можно было бы поступить по-другому: сделать вложенную в BottomMenu таблицу с двумя ячейками. В левую вставить тень, в правую — собственно, ссылки нижнего меню. Но html-код в этом случае был бы «тяжелее».
В ячейку с ссылками — назовём её «BtmenuItem» — вставим ссылки, разделённые изображением точек (dots2.gif). У dots2.gif я выставила величины:
- hspace="12". Это отступ по горизонтали от картинки до текста. Он нужен, чтобы точки находились на расстоянии от букв (как вариант можно было бы поставить пару пробелов: & nbsp;& nbsp;).
- vspace="1". Отступ по вертикали — для того, чтобы точки были повыше, как бы посередине букв (по вертикали).
index.html
<td class="bottommenu">
<table class="main">
<tbody>
<tr>
<td class="btmenuitem">
<a href="" class="menu">Home</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">News</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">About Us</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">Catalog</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">Contacts</a>
</td>
</tr>
</tbody>
</table>
</td>
style.css
td.bottommenu {
background-image: url(bottom_bg.jpg);
background-color: #ff8e51;
height: 32px;}
td.btmenuitem {
background-image: url(bottom_shadow.jpg);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;}
Ячейка с копирайтом и нижнее меню готовы. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.
Автор: Инна Пастухова.