В последнее время я иногда начала писать посты на тему верстки. Верстальщик из меня не очень хороший, но иногда приходится и верстать, и слегка подправлять код вордпресса. Да и вообще, плох тот дизайнер, который не понимает, что и как можно сверстать. Поэтому я предпочитаю хотя бы знать о потенциальных возможностях html и css.
На сайте DesignM.AG недавно была опубликована очень интересная статья – как “приклеить” сайдбар и сделать его неподвижным при скроллинге основного контента сайта (урл статьи designm.ag/tutorials/sticky-sidenav-layout/).
Так это выглядит в реале: http://www.sohtanaka.com/web-design/examples/sticky-nav/
Допустим, ваш сайт или блог состоит из двух колонок. Колонка поуже – меню, колонка пошире – основная часть сайта. Меню сравнительно короткое (пол-экрана), основная часть сайта – длинная (3-4 экрана и больше). Хотелось бы, чтобы меню было постоянно в поле зрения посетителя сайта, даже при прокрутке:
Оказывается, реализовать это с помощью CSS несложно.
HTML
< div class="container" >
< div id="sidenav><!--Fixed Sidenav Goes Here--></div> <div id=">< /div >
< /div>
СSS
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(container_stretch.gif);
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Фиксирует навигацию на одном месте--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Контент справа--*/
width: 640px;
padding: 0 20px 20px;
}
К сожалению, в IE6 это не работает, поэтому приходится фиксировать навигацию иначе:
*html #sidenav {
position: absolute;
left: expression( ( 0 ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) 'px' );
top: expression( ( 0 ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) 'px' );
}
Еще несколько статей для дизайнера – верстальщика:
5 простых, но полезных свойств CSS для дизайнеров и верстальщиков
Юзабилити: увеличение кликабельной зоны
Объемные буквы без Фотошопа (letterpress effect)
Внимательней пишите код.
id=”sidenav — нет закрывающей кавычки
div id=” — не указан content и закрывающая кавычка
40a, спасибо за поправки. Правда, я код не пишу, а только копирую.
Спасибо, помогло.