специи по вкусу

ВЯЧЕСЛАВ БАЕВ

Спецвыпуск: Хакер, номер #073, стр. 073-010-8

}

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

И еще одно решение.

HTML:

ЛИСТИНГ

<div class="zag">клубы</div>

Javascript:

ЛИСТИНГ

function getElementsByClassName(node, classname) {

var a = [];

var re = new RegExp('\\b' + classname + '\\b');

var els = node.getElementsByTagName("*");

for(var i=0,j=els.length; i<j; i++)

if(re.test(els[i].className))a.push(els[i]);

return a;

}

function shadowText(originalClass, shadowClass) {

if (typeof disableShadowedText != 'undefined') return;

var els = getElementsByClassName(document, originalClass);

for (i=0;i<els.length;i++) {

var text = els[i].innerHTML;

els[i].className = shadowClass;

els[i].innerHTML = text + '<div class="'+originalClass+'" style="position:absolute;">' + text + '</div>';

}

}

$(document).ready(function() {

shadowText('zag', 'zag_shadow');

});

CSS:

ЛИСТИНГ

.zag {

тут определяем, как выглядит заголовок текста

}

.zag_shadow{

а тут, - как выглядит его тень

}

[задача]

ЛИСТИНГ

<div style="width: 100%; border: red solid 1px;">

<div style="float: left;">

<a href="#"><img src="img.gif alt="text" /></a>

<a href="#"><img src="img.gif" alt="text" /></a>

</div>

...

</div>

На практике видим следующее. В IE блок растянут на всю ширину, высота - по границам содержимого, все ОК. В Opera блок вытянулся в линию на ширину экрана. В Firefox: то же, что в Опере, но еще и нижеследующая таблица с какого-то перепугу прижалась к img'ам внутри ДИВ’ов.

Далее убираем float вложенного ДИВ’а. Во всех браузерах все становится на свои места. Но float-то нужен, да и ДИВ должен быть нормальной высоты!

Вопрос: это лечится как-то, кроме насильной установки высоты ДИВ’а?

[решение.]

Да, действительно, от float внешний контейнер не растягивается. Как преодолеть?

1 Сделать нечто с clear: both. Стандартный вариант, однако, это не слишком хорошо, исходя из идеологии css как освобождения html от ненужного мусора (а тут после каждого такого флота лишний элемент придется делать).

2 Воспользоваться свойством css2 after, имея следующий код:

HTML:

ЛИСТИНГ

<div class=”clearfix” style="width: 100%; border: red solid 1px;">

<div style="float: left;">

<a href="#"><img src="img.gif alt="text" /></a>

<a href="#"><img src="img.gif" alt="text" /></a>

</div>

...

</div>

CSS:

ЛИСТИНГ

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

IE, естественно, этого понять не в силах. Конечно, IE сам как бы делает clear, но это применимо к элементам с указанным измерением, а указывать ширину/высоту не всегда желательно. Специально для IE делаем следующее.

CSS:

ЛИСТИНГ

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

/* End hide from IE-mac */

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