Рабочие заметки вебмастера http://www.easylife.by XHTML разметка, CSS и прочие мысли связанные с версткой Tue, 02 Mar 2010 12:54:39 +0000 http://wordpress.org/?v=abc en hourly 1 Liquid Tooltips with Shadows http://www.easylife.by/blog/css/liquid-tooltips-with-shadows/ http://www.easylife.by/blog/css/liquid-tooltips-with-shadows/#comments Fri, 02 Oct 2009 11:37:49 +0000 Easy Life http://www.easylife.by/?p=359 Последнее время у меня довольно часто спрашивают, как сделать с помощью блоков тянущиеся тултипы/модальные окна с прозрачными элементами. Не поленюсь показать еще разок.

Нарезка макета

Разметка

Нарезка

В результате нарезки должны получить 4 уголка, 4 фона для заливки границ и 2 фона для градиента в серединке нашего тултипа.

Разметка

HTML:

<div class="tooltip">
    <div class="tooltip-top">
        <div class="tooltip-tl"></div>
        <div class="tooltip-t"></div>
        <div class="tooltip-tr"></div>
    </div>
    <div class="tooltip-middle">
        <div class="tooltip-l">
            <div class="tooltip-r">
                <div class="tooltip-body">
                    <div class="tooltip-body-t">
                        <div class="tooltip-body-b"><img src="images/tooltip-i.png" width="33" height="33" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tooltip-bottom">
        <div class="tooltip-bl"></div>
        <div class="tooltip-b"></div>
        <div class="tooltip-br"></div>
    </div>
</div>

CSS:

.tooltip {}
	.tooltip img {
		float: left;
		padding: 2px 7px 2px 2px;}
	.tooltip-top {
		padding: 0 10px;
		position: relative;}
		.tooltip-tl {
			background: url(../images/tooltip-tl.png) 0 0 no-repeat;
			height: 10px;
			left: 0;
			position: absolute;
			top: 0;
			width: 10px;}
		.tooltip-t {
			background: url(../images/tooltip-t.png) 0 0 repeat-x;
			height: 10px;}
		.tooltip-tr {
			background: url(../images/tooltip-tr.png) 0 0 no-repeat;
			height: 10px;
			position: absolute;
			right: 0;
			top: 0;
			width: 10px;}
	.tooltip-middle {}
		.tooltip-l {background: url(../images/tooltip-l.png) 0 0 repeat-y;}
		.tooltip-body {
			color: #fff;
			font: 10px Verdana, Geneva, sans-serif;
			padding: 0 10px;}
			.tooltip-body-t {background: #383838 url(../images/tooltip-body-t.png) 0 0 repeat-x;}
				.tooltip-body-b {
					background: url(../images/tooltip-body-b.png) 0 bottom repeat-x;
					overflow: hidden;
					padding: 0 3px 2px;}
		.tooltip-r {background: url(../images/tooltip-r.png) right 0 repeat-y;}
	.tooltip-bottom {
		padding: 0 10px 0 28px;
		position: relative;}
		.tooltip-bl {
			background: url(../images/tooltip-bl.png) 0 0 no-repeat;
			height: 18px;
			left: 0;
			position: absolute;
			top: 0;
			width: 28px;}
		.tooltip-b {
			background: url(../images/tooltip-b.png) 0 0 repeat-x;
			height: 18px;}
		.tooltip-br {
			background: url(../images/tooltip-br.png) 0 0 no-repeat;
			height: 18px;
			position: absolute;
			right: 0;
			top: 0;
			width: 10px;}

Живой пример

]]> http://www.easylife.by/blog/css/liquid-tooltips-with-shadows/feed/ 1 jQuery Looped Slider http://www.easylife.by/blog/css/jquery-looped-slider-tutorial/ http://www.easylife.by/blog/css/jquery-looped-slider-tutorial/#comments Sat, 20 Jun 2009 07:09:52 +0000 Easy Life http://www.easylife.by/?p=266 Сегодня мы будем использовать jQuery loopedSlider от Nathan Searles. Плагин к jQuery решает простую проблему, зацикливает слайдер.

Данный пример не будет сложным, можно просто копировать код и вы получите свой зацикленный слайдер. Вы можете посмотреть рабочую демонстрацию и скачать исходный код.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>loopedSlider jQuery Plugin</title>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css" media="screen"></style>
    </head>
    <body>
        <div id="loopedSlider">
            <div class="container">
                <div class="slides">
                    <div><img src="image-01.jpg" width="600" height="393" alt="First Image" /></div>
                    <div><img src="image-02.jpg" width="600" height="393" alt="Second Image" /></div>
                    <div><img src="image-03.jpg" width="600" height="393" alt="Third Image" /></div>
                    <div><img src="image-04.jpg" width="600" height="393" alt="Fourth Image" /></div>
                </div>
            </div>
            <a href="#" class="previous">previous</a>
            <a href="#" class="next">next</a>
            <ul class="pagination">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div>
    </body>
</html>

CSS

/*
* Required
*/
.container {width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer;}
.slides {position:absolute; top:0; left:0;}
.slides div {position:absolute; top:0; width:600px; display:none;}
/*
* Optional
*/
#loopedSlider,#newsSlider {margin:0 auto; width:500px; position:relative; clear:both;}
ul.pagination {list-style:none; padding:0; margin:0;}
ul.pagination li  {float:left;}
ul.pagination li a {padding:2px 4px;}
ul.pagination li.active a {background:blue; color:white;}

Тюнинг слайдера

На этот раз мы будем инициализировать плагин от нижней части документа, для того чтобы загрузить содержимое перед вызовом плагина.

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('#loopedSlider').loopedSlider();
			});
        </script>
    </body>
</html>

Автостарт слайдера:

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('#loopedSlider').loopedSlider({
					autoStart: 3000
				});
			});
        </script>
    </body>
</html>

Инициализация нескольких слайдеров:

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('#loopedSlider').loopedSlider({
					autoStart: 3000
				});
				$('#anotherSlider').loopedSlider({
					autoHeight: 400
				});
			});
        </script>
    </body>
</html>

Демонстрация нескольких слайдеров и слайдера с автостартом

Заключение

Мне очень нравится простота этого плагина и думаю я буду его использовать в будущих своих проектах. А что скажите вы? Доводилось ли вам ранее использовать jQuery loopedSlider? Какие другие jQuery слайдеры вы можете порекомендовать? Спасибо за внимание.

Оригинал статьи

]]> http://www.easylife.by/blog/css/jquery-looped-slider-tutorial/feed/ 2 Firefox Collections http://www.easylife.by/blog/other/firefox-collections/ http://www.easylife.by/blog/other/firefox-collections/#comments Wed, 10 Jun 2009 16:22:01 +0000 Easy Life http://www.easylife.by/?p=259 Сегодня был обрадован новой новостью от Mozilla. Теперь каждый может создать свою собственную коллекцию аддонов. Времена когда после переустановки системы приходилось рыться и вспоминать какие аддоны у меня стояли в прошлом.

Ссылка на коллекции — https://addons.mozilla.org/en-US/firefox/collections/

]]> http://www.easylife.by/blog/other/firefox-collections/feed/ 2 Умные колонки при помощи CSS и jQuery http://www.easylife.by/blog/css/umnye-kolonki-pri-pomoshhi-css-i-jquery/ http://www.easylife.by/blog/css/umnye-kolonki-pri-pomoshhi-css-i-jquery/#comments Tue, 26 May 2009 12:51:21 +0000 Easy Life http://www.easylife.by/?p=210 При просмотре различных резиновых сайтов, я увидел два основных способа отображения колонок — фиксированные и резиновые.

Фиксированные колонки

Фиксированные колонки

Фиксированные колонки

Резиновые колонки

Резиновые колонки

Резиновые колонки

Умные колонки при помощи CSS и jQuery

Данный способ позволяет исправить недостатки обоих вариантов представленных выше. Можно использовать любое количество колонок. Строка всегда будет заполнена на 100% без лишних пробелов. При помощи jQuery мы определяем ширину строки, потом высчитываем количество помещающихся колонок. Если колонки заполняют не всю строку, скрипт равномерно добавляет оставшуюся не используемую ширину колонкам. HTML:

<ul class="column"> <!--Repeating list item-->
	<li><div class="block"><!--Content--></div></li>
</ul><!--end repeating list item-->

CSS:

ul.column {
	width: 100%;
	padding: 0;
	margin: 10px 0;
	list-style: none;}
	ul.column li {
		float: left;
		width: 200px; /*Set default width*/
		padding: 0;
		margin: 5px 0;
		display: inline;}
.block {
	height: 355px;
	font-size: 1em;
	margin-right: 10px; /*Creates the 10px gap between each column*/
	padding: 20px;
	background: #e3e1d5;}
	.block h2 {font-size: 1.8em;}
	.block img {
		/*Flexible image size with border*/
		width: 89%;  /*Took 1% off of the width to prevent IE6 bug*/
		padding: 5%;
		background:#fff;
		margin: 0 auto;
		display: block;
		-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */}

jQuery:

function smartColumns() { //Create a function that calculates the smart columns

	//Reset column size to a 100% once view port has been adjusted
	$("ul.column").css({ 'width' : "100%"});

	var colWrap = $("ul.column").width(); //Get the width of row
	var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
	var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

	$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
	$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column

}

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
	smartColumns();
});

Пример

Оригинал статьи — Torrance Website Design — Soh Tanaka: Smart Columns w/ CSS & jQuery

]]> http://www.easylife.by/blog/css/umnye-kolonki-pri-pomoshhi-css-i-jquery/feed/ 1 Наклонные вкладки http://www.easylife.by/blog/css/slanting-tabs/ http://www.easylife.by/blog/css/slanting-tabs/#comments Sat, 16 May 2009 12:42:05 +0000 Easy Life http://www.easylife.by/?p=193 Наклонные вкладки

Наклонные вкладки

В последнем проекте мне пришлось сделать динамические вкладки. Схема простая — выделенная, наведенная и обычная. Единственное «НО» заключается в их заползании друг под друга. Решение пришло быстро, хотя не идеальное.


HTML:

<ul>
    <li><a href="#"><span>Форум</span></a></li>
    <li><a href="#"><span>Регистрация</span></a></li>
    <li><a href="#"><span>Аккредитованным пользователям</span></a></li>
    <li><a class="main_link" href="#"><span>Главная</span></a></li>
</ul>

CSS:

ul {
	border-bottom: solid 2px #000;
	list-style: none;
	overflow: hidden;
	padding: 0;}
	ul li {
		display: inline;
		float: right;}
a {
	background: url(slanting-tabs/h-menu-bg.gif) right -63px no-repeat;
	color: #000;
	display: block;
	float: left;
	font: 11px Tahoma, Geneva, sans-serif;
	margin: 0 0 0 -25px;
	padding: 0 45px 0 0;
	position: relative;
	text-decoration: none;
	cursor: pointer;}
	a span {
		background: url(slanting-tabs/h-menu-bg.gif) left -63px no-repeat;
		float: left;
		height: 25px;
		padding: 38px 0 0 35px;
		display: block;}
a:hover {background: url(slanting-tabs/h-menu-bg.gif) right -126px no-repeat;}
	a:hover span {background: url(slanting-tabs/h-menu-bg.gif) left -126px no-repeat;}
a.main_link {
	background: url(slanting-tabs/h-menu-bg.gif) right 0 no-repeat;
	color: #fff;}
	a.main_link span {
		background: url(slanting-tabs/h-menu-bg.gif) left 0 no-repeat;
		padding: 33px 0 5px 35px;}
a.main_link:hover {background: url(slanting-tabs/h-menu-bg.gif) right 0 no-repeat;}
	a.main_link:hover span {background: url(slanting-tabs/h-menu-bg.gif) left 0 no-repeat;}

IE капризничает. Ничего нового.

<!--[if lt IE 8]>
<script type="text/javascript" src="http://www.easylife.by/example/IE8.js"></script>
<![endif]-->

Все готово. Пример.

]]> http://www.easylife.by/blog/css/slanting-tabs/feed/ 4 Вертикальное центрирование многострочного текста http://www.easylife.by/blog/css/vertically-center-multi-lined-text/ http://www.easylife.by/blog/css/vertically-center-multi-lined-text/#comments Fri, 15 May 2009 10:24:36 +0000 Easy Life http://www.easylife.by/?p=168 Вертикальное центрирование многострочного текста

Вертикальное центрирование многострочного текста

Читая свои RSS подписки, напоролся на статью о вертикальном центрировании многострочного текста. До этого у меня был проект в котором я решал эту проблему. Почитав оказалось не все в шоколаде, IE6 и IE7 опять показали характер. Сразу понял — статья бесполезна. Есть повод поделиться своим решением проблемы.

Помимо всего мне пришлось весь этот текст выводить как ссылку с меняющимся фоном при наведении.


HTML:

<div class="menu_box"><a href="#">Многострочный текст</a></div>

CSS:

.menu_box {
	background: url(vertically-center-multi-lined-text/menu-bg.jpg) 0 0 no-repeat;
	display: table-cell;
	height: 65px;
	vertical-align: middle;
	width: 178px;}
.menu_box:hover {background: url(vertically-center-multi-lined-text/menu-bg-hover.jpg) 0 0 no-repeat;}
	.menu_box a {
		color: #3d3d3d;
		display: block;
		font: 10px Tahoma, Geneva, sans-serif;
		padding: 10px 40px;
		text-decoration: none;
		margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
	.menu_box:hover a {color: #fff;}

Все работает классно, но в IE не меняется фон. Для этого уже давно припасено решение:

<!--[if lt IE 8]>
<script type="text/javascript" src="http://www.easylife.by/example/IE8.js"></script>
<![endif]-->
Единственный недостаток — область ссылки

Единственный недостаток — область ссылки

Единственный недостаток — область ссылки.

Пример.

]]> http://www.easylife.by/blog/css/vertically-center-multi-lined-text/feed/ 2 Идеальный CSS http://www.easylife.by/blog/css/ideal-css-by-easy-life/ http://www.easylife.by/blog/css/ideal-css-by-easy-life/#comments Tue, 12 May 2009 15:42:57 +0000 Easy Life http://easylife.by/blog/?p=93 Прочитав множество статей по улучшению CSS, решил написать свою собственную об «Идеальном CSS» в моем личном понимании.

Для начала он должен быть удобен для меня. Работа с собственным CSS не должна вызывать у меня каких либо проблем. Также не стоит забывать про людей которые буду работать с этой версткой после. Если это получится, то Ваш CSS смело можно назвать идеальным.

Сброс

Для начала я обязательно делаю сброс стандартных настроек браузера. К сожалению они не везде одинаковые и могут добавить неудобств. Пример отображения <p> по умолчанию. С помощью CSS Reset можно избавиться от этой разницы для обеспечения кроссбраузерности стилей. Для этого я использую отдельный CSS, который я подключаю перед основным.


Пример моего reset.css:

a img, :link img, :visited img, abbr, acronym, fieldset, object {border: none;}
abbr, acronym {border-bottom: 1px dotted #999; cursor: help;}
address, caption, cite, code, dfn, em, strong, th, var, h1, h2, h3, h4, h5, h6 {font-style:normal; font-weight:normal;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, code, pre {margin:0; padding:0;}
body {background: #fff; font-size: 62.5%;}
caption, th {text-align:left;}
code, pre {white-space: pre-wrap;}
ol, ul {list-style:none;}
q:before, q:after {content:'';}
table {border-collapse:collapse; border-spacing:0;}

Данный CSS основан на YUI Reset CSS от Yahoo!

Разберем по пунктам:

a img, :link img, :visited img, abbr, acronym, fieldset, object {border: none;}

— Обычно мне не нужны границы.

abbr, acronym {border-bottom: 1px dotted #999; cursor: help;}

— «Подчеркивание», курсор. Красота.

address, caption, cite, code, dfn, em, strong, th, var, h1, h2, h3, h4, h5, h6 {font-style:normal; font-weight:normal;}

—  Убираем курсив и вес шрифта.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, code, pre {margin:0; padding:0;}

— Убираем лишние отступы и величину поля.

body {background: #fff; font: 62.5% Tahoma, Geneva, sans-serif; }

background: #fff; — Теперь уж точно не будет сюрприза, что где-то фон не того цвета.
font: 62.5% Tahoma, Geneva, sans-serif; — Почему 62.5? Все просто. Если Вы измеряете в em или %, то после такого изменения 1em=100%=10px.

caption, th {text-align:left;}

— Убираем центрирование.

code, pre {white-space: pre-wrap;}

— Переносим слова если не влазят.

ol, ul {list-style:none;}

— Убираем маркеры списка, т.к. очень часто эти элементы используются для семантической верстки.

q:before, q:after {content:'';}

— Убираем обрамление цитат.

table {border-collapse:collapse; border-spacing:0;}

— Приводим в порядок таблицу.

Естественно все можно изменять по вкусу, но не забывайте — это файл сброса настроек, а не основной.

Не советую использовать универсальный селектор:

* {
	margin: 0;
	padding: 0;}

Это занимает больше времени на обработку и изменит в худшую сторону элементы подобные radio button.

Подведем итоги

— Не забудьте, что сначала всегда следует подключать CSS Reset, а потом все остальные стили.
— Используйте отдельный CSS-документ для CSS Reset
— Старайтесь избегать использование универсального селектора
— Избегайте избыточных описаний свойств при использовании CSS Reset

Всему свое время.

Даже не пытайтесь трогать CSS пока Вы не сделаете разметку!

Начните Вашу верстку с разметки страницы — header, content, sidebar, footer. Не используйте сразу никаких лишних div, id, clsss и прочего. В итоге вы получите идеальный семантический код. Уже после разметки можно взяться за CSS и заняться оформлением.

Организация

Организуйте свой CSS. Гораздо удобнее работать с элементами сайдбара если они все находятся в одном месте, а как удобно настроить базовые параметры если их не нужно искать среди параметров контента.

Пример организации:

/* Basic Elements */
body, h1-h6, a, p, и прочие.
/* Basic Layout */
#header, #content, #sidebar, #footer.
/* Header */
Все элементы из #header.
/* Content*/
Все элементы из #content.
/* Sidebar*/
Все элементы из #sidebar.
/* Footer */
Все элементы из #footer.

Используя комментарии для обозначения групп, Вы сократите свое и чужое время на поиски нужных элементов.

Оформление

Стиль

Какой бы стиль кода Вы не выбрали, придерживайтесь его.

Не стоит загоняться спорами какой код лучше, многострочный или однострочный.

Я использую оба вида. Однострочный — элемент имеет один параметр. Многострочный — у элемента несколько параметров:

h3, h4, h5, h6 {font: 20px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;}
a:link, a:visited {
	border-bottom: solid 1px #ebebeb;
	color: #528fb2;
	text-decoration: none;}
a:hover {color: #B6CEE0;}

Еще люблю оформлять вложения:

#header {
	height: 140px;
	padding: 40px 40px 0;
	position: relative;}
	#header h1 {
		border: none;
		padding: 0 0 10px;
		text-transform: none;}
		#header h1 a {
			color: #fff;
			font: 30px/40px "Trebuchet MS", Arial, Helvetica, sans-serif;}
		#header h1 span {
			color: #d0eaff;
			display: block;
			font: 14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}
		#header ul {
			display: block;
			margin: 0;
			padding: 0;}
			#header ul li {
				display: inline-block;
				float: left;
				list-style: none;
				margin: 0 20px 0 0;}
			#header ul li.rss {
				float: right;
				margin: 0 0 0 20px;}

Удобно, правда?

Сортировка

Еще удобно когда все параметры отсортированы в алфавитном порядке. При долгой работе с таким отсортированным CSS взгляд мгновенно будет падать на нужные параметры.

h1 a {
	background: #fff;
	color: #fff;
	font: 30px/40px "Trebuchet MS", Arial, Helvetica, sans-serif;}
h1 span {
	background: #333;
	color: #d0eaff;
	display: block;
	font: 14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}

Сокращение

Напоследок можно сократить некоторые параметры:
Цвет:

background: #ffaa55;

заменить на:

background: #fa5;

Отступы и поля:

margin: 1px 2px 3px 2px;
padding: 1px 2px 1px 2px;

заменить на:

margin: 1px 2px 3px;
padding: 1px 2px;
]]> http://www.easylife.by/blog/css/ideal-css-by-easy-life/feed/ 0