Пост добавлен 16 июля 2009 года в категорию «
Архив».
Итак, продолжим наш урок верстки. В этот раз сделаем левый блок (он же sidebar). Для начала пропишем все содержимое в HTML.
Code
<div id="sidebar">
<div class="block">
<h2><img src="./img/block_name.png" alt="Goverment links" /></h2>
<div class="block_content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#"><img src="./img/all.png" alt="Читать дальше" /></a></p>
<span></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#"><img src="./img/all.png" alt="Читать дальше" /></a></p>
<span></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy <a href="#"><img src="./img/all.png" alt="Читать дальше" /></a></p>
</div>
</div>
<div id="menu">
<ul>
<li><a href="#">online services</a></li>
<li><a href="#">forms</a></li>
<li><a href="#">publications </a></li>
<li><a href="#">events</a></li>
<li><a href="#"> faq's </a></li>
</ul>
</div>
<a href="#"><img src="./img/link1.png" alt="Special Offer" /></a><br />
<a href="#"><img src="./img/link2.png" alt="Sity Portal" /></a>
</div>
В ходе добавления нам приходится создать три картинки — «block_name.png», «all.png », «link1.png» и «link2.png» Теперь нужно посчитать ширину левой части и отсупы. У меня получилось 234 пикселя — ширина, отступ сверху 8 пикселей, отсуп слева 12 пикселей. Пропишем это.
Code
/* Левый блок */
#sidebar {float: left; width: 222px; padding: 8px 0px 0px 12px;}
/* Контент */
#content {margin-left: 234px;}
Ну все, теперь можно оформлять элементы начнем сверху. Это у нас блок. Весь он обведен рамкой и ширина у него 189 пикселей. Заголовок блока имеет высоту 32 пикселя и растянут по всей ширине. Текст в блоке от левого края имеет отступ 9 пикселей, а от правого 14, снизу 21 пиксель, сверху 15 пикселей. Разделяются посты горизонтальной чертой («pp.png»), сверху от черты отступ 9 пикселей, а снизу 12. Черту мы будем делать при помощи SPAN. Нужно задать блочное отображение и однопиксельную высоту, а так же фон и отступы и все будет работать. Шрифт будет Tahoma (знаю, плохой я макет подобрал >.<).
Code
#sidebar {float: left; width: 222px; padding: 8px 0px 0px 12px;}
.block {border: 1px solid #b2b2b2; width: 189px;}
.block h2 {background: #4388bb; height: 32px;}
.block_content {padding: 15px 14px 21px 9px; font: 11px 'Tahoma',sans; color: #687078;}
.block_content span {background: url('./img/pp.png') repeat-x; height: 1px; margin: 9px 0px 12px 0px; display: block;}
Теперь займемся меню. Оно на самом деле проще чем кажется. Берем фоновую картинку и задаем ее фоном для LI добавляем ссылку, отступы и готово. Для сохранности трафика пользователей мы обрежем постоянный фон картинки и зададим его цветом. Что-то типа того («menu_bg.png»):
Кроме того нужно добавить задать высоту (22 пикселя) и ширину (200 пикселей) LI. Отступ сверху и снизу для всего меню, 10 и 9 пикселей относительно. В LI отступ текста от верха будет 5 пикселей, а от лева 28 пикселей. На столько же нужно сократить высоту и ширину, дабы привести их к нормальным размерам.
Code
/* Левый блок */
#sidebar {float: left; width: 222px; padding: 8px 0px 0px 12px;}
.block {border: 1px solid #b2b2b2; width: 189px;}
.block h2 {background: #4388bb; height: 32px;}
.block_content {padding: 15px 14px 21px 9px; font: 11px 'Tahoma',sans; color: #687078;}
.block_content span {background: url('./img/pp.png') repeat-x; height: 1px; margin: 9px 0px 12px 0px; display: block;}
#menu {margin: 10px 0px 9px 0px;}
#menu li {margin-bottom: 1px; width: 172px; height: 17px; font: 12px 'Arial',sans; color: #fff; padding: 5px 0px 0px 28px; background: url('./img/menu_bg.png') no-repeat #448bbf;}
#menu a {font: 12px 'Arial',sans; color: #fff; text-decoration: none;}
#menu a:hover {text-decoration: underline;}
Ну вот и все. В следующей части будем верстать контент, а сейчас вопросы и ответы.
