Плавающий блок с помощью jQuery

Подключаем jQuery

Если у вас не подключено ещё:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


В
<head>
прописываем
<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>


Нужный вам блок заключаете в контейнер.
<div id="fixed">Текст фиксированного блока.</div>

Очистка css от неиспользуемых стилей

CSS
Многие разработчики сталкиваются с тем, что после какого-то времени работы над проектом, в файлах CSS появляются стили, про которые нельзя точно сказать, используются они или нет. Такое часто случается, когда вы работаете в команде, и над стилями работает не один человек. Или, например, до вас было несколько разработчиков, а вы решили что-то поменять или дизайнер задумал небольшой редизайн. В общем, вариантов много, а результат один — браузеру отдаются «мертвые» селекторы.

Очистка css от неиспользуемых стилей
Читать дальше →

Цитаты на бумаге CSS3

CSS
Оригинальный вариант оформления цитат для сайта. Таким образом, с помощью вида цитаты на бумаге CSS3, вставляйте в статьи фрагменты текста с других сайтов или цитируйте сообщения людей в социальных сетях. Используется радиальный градиент, повторяющийся линейный градиент.


Читать дальше →

Ubuntu, как рабочая машина для (X)HTML,CSS,JS-разработчика

Так как уже лет 5, моим основным заработком является Front-End разработка сайтов ((X)HTML,CSS,JS), а из них около 3-х лет в Ubuntu, я решил поделиться своими наработками по этому вопросу.

Среда разработки

За эти три года, чего только не перепробовал из редакторов и IDE. Был и Vim, и Geany (им пользуюсь до сих пор, для мелких задач), и Aptana, но в итоге остановился на Komodo Edit. Бесплатный, удобный и поддерживает систему разработки zen-coding (о нем ниже). Текущая 6-ая версия поддерживает HTML5 теги и CSS3.


Читать дальше →

Создаём резиновый шаблон на div-ах и CSS

HTML:
<div class="page">
  <div class="header">
  </div>
   <div class="content">
    <div class="rightcol">
       <div class="block">
       </div>
    </div>
 
    <div class="leftcol">
  </div>
</div>
 
<div class="footer">
</div>


CSS:
.page {
height: 100%; 
background: #fff; width: 96%; margin: 0px auto; max-width: 100%; min-width: 800px; width: expression(document.body.clientWidth > 1080? "1080px": "100%" );}
body > .page {min-height: 100%; height: auto;}

/* Шапка */
.header { height: 240px; background: #f6bd4e url(../images/header.jpg) no-repeat 0px 0px; overflow: hidden; zoom: 1;}

/* Контент */
.content {overflow: hidden; zoom: 1; padding-bottom: 80px; background: #ecebdc;}
 
/* Правая колонка */
.rightcol {float: right; width: 31%;}

/* Блок */
.block {margin-top: 30px; margin-right: 5px; background: #ffffff; padding: 0px 10px 25px 18px; }

/* Левая колонка */
.leftcol {margin: 0px 340px 0px 30px; width:65%}

/* Подвал */
.footer { height: 95px; background: #ea8e00 url(../images/footer.jpg) no-repeat 0px 0px; width: 96%; margin: 0px auto; max-width: 100%; min-width: 800px; width: expression(document.body.clientWidth > 1080? "1080px": "100%" ); font: 1.2em/16px Arial, Sans-serif; color: #fff; padding-top: 20px;}

clear: left; clear: right; clear: both;

Основная проблема шаблонов на основе «плавающих» (float) колонок заключается в том, что контейнер, содержащий такие блоки просто так не пожелает растягиваться по их высоте. Если, скажем, вы захотите добавить рамку вокруг этого контейнера, то придётся каким-то образом заставить браузер растянуть его на высоту содержимого.

Читать дальше →