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

Сейчас я желал бы поведать Вам как с помощью CSS сделать наш элемент отцентрированным точно посередине экрана, то есть, и вертикально и горизонтально сосредоточенным.

Данный класс ставит правый верхний угол элемента точно в центре экрана.

Для точного выравнивания по центру, нам необходимо применить половинные отрицательные значения ширины и высоты нашего элемента.

Это выглядит примерно так:

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!

В числе основных плюсов в Вашем подходе к работе с нами хочется отметить качественный принцип работы на результат, поливариантность предложенных концептов дизайна и гибкий подход к нашим пожеланиям, которые были профессионально Вами скорректированы в направлении эффективного рекламного воздействия. С технической стороны Ваша работа оценена нами на высшем уровне, так как ни разу мы не услышали от Вас, что Вы чего-то не сможете сделать (в пределах разумного конечно). Сопровождение и быстрое реагирование достойно отдельной высшей оценки. Как результат, мы получили именно то что мы хотели!

Удачи Вам и Вашей команде! От нас Вам лучшие рекомендации и готовность продолжать сотрудничество!

Зам.директора «ДУКО-ТЕХНИК» Роман Стадник

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

Я полагаю, что каждый способен оценить неудобство работы с несколькими браузерами. Однако существует достаточно интересный браузер – IETester который позволяет проверить наш проект в IE8 beta 1, IE7 IE 6 а также IE5.5 в WindowsVista и XP

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

Для поддержки Internet Explorer 7 и 8 в WindowsХР данному браузеру нужна установленная версия IE7. Если у вас стоит IE 6, то 7 и 8 версия будут недоступны.

Скачать IETester v0.2.2 (23.8MB)

Некоторое время назад мне стало любопытно, как на некоторых сайтах сделана весьма полезная на мой взгляд “штука” предоставляющая возможность пользователю ( посетителю ресурса ) изменять размер шрифта на более подходящий ему.

Вот собственно я хочу поделиться вариантом реализации данной как говорится “фичи”.

Шаг 1:
Вставляем в документ следующий скрипт:

<script type="text/javascript" language="javascript">
var min=8;
var max=16;
function increaseFontSize() {
   var p = document.getElementsByTagName('div');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('div');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
</script>

Данный скрипт имеет две переменные MIN и MAX которые соответственно отвечают за минимальный и максимальный размер шрифта. Их вы можете варьировать по своему усмотрению.

Шаг 2:Теперь делаем вывод нашего блока с регулировкой размера шрифта следующим образом:

<a href="javascript:increaseFontSize();" title="increase">+</a> | <a href="javascript:decreaseFontSize();" title="decrease">-</a>

Данный пример будет менять текст от 8 до 16 пунктов в каждом<div>е на вашей странице.

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!

Довольно редкий прием эксплуатации CSS - действие на регистр отображаемых знаков. Для тех, кто не в курсе, регистр знаков характеризует их заглавное свойство. Говоря легче, знаки в верхнем регистре - ЗАГЛАВНЫЕ, т.е. крупные знаки, а знаки в нижнем регистре - строчные, т.е. мелкие буквы.

Уверен, читатель неоднократно увидел на просторах Интернете сайты, у которых та или другая часть, к примеру заголовок статьи, был написан заглавными символами. Если открыть просмотреть содержание соответствующего html документа - там, обычно, также будут заглавные буквы.

Весьма немногие знают о таком интересном свойстве в CCS, как text-transform. С его помощью и возможно осуществлять манипуляции с отображаемым текстом, без непосредственного вмешательства в сами знаки текста. Свойство text-transform может принимать 5 различных значений: inherit, capitalize, uppercase, lowercase и none. Подробней о них:

capitalize - первая буква текста с таким значением свойства CSS text-transform всегда будет строчной;
uppercase - это свойство заставит браузер отображать текст только заглавными буквами;
lowercase - как многие уже догадались, полная противоположность предыдущему случаю - весь текст отображается только строчными буквами;
inherit - указывает, что должно использоваться значение родительского элемента;
none - вывод текста таким, какой он есть, для text-transform это значение по умолчанию;
И наглядный пример:

Вот так это будет выглядеть:

У некоторых читателей теперь, вероятно, возникнет вопрос: “Ну и на кой… все это необходимо? Не легче тут же написать подобным шрифтом, каким необходимо отображать???”. Хм… частично справедливо. А сейчас попробуйте представить ситуацию: вам поручили в доработку и администрирование большой посещаемый портал, с большим количеством страниц, которые, чаще всего, генерируются по шаблону и выводятся нормальными символами. И тут, как это бывает, клиенту нечто стукнуло в голову / встал не с той ноги / увидел такое у конкурентов / собственный вариант / … И заявил, что желает, чтоб все заголовки выводились лишь огромными, заглавными символами. Ваши действия: запаниковать и уволиться / нанять сотню людей и начать руками перепечатывать заголовки / написать скрипт, который переворошит всю базу данных (заодно пару раз перегрузив сервер и грохнув саму базу :)) и изменить регистр знаков / … / применять в нужном месте шаблона CSS свойство text-transform и решить задачу за пару мин.. А когда на следующий день клиент попросит возвратить обратно, вам не захочется искать веревку с мылом, ведь довольно будет только изменить одно свойство в шаблоне генератора. Примеров возможно приводить еще немало. Говоря коротко - штука полезная, не забывайте про это свойство.

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!

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

Мотивация для этого бывает наиболее разная, как простое любопытство, так и желание поселиться по соседству на хорошем и стабильном хостинге или наоборот не вляпаться в такое соседство.

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

Так же “на берегу” оговорюсь: все упомянутые ниже сайты и хостеры упомянуты только как наглядные примеры, и ни за что не в качестве рекламы или, упаси господи, антирекламы. Выбор оных был сделан так же почти случайно - где какие методы у меня когда-то срабатывали, то и привожу.

Так же “на берегу” оговорюсь: все упомянутые ниже сайты и хостеры упомянуты только как наглядные примеры, и ни за что не в качестве рекламы или, упаси господи, антирекламы. Выбор оных был сделан так же почти случайно - где какие методы у меня когда-то срабатывали, то и привожу.

Способы я перечисляю в порядке убывания точности и, к несчастью, в порядке возрастания вероятности срабатывания.

1. NS-сервера

Даже удивительно, что позабыл упомянуть с самого начала. Часто люди пользуются NS-серверами хостера и с помощью whois’a мы мгновенно узнаем хостера.

Плюсы
Часто срабатывает на шаред-хостингах

Минусы
Чаще всего пользователи VPS и дедиков, а так же продвинутые пользватели на шаред-хостингах пользуются собственными DNS-серверами, или применяют свои поддомены.

2. Ошибка 403/404

Не могу заявить, что больше всего, однако много серьезных хостеров страницы ошибок веб-сервера изначально делают с информацией о себе, а многие их клиенты забывают/ленятся их переопределить. Потому прежде всего стоит попытаться вызвать такую ошибку и поглядеть, что получится. Бывает так, что CMS на веб-ресурсе с помощью mod_rewrite перехватывает запросы к несуществующим файлам и отдает в ответ собственную 404-ю ошибку. Это возможно попробовать обойти, вызвав ошибку 403 путем обращения к какталогу без индексного файла. Им может оказаться папка с картинками/шаблонами, папка для загруженных файлов, кэша движка, системная папка типа includes и т. п. Маленький хинт - время от времени на странице ошибки есть email вебмастера и нередко из него возможно выяснить домен ресурса хостера.

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

Минусы
Часто маленькие хостеры забывают/ленятся устанавливать собственные страницы ошибок

Еще чаще CMS ресурса перехватывает запросы к несуществующим файлам и прячет стандартную страницу хостера

3. Виртуалхост изначально.

Тут ситуация по большей части аналогична предыдущей - большие хостеры обычно на виртуалхост изначально ставят свои заглушки, небольшие нередко этим пренебрегают и виртуалхостом изначально обычно становится или I ресурс I-го их клиента, или стандартная заглушка от панели управления (в особенности нередко это наблюдается в случае с cpanel). К слову, при первом раскладе есть приятный частный случай, состоящий в том, что временами первым сайтом I-го клиента становится веб ресурс самого хостера и потому прием все-таки дает желаемый результат.
Наиболее надежный метод попасть на виртуалхост изначально - обратиться к веб-серверу по IP.

Плюсы
Довольно высокая точность определения хостера. Постоянно возможно определить хостера-владельца сервера, а если реселлер работает на выделенном IP, то ингода и реселлера.

Срабатывает почти на всех больших хостерах.

Минусы
Для некрупных хостеров обычно не работает.
В особенности нередко не срабатывает на серверах с Cpanel - выдается стандартная заглушка панели

4. Reverse DNS Lookup

Не вдаваясь в подробности скажу, что для любого IP адреса возможно при помощи PTR записи в DNS-зоне возможно задать “домен изначально” (не совсем точный термин, однако не в этом суть). При этом большинство хостеров присваивают собственным серверам домены изначально, содержащие в себе имя домена хостера, т. е. нечто вроде server-name.hoster-name.com.

Наиболее простой вариант выяснить это доменное имя изначально - с помощью всем родного ping’a (альтернативно - команды host, dig и nslookup под Linux’ом, аналоги под виндой обязаны быть, однако я про них ничего не знаю).

Плюсы
Срабатывает в большей части случаев. Если полученный домен не указывает как-то на интернет-сайт хостера, то вероятнее всего это частный выделенный сервер или VPS.

Весьма без труда применяется. Даже если под руками нет ping’a (вдруг с телефона/КПК), то есть масса бесплатных сервисов для проделывания Reverse DNS Lookup запросов.

Минусы
Время от времени для инфраструктуры применяются некоторые домены, которые не имеют очевидной связи с хостером.

5. Traceroute

Этот метод тесно связан с предыдущим, т.к. также подразумевает применение Reverse DNS Lookup, лишь на этот раз мы будем смотреть домены и для узлов на дороге к интересующему нас узлу. Смысл в этом прост - по доменам последних узлов в трейсе мы с огромной вероятностью угадаем хостера или датацентр, в коем размещен интересующий нас интернет-сайт. Понятно, что этот метод поможет нам в случае если испытуемый сидит на VPS или выделенном сервере.

Плюсы
Почти 100 процентов вероятность на удача в определении датацентра и слегка меньшая - именно хостера

Без труда проделывается под любой ОС или при помощи веб-сервиса.

Минусы
Т.к. DNS-запросов приходится исполнять достаточно немало, то этот метод становится наиболее долгим в списке.

6. Whois

Вот и добрались до Whois’a, великого и жуткого. В базе данных Whois хранятся не только лишь данные о доменах, но еще и данные о владельцах диапазонов и отдельных IP-адресов. Соответственно, на основе информации мы можем попытаться установить компанию-владельца хостинга или датацентра.

Плюсы
Работает безотказно. При любом раскладе возможно определить как минимум приблизительно, в каком ДЦ расположен интернет-сайт и в ДЦ ли вообще (бывает, сайты на домашнем компе крутятся;-))

Минусы
Низкая точность определения. Случаев, когда вы сможете определить точнее, чем ДЦ - по пальцам перечесть.

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

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!

Как точно понять, что веб-сайт в бане?
Самому на 100 процентов определить забанен ли веб-сайт нереально. Возможным признаком бана, является полное выпадение всех страниц сайта из индекса поисковой системы.

Проверяется это так: http://www.yandex.ru/yandsearch?serverurl= сайт.уа где вместо сайт.уа проставляется проверяемый сайт с www и без.

А если сайт просто еще не попал в индекс - попробуйте добавить его черезз аддурл http://webmaster.yandex.ru/ и посмотрите ответ робота.

Однако это не - гарантия бана.
Получить достоверный ответ возможно лишь написав на addurl@yandex-team.ru послание вида:

Здравствуйте.
Все страницы сайта ….., администратором которого я являюсь, выпали из индекса поисковой системы. Поясните, пожалуйста, что случилось.
С уважением, Вася.

Дождаться ответа, и по нему определить есть бан, или нет.

Что делать?
В ответном письме дается намек на причину бана. По этому намеку уже кое-что возможно определить. С другого конца на веб-сайте может оказаться куча дополнительных мелких нарушений, которые не послужили причиной бана, однако могут противостоять выводу из него ресурса. По этой причине лучше провести разбор иных возможных нарушений и попытаться отыскать возможные причины бана, устранить ее и написать послание на addurl@yandex-team.ru с указанием, что причины исправлены.

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

Поскольку Internet Explorer имеет “свое толкование таблиц стилей CSS” а бывают задачи, или же необходимость сделать кроссбраузерный сайт ( или верстку ) с сохранением чистого CSS кода то неизбежно нужно будет создавать отдельные таблицы стилей для Internet Explorer.

В данной публикации я хочу привести пример организации таблиц CSS для браузера IE.

Данный метод является базовым и указывает любому НЕ IE браузеру использовать определенную таблицу стилей.

<![if !IE]>

<link rel="stylesheet" type="text/css" href="REAL-STYLESHET.css" />

<![endif]>

Если есть необходимость привязки к определенной версии браузера то это можно сделать так:
Только для IE 6:
<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />

<![endif]-->

Только для IE 5:
<!--[if IE 5]>

<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />

<![endif]-->

Только для IE 5.5:
<!--[if IE 5.5000]>

<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />

<![endif]-->

Только для IE 6 и ниже:
<!--[if lte IE 7]>

<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />

<![endif]-->

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

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!

Cloud Zoom – это облегченный, быстро настраиваемый jQuery плагин, который позволяет увеличивать изображения на ваших веб-сайтах. Можно использовать этот плагин для создания увеличенных изображений с различными характеристиками, такими как теневой эффект, внутреннее увеличение и размытое изображение. Этот плагин работает во всех браузерах, включая IE6.

Cloud Zoom очень прост в обращении и хорошо документирован. Можно легко изменить вид эскиза изображения, линзу и увеличительное окошко, используя CSS. Он предлагает несколько встроенных опций, позволяя изменять его поведение, включая: высоту, ширину и позицию увеличительного окошка; тень; прозрачность; степень сглаживания/искаженности увеличенного изображения при его движении; добавления заголовков.

Характеристики плагина:
- Легкая интеграция с HTML
- Малый размер скрипта (6 Кб)
- Плавное перемещение при увеличении
- Режим галереи
- Функции внутреннего увеличения и размытия
- Эффект размытия без использования Javascript

Cloud Zoom доступен для скачивания под лицензией MIT. Найти дополнительную информацию, демо а так же скачать можно на Cloud Zoom Website.

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!

Облако тегов становится все более массовым явлением которое одновременно является и веянием моды и важным элементом навигации.

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

Сегодня приведем пример оформления облака тэгов внешний вид которого вы можете видеть ниже.

Оформление облака тегов

Облако тегов или Туча ярлыков или Облако меток (англ. tag cloud) — визуальное представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определенного сайта неких слов, терминов, имен, отображается на специальной странице в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем выше релевантность данного слова (термина, имени).

Настроим различные классы оформления в CSS примерно таким образом:

ul {
	margin-top: 50px;
	list-style-type: none;
}

li {
	float: left;
}

ul li a {
	text-decoration: none;
	line-height: 2.3em;
}

ul li a.size1 {
	color: #666;
	padding: 2px;
}
	ul li a.size1:hover {
		background-color: #999;
		color: white;
	}

ul li a.size2 {
	color: #912600;
	padding: 12px;
}
	ul li a.size2:hover {
		background-color: #cc3500;
		color: white;
	}

ul li a.size3 {
	color: #877900;
	padding: 18px;
}
	ul li a.size3:hover {
		background-color: #d8c100;
		color: white;
	}

ul li a.size4 {
	color: #1d6c01;
	padding: 8px;
}
	ul li a.size4:hover {
		background-color: #2daf00;
		color: white;
	}
ul li a.size5 {
	color: #004e6b;
	padding: 6px;
}
	ul li a.size5:hover {
		background-color: #007ead;
		color: white;
	}

ul li a.size6 {
	color: #430069;
	padding: 24px;
}
	ul li a.size6:hover {
		background-color: #7600b9;
		color: white;
	}

Применим классы оформления к списку категорий примерно так:

CSS-верстка
Продвижение сайта
Поисковые системы
Браузеры
Веб-мастеринг
Интернет

	...и т.д.

и вуаля;)

Удачи Вам - и помните: создание сайтов должно проходить только на профессиональном уровне!