И снова о фиксированных блоках на web-странице. Был задан вопрос, ох как я люблю вопросы задавать, особенно когда знаю на них ответы.

Но, к сожалению, все ответы были не правильные.

Не много их было, видимо, посидеть и подумать, покрутить туда-сюда тестовую страницу не досуг. Все больше привыкли брать готовенькое, прискорбно.

Тот же пример с ответом.

В качестве анонса.

Предполагается цикл статей, посвященный фиксированным блокам на web-странице, где мы обойдем, все (почти все, тут дружно скажем "спасибо" OPERA) острые углы и предлагаемая мной методика получит путевку в жизнь.

Пока же смотрим скриншот.

Не все, но наиболее распространенные варианты разметки присутствуют.

Трудно удержаться от соблазна и не показать, как при использовании position:fixed; ведут себя некоторые страницы, вот от такого поведения и не грамотной реализации, фиксированные блоки, так и не смоги завоевать свое место под солнцем.

Ключ на старт :)

По многочисленным просьбам трудящихся на ниве взращивания кнопки "бабло", о которой так много и красочно пишет Мастер Lasto на страницах своего блога, совершенно безвозмездно раздается дизайн для "nano-CMS" сделанный на основе последнего апгрейда блога (default) - версия "LastoBlog SerpSitting".

В наличии три варианта:

• Стандартная трех колоночная разметка – left-content-right
• Двух колоночная разметка – left-content и content-right

Стучимся в "Email", но имейте толику терпения, если по каким либо причинам ответ задержится.

В комплект поставки входят следующие файлы:

• файл стилей
• _desing.php
• _add.php

*** ***** ***

Многим понравилась возможность изменения размера шрифта в обновленной версии блога. Идя навстречу пожеланиям и даже требованиям :), предлагаю оснастить "nano-CMS" скриптом позволяющим увеличивать или уменьшать размер шрифта в области контента.

Данный скрипт любезно предоставлен Вадимом Николаевичем.

Пошаговая инструкция внедрения:

Шаг № 1

<div class="fonts">
<a title="минус" 
 onclick="javascript:ts('changefont',-1);" href="#">Уменьшить</a>
  Шрифт  
<a title="плюс" 
 onclick="javascript:ts('changefont',1);" href="#">Увеличить</a>
</div>

Этот блок необходимо разместить в файле desing.php, вместо выделенной зеленым цветом строки, приведен лишь фрагмент кода:

<div class="middle">
  <div class="main">
    <div class="wrap"> 
      <div class="content" id="changefont">
        <!-- !!! Вот тут !!! -->
        $content

И дополнительно прописать идентификатор - changefont, он также выделен цветом.

Аккуратность и внимательность при проведении манипуляций с кодом не повредит.

Шаг № 2

Стили оформления скрипта:

.fonts {
  font:bold 11px Arial,sans-serif;
  text-align:right;margin:6px 15px;
}
.fonts a {color:#777;text-decoration:none;}
.fonts a:hover {color:#a00;}

Эти три строчки надо добавить в конец файла стилей. Цвет и размер шрифта для "выбилалки", подбираем на свой вкус.

Возникающие вопросы и проблемы в комментарии или на "Email".

P.S. От 14 Мая 2009

Самое главное было упущено :)

Необходимое дополнение:

Шаг № 3

Перед закрывашкой </head> необходимо прописать:

<script type="text/javascript">
   var szs=new Array( '10px','11px','12px','13px','14px','15px','16px','17px','18px','19px' );
   var startSz=0;

function ts (trgt,inc) {
   if (!document.getElementById) return;
   var d=document,cEl=null,sz=startSz,i,j,cTags;
   sz+=inc;
   if (sz > 0) sz=0;
   if (sz < 9) sz=9;
   startSz=sz;
   if (cEl=d.getElementById(trgt)) cEl.style.fontSize=szs[sz];
}
</script>