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

Спросите о чем я говорю? Ну например вам надо сделать меню-вкладки, пять штук, шириной по 20% от ширины контентной части. Думаете у вас просто так это получится? Фигушки. При наличии “лишних” пикселей, которые не вписываются по габаритам в эти 20%, они будут округляться. И каждый это сделает по-своему. Опера тупо их отбросит. ИЕ логикой не отличается, поэтому пикселей будет либо меньше чем надо, либо больше.

Пришлось мне воевать с таким проектом… Проблему решал через JS. Но это некошерный костыль.

Но способ есть (жаль что на тот проект нельзя повесить, ибо верстка уже вся готова, а переверстывать после кого-то мне жутко влом).

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

Итак приступим.

Имеем:

<div id="first">
	<ul>
		<li class="t1">tab</li>
		<li class="t2">tab</li>
		<li class="t3">tab</li>
		<li class="t4">tab</li>
		<li class="t5">tab</li>
	</ul>
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
	</div>
</div>

И стили к нему:

* {padding:0;margin:0;border:none;}
body {background: #363228;color: #8f866e;font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;padding: 20px 50px;}
h2 {clear:both;font-size:2.2em;padding: 30px 0;}
ul {zoom:1;} /* for ie */
ul li {float:left;width:20%;padding:10px 0;text-align:center;font-size:1.8em;list-style:none;}
.t1{background:#eee}
.t2{background:#ddd}
.t3{background:#ccc}
.t4{background:#bbb}
.t5{background:#aaa}
.content {background:#fff;clear:both;padding: 30px 0}
.content p {margin: 0 30px 15px 30px;font-size:1.3em;}

В результате в разных брузерах табы либо меньше ширины, либо больше (в зависимости от разрешения).

Теперь чиним

#first {width:20%;margin:auto;}
#first ul {float:left;width:500%;margin-left:-200%;}
#first .content {width:500%;margin-left:-200%;}
* html #second ul {margin-left:auto;} /* for ie6 */
* html #second .content {margin-left:auto;} /* for ie6 */

И ура… все поровнялось.

Что мы в итоге сделали? Мы на начальном этапе сделали округление “левых” пикселей, задав ширину основного контейнера в 20%. А дальше просто вложенные элементы подогнали до нужной нам ширины и выдвинули отрицательным отступом в нужное нам место :). Естесно ИЕ6 нас послал и отрицательным отступом выкинул наш контент к черту на кулички, но без онного поставил как надо. Поэтому, сугубо для ИЕ6, две строчки отменяющие отрицательный отступ слева.

Уж простите если качество написания не сильно понятно, не мастак я много писать :).

Работающий пример можно посмотреть ТУТ .

Появилась идея на один из своих сайтов повесить “онлайн консультации”. Использовать платное ПО ну ооочень накладно. Стоит оно некисло. Плюс хотелось чтото простое и через джаббер (мне удобнее как-то так). Сервисы с такими условиями есть, но стоят тоже вагон денег. А еще хотелось и дизайн под себя заточить… Неделя поисков и мук. Результат ниже.

• Регистрируемся на libraryh3lp.com;
• получаем JID типа live@libraryh3lp.com;
• Настраиваем внешний вид самого чата (по умолчанию аскетичен и мне не поравился) и получаете адрес вашего чата;
• Настраиваем жабер клиент;
• Регистрируем транспорт от http://presence.jabberfr.org/ (будет использовать как статус на сайте).

Далее шаманим уже у себя на сайте…

1. Вывод кнопки

<p class="chat">
	<a href="http://libraryh3lp.com/chat/live@libraryh3lp.com">
		<img class="hide" id="online" src="/img/on.gif" title="Консультация on-line" />
		<img class="hide" id="offline" src="/img/off.gif" title="Консультация on-line" />
	</a>
</p>

2. Проверка статуса (status.php)

<?php
$url = 'http://presence.jabberfr.org/"тут ваш иди полученный на presence.jabberfr.org"/text-en-us.txt';
$content = file_get_contents($url);
if(!empty($content)) {
	if($content == "Available") {
		$result = 'online';
	}else{
		$result = 'offline';
	}
}else{
	$result = 'hz';
}
echo json_encode($result);
?>

3. jQuery для динамического изменения кнопки статуса

function checkStatus(){
	$.getJSON("./status.php",function(data){
		if(data) {
			if(data.status != 'error') {
				if(data == 'online') {
					$('#online').fadeIn("slow");
					$('#offline').fadeOut("slow");
				}else{
					$('#online').fadeOut("slow");
					$('#offline').fadeIn("slow");
				}
			}else{
				$('#error').removeClass('hide').html(data.message);
			}
		}
	});
}

Ну вот кажется и все… Для более приятного внешнего вида я создал файлик с графический оформлением и в нем iframe с чатом. Ссылка с кнопки соответственно на этот файлик.

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

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

Так что, если интересно, ждите… Скоро будет :).

Неужели свершилось? Нарыл на просторах сети:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

и будет счастье шрифтов, которые хочеш, а не которые придется :).

зы: Стопудово не работает в Опере до 10й версии. ИЕ работают. Фокс выше 3 работает. Вебкитовские – аналогично.

Давний холивар по поводу “смерть аське” как таковых результатов дал мало. Народ как сидел на асе, так и сидит. Но не о том речь…

Учитывая структуру jabber, каждый, кто в него приходит, задается вопросом – а какой же сервер выбрать? Серверов немеренно и стабильность у них не постоянна. Исключение, пожалуй, составляет лишь gTalk. Но при всей свой стабильности функции самого джаббера там кастрированы до нельзя.

Итак делема – стабильный но кастрированный гугл, или полный, но неустойчивый сервер “истинного” джаббера.

С другой стороны посмотрим… А многие ли пользователи пользуются всеми прелестями джаббера помимо банального болтания? Думаю, что большинство даже и не в курсе, что можно, а что нельзя в джаббере. К истиным гикам это не относится :).

Итого как резюме. Лично меня гугл устраивает всем (особенно хранением истории на сервере), кроме отсутсвия информации пользователя. Тобишь нельзя указать никакие свои данные помимо ника и аватара. Посему на данный момент я тупо под несколькими жаберами смотрю, что стабильнее, а что удобнее. В какую сторону склонится мой выбор скать тяжело. Время покажет.

Что же вы думаете об этом???

UPD (15.11.2009)

Исследования показали, что далеко не все сервера жабера могут приконнектиться к гугловскому серваку… Еще кусок информации для размышления.

Нет. Ну я конечно понимаю, что мою видеокарту разве что в музее сейчас можно найти. Но чтобы так с ней жестоко…

Еще со времени винды с ужасом вспоминаю танцы, чтобы завести opengl и установить вменяемые драйвера. И вот те на. Обновил драйвера в убунте и благополучно свалил xserver… Пришлось откатываться назад.

Ё-маё… Где справедливость!

Ну вот и холода навалились. И печаль обуяла меня.

Солнышка мало, дожди (а порой уже и снег) идут. Совсем скоро зима с морозами и всеми выпадающими. А казалось лето – три месяца… Пролетело – фиг заметил.

Крепитесь люди – скоро лето :).

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

Кратко о прошедшем.

• Скатались в поляндию за всякими цветочками на торговлю. Начал ненавидеть поляков.
• Пригнали фуру вышеуказанных цветочков.
• Пытались разобраться с документами. Еще больше стал ненавидеть поляков и бюрократию.
• Начали потиху продовать. Стал любить белорусских клиентов :)

Короче скоро сам позеленею и зацвету :).