хак » СОЗДАНИЕ САЙТОВ | Разработка сайтов

Число тегов в облаке DLE #

Хак, который позволит вам изменять количество выводимых меток (тегов) в блоке.

Открываем файл \engine\modules\tagscloud.php и ищем:

$db->query("SELECT SQL_CALC_FOUND_ROWS tag, COUNT(*) AS count FROM " . PREFIX . "_tags GROUP BY tag ORDER BY count DESC LIMIT 0,40");

и заменяем на:

$db->query("SELECT SQL_CALC_FOUND_ROWS tag, COUNT(*) AS count FROM " . PREFIX . "_tags GROUP BY tag ORDER BY count DESC LIMIT 0,60");

где LIMIT 0,60 — количество тегов извлекаемые из базы данных.
Ищем в том же файле:

if ($row['count'] >= 40) {

и заменяем на:

if ($row['count'] >= 60) {

где >= 60— количество тегов выводимые в блоке.

Блог » PHP / Теги: DLE, хак, число, тегов / 02.07.10 / Оставить комментарий [0]

Все страницы внизу новостей в DataLife #

Открыть show.short.php

Найти

if($pages_count > 10)

Заменить на

if($pages_count > 100000)

А еще немного статистики за 2009:

PHP, Заметки / Теги: статистика, хак / 11.01.10 / Оставить комментарий [0]

Позиционирование блоков горизонтально #

Сразу скажу что эти решения не подходят для ИЕ6. Вообще мое мнение надо отстреливать всех кто использует этот браузер -) Шутка -)

Штука намбер ван (обычно приходилось применять php):
Нужно сделать вот так:

Делаем html каркас:

Для того, чтобы горизонтально расположить блоки в оболочке, нам потребуется всего несколько строк CSS кода. Первое, что приходит в голову: объявить класс .section со свойствами width и margin-right, с нужными нам значениями. Но при этом правый отступ крайнего правого элемента будет выступать за границы оболочки:

Так как правый отступ крайнего правого элемента превышает ширину оболочки, по правилам разметки крайний правый блок «уйдет» вниз:

Возникает вопрос: как убрать «лишний» отступ у крайнего правого блока без специального CSS класса, у которого свойство margin-right будет задано 0?

Именно здесь и стоит вспомнить о селекторе :first-child, и инвертировать правые отступы на левые. Таким образом, чтобы у первого блока отступ слева был нулевым. Напрашивается вопрос: зачем инвертировать? Все дело в том, что в IE7|8 поддержка :first-child добавлена, а :last-child нет. Экономят?

Итак, давайте посмотрим на CSS код решения. Сперва определим оболочку:

#wrapper {
    width:320px;
    height:60px;
    background:#EFEFEF;
}

Теперь объявим класс содержимого оболочки .section:

.section {
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}

В примере используются фиксированные значения свойств width и margin-left. Вы на свое усмотрение можете использовать и процентные отношения.

Теперь нам надо убрать отступ слева у первого блока, делается это так:
#wrapper div:first-child {
margin-left:0px;
}

CSS, XHTML / Теги: позиционирование, хак, верстка / 28.11.09 / Оставить комментарий [0]

Ошибки IE6 или опять о кроссбраузерности #

Что это "великий" и "могучий" бразуер я писать опять не буду, просто приведу некоторые ошибки ИЕ и варианты фикса:

В основном все используют для создания навигационного меню списки. А если нужно сделать меню горизонтальным, просто ставят float:left на ссылки внутри списка. Смотрим код:

html

css

ul {
    list-style: none;
}

ul li a {
        display: block;
        width: 130px;
        height: 30px;
        text-align: center;
        color: #fff;
        float: left;
        background: #95CFEF;
        border: solid 1px #36F;
        margin: 30px 5px;
}

Вот, что мы увидим в нормальных браузерах:

Ошибки IE6 или опять о кроссбраузерности

а вот, что в IE6:

не правда ли чудесно? :)
Эффект возможно и красивый, но абсолютно нам не нужный. Чтоб заставить IE6 отобразить меню так как мы это задумали нам нужно чуть поправить наш css код следующим образом:

ul li {
float: left;
}

После такого веского аргумента даже шестой ослик не устоит и будет отображать меню так как нужно.

Двойной margin у элемента при обтекании.

#element{
        background: #95CFEF;
        width: 300px;
        height: 100px;
        float: left;
        margin: 30px 0 0 30px;
        border: solid 1px #36F;
}

В нормальных браузерах:

В IE:

Фикс:

#element{
        background: #95CFEF;
        width: 300px;
        height: 100px;
        float: left;
        margin: 30px 0 0 30px;
        border: solid 1px #36F;
        display: inline;
}

Отступы между элементами списка

html

Link 1

Link 2

Link 3

css

ul {
        margin:0;
        padding:0;
        list-style:none;
}

li a {
        background: #95CFEF;
        display: block;
}

Нормальные браузеры:

IE6:

Решение 1:
css

li a {
        background: #95CFEF;
        display: block;
        width: 200px;
}

Решение 2:
css:

li a {
        background: #95CFEF;
        float: left;
        clear: left;
}

CSS, XHTML / Теги: хак, ИЕ, IE / 22.11.09 / Оставить комментарий [0]

Картинка в стороне от текста без обтекания #

К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:

Heading

text tex text text text text

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

Итак первое и очевидное сделать float:left; картинке, но тогда появится обтекание. Если бы знать размеры картинок - можно бы было задать ширину для выдержки и заголовка. Но в том то и дело что картинки эти могут быть любыми. Казалось бы без таблиц не обойтись, а не тут то было, можно:

div.post p{
display: table;
_height: 0;/*это для ИЕ5-6*/
zoom: 1;/*это для ИЕ7*/
}

Эта приблуда должна работать в Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win

CSS, XHTML / Теги: table, css, novalid, хак / 17.11.09 / Оставить комментарий [0]

Повернутый текст под любым углом без JS и флеш #

Приступим. Для начала нам нужен блок:
css:

.vertical { overflow:hidden; line-height:30px; position:relative; white-space:nowrap; width:30px; height:200px; border:1px solid #999; }

html:

Для современных браузеров будем использовать svg:

css:

.vertical object { width:30px; height:200px; display:block; } - задаем ширину равную высоте и высоту равную ширине обрамляющего блока.

html:

— x='-200' - координата начала строки текста от верхней стороны object, y='18' - координата базовой линии строки текста от левой стороны object,
font-family='Arial' font-size='12' - размер, гарнитура шрифта,
fill='#000000' - цвет текста,
transform='rotate(-90)' - поворачиваем текст на -90 градусов. мы можем повернуть текст на любой угол
Для IE всех версий:

Так как IE даже 8-й версии не поддерживает svg(разработчики сказали что у них и так было много работы), будем использовать специфические свойства:
writing-mode:tb-rl; — текст размещаем вертикально сверху вниз и справа налево
filter:flipv() fliph(); — отражаем по горизонтали и вертикали.
css:

.vertical object { display:none; } - скрываем svg.
.vertical span { filter:flipv() fliph(); writing-mode:tb-rl; display:block; position:absolute; left:0; bottom:0; height:200px; width:30px; }

html:

вертикальный текст

Для текста под углом css выглядит так:

.vertical3 span { top:-8px; left:-31px; width:200px; writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod=«auto expand»); }

top, left — эмпирические значения. находятся экспериментально.
M11 = cos(угла в градусах)
M12 = -sin(угла в градусах)
M21 = sin(угла в градусах)
M22 = cos(угла в градусах)
Отрицательные значения не берем! если нам надо повернуть на -45 градусов то значения тригонометрических функций берем от угла 315 градусов.

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

Блог » Заметки / Теги: текс, градус, поворот, хак / 04.09.09 / Оставить комментарий [2]

СОЗДАНИЕ САЙТОВ | Разработка сайтов - Veselov.sumy.ua

Число тегов в облаке DLE #

Все страницы внизу новостей в DataLife #

Позиционирование блоков горизонтально #

Ошибки IE6 или опять о кроссбраузерности #

Картинка в стороне от текста без обтекания #

Heading

Повернутый текст под любым углом без JS и флеш #

Про Меня

Интересы

Услуги