Думаю многие, кто верстает, сталкивался с проблемой округления процентов при верстке резиновых сайтов. Учитывая, что только 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 с чатом. Ссылка с кнопки соответственно на этот файлик.

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

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

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