ФорумРазработкаКлиентская сторонаВерстка и оформление → Killich's Верстко Hacks

Killich's Верстко Hacks

  • killich

    Сообщения: 270 Репутация: N Группа: Адекваты

    Spritz 18 марта 2009 г. 9:18

    Илья Зайко Зыкин постит свои любимые верстко хаки:

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

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

    1.Всегда использовать reset.css

    РЕСЕТ - сбрасывает все стандартные CSS всех браузеров и помогает наблюдать более адекваватное поведение элементов.
    Первое с чего начинает проф верстальщик - вставляет в CSS ресет.

    Короче - смотрите внутринности например Opera.com - там оно есть.
    Там вообще очень хорошо поучиться и фиксов много можно найти под ослы


    /* reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
    address, big, cite, code, del, dfn, em, font, img, ins, kbd,
    q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
    center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
    caption, tbody, tfoot, thead, tr, th, td
    { margin:0; padding:0; border:0; outline:0; font-size: 100.01%; vertical-align:baseline; background:transparent; font-weight:normal; line-height:100%; }
    ol, ul        { list-style:none; }
    table, tr, td { vertical-align:top; border-collapse: collapse; border-spacing: 0; }
    a             { text-decoration: underline; color:#30306A;}
    a:hover       { text-decoration: none; }
    p             { margin:0 0 35px 0; line-height:180%; font-size:10pt; }
    .nobr{white-space:nowrap;}
    /* reset */


    2.Использовать iepngfix.htc
    для IE6 - показывает пнгэхи в осле6
    Искать тут


    Ищите в гугле - абсолютно незаменимая вещь!
    // IE5.5+ PNG Alpha Fix v2.0 Alpha 2
    // © 2004-2008 Angus Turnbull http://www.twinhelix.com



    3. использовать csshover3.htc
    для IE6 - позволяет применять :hover для дивов

    Ищите в гугле - абсолютно незаменимая вещь!
    При наведении на слой позволяет к нему применять псевдокласс :hover как у ссылки



    4.
    Всегда юзать для блоков, дочки которых имеют float

     overflow:hidden;
     zoom:1;


    Если внутри блока находятся блоки со свойством float, то родтельский блок не растягивается под высоту дочерних (даже можно сказать не натягивается на них - эта тема лечит это поведение)
    решает абсолютное кол-во проблем ослов!
    Однако есть одно ограничение, вы не сможете использовать абсолютное позиционирование выходящее за рамки блока с определением - overflow:hidden; что вполне понятно - блок просто не будет отображаться, т.к. фактически находится вне зоны отображения содержимого блока. Короче - чем объяснять - легче попробовать.


    ХАКИ

    видит только опера

    /* Jast Opera */
    html:first-child .afisha .right ul.event_list li{
    background:#F00;
    }


    видит только сафарь

    /*safari only*/
    html:root* .main .left{width:556px;}



    Вообще хороший список хаков под конкретный браузер тут

    http://higher.com.ua/article/111/poleznye-css-khaki



    Эмуляция псевдоклассов - первый элемент, последний элемент для осла 6
    например, нужно сделать список у которого все <li> имеют сверху и снижу рамку, а только верхний и нижней элементы списка этих рамок не имеют.

    Во всех нормальных браузерах есть псевдоклассы - первый и последний элемент. У ослов такого нет - нужно в CSS внедрять expression, т.е. JS код, который определяет есть ли предыдущий/последующий элемент списка и соответственно генерит нужный стиль


    ul li{
       padding:10px 0 0 0;
       border-top:1px solid #FFF;
       border-bottom:1px solid #dcdcdc;

       border-top: expression(this.previousSibling == null ? '0' : '1px solid #FFF');
       border-bottom: expression(this.nextSibling == null ? '0' : '1px solid #dcdcdc');
     
       padding-top: expression(this.previousSibling == null ? '0' : '10px');
       padding-bottom: expression(this.nextSibling == null ? '10px' : '0');
    }
    ul li:first-child{
       padding:0;
       border-top:none;
    }
    ul li:last-child{
       padding-bottom:10px;
       border-bottom:none;
    }








    Та же дрянь с псевдоклассами
    :before
    :after

    с их помощью можно принудительно в конец и начало списка принудительно подставлять некоторый контент. Иногда это бывает полезно. Например с картинками откр/закр кавычек в блоках с цитированием.
    Что б автоматом подставлять кавычки на уровне CSS есть псевдоклассы :after, :before
    Но не работает в Осле. Значит! Лечим осел!

    Например подстановка каких то элементов перед и после списка.
    Самый неверояный да еще и оптимизированный экспрешн который мне на данный момент попадался


    E: expression(this.yes ? '' : (this.yes = true, this.parentNode.innerHTML = 'ЛЮБОЙ КОНТЕНТ ПЕРЕД' + this.parentNode.innerHTML + 'ЛЮБОЙ КОНТЕНТ ПОСЛЕ'));

    _________________________________


    Эмуляция выравнивания по вертикали внутри блока для гребаных ослов
    Если хочешь картинки разной высоты позиционировать в некотором блоке и всегда по середине - самое простое обернуть картинку в inline элемент, например p. Сделать line-height у <p> равным высоте блока, и задать выравнивание строчного элемента vertical-align:middle;

    Но Осел - он и есть Осел. Какой бы версии он ни был. Лечим с помощью выражения, которое определяет высоту родителя и смещает <p> так что бы она была посередине блока!


    p{
    line-height:240px;
    vertical-align:middle;
    margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? '0' : (parentNode.offsetHeight - this.offsetHeight)/2 + 'px');
    }


    ____________________________________________

    Как сделать блок тянущимся до определенного момента?
    А вот так!

    Очередная эмуляция для Ослов


    .body{
    min-width: 990px;
    max-width: 1300px;
    -width: expression(document.documentElement.clientWidth > 1280? "1280px": document.documentElement.clientWidth < 990? "990px": "auto");
    }

    ______________________________________________




    Position FIXED Практика и решение

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

    Задача решается очень просто - в CSS есть свойство position: fixed;
    Однако в IE это свойство не работает.
    Следовательно для него необходимо свойство, которое понять может только IE а все прочие будут игнорировать.

    Определяем:

    <div class="fixme">
       содержимое блока
    </div>



    .fixme { position: absolute; left: 33%; top: 30%; }
    div.fixme {
    z-index: 1000;
    -top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + 'px' );
    }
    body > div.fixme { position: fixed; top: 30%; left: 33%; }



    Начала Браузер видит определение


    .fixme { position: absolute; left: 33%; top: 30%;  }


    После этого переходит к следующему определению


    -top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) +


    Это определение может увидит только IE 6 (именно для этого здесь стоит знак - перед определением top)
    Если его убрать, то все браузеры будут отображать блок нормально, а IE 7 будет тупить, т.к. он понимает и expression и top.

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


    body > div.fixme { position: fixed; top: 30%; left: 33%; }



    только IE его не увидит.

    Так мы получаем блок в указанном месте сайта.


    /* FIXED PATCH */
    .fixme { position: absolute; left: 33%; top: 30%;  }
    div.fixme {
    border: 7px solid #CCC;
    background: #ECEEED;
    z-index: 1000;
    width: 400px;
    color: #000;
    -top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + 'px' );
    }
    body > div.fixme { position: fixed; top: 30%; left: 33%; }
    /* FIXED PATCH */

    ________________________________________________

    Почти адекватная эмуляция табличных структур в дивах. Есть небольшие ограничения


    /* tab emulation */
    .tbl{
    width: 100%;
    display: table;
    }
    .contentbody{ display: table-row; }
    .column{
    display: table-cell;
    vertical-align: top;
    }
    .column,{
    display: inline;
    vertical-align: top;
    zoom: 1;
    }
    /* tab emulation */



    <div class="contacts"><!– contacts –>
    <div class="tbl">
    <div class="contentbody">
    <div class="column left">

    </div><!– column left –>
    <div class="column right">

    </div><!– column right –>
    </div><!– contentbody –>
    </div><!– tbl –>
    </div><!– contacts –>


    __________________________________________________________________


    Охеренный баг Ослов с SELECT элементами которые не имеют z-index

    если сверху выводим блок, то селекты как кишки торчат на экране и никогда ничем не перекрываются

    Лечится вставкой условного комментария для IE с элементом iframe
    который должен полностью совпадать по размерам с всплывающим блоком, абсолютно позиционирован к нему и иметь следующее определение:


    .fixme iframe {
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:400px;
    height:100px;
    }


    только iframe c фильтром filter:mask(); способен перекрыть селекты

    Рубист с большой буквы Г. Серый кардинал кулинарного блога open-cook.ru
  • phpdude

    Сообщения: 26632 Репутация: N Группа: в ухо

    Spritz 18 марта 2009 г. 9:40, спустя 21 минуту 36 секунд

    полезно
    Сапожник без сапог
  • adw0rd

    Сообщения: 22908 Репутация: N Группа: в ухо

    Spritz 18 марта 2009 г. 10:45, спустя 1 час 4 минуты 41 секунду

    Жесть… много букав, думаю есть что-то полезное для искателей хаков, однако надо оформить лучше… иначе просто каша.
    adw/0
  • killich

    Сообщения: 270 Репутация: N Группа: Адекваты

    Spritz 18 марта 2009 г. 16:23, спустя 5 часов 38 минут 26 секунд

    полезно? епр!

    да проф верстальщики мне памятник поставят при жизни >;0)

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

    С уважением к Пыхо братству!
    Рубист с большой буквы Г. Серый кардинал кулинарного блога open-cook.ru
  • adw0rd

    Сообщения: 22908 Репутация: N Группа: в ухо

    Spritz 18 марта 2009 г. 16:52, спустя 28 минут 34 секунды

    killich, покажи как верстаешь ;) Нужно макетов 100-150 сверстать… для соц. сети, а Тимур занят :(
    adw/0
  • AlexB

    Сообщения: 4292 Репутация: N Группа: в ухо

    Spritz 18 марта 2009 г. 17:11, спустя 19 минут 18 секунд

    killich, очень полезно, спасибо. Ткну носом своего верстальщика …

    Я бы не сказал что каша. Все понятно! Но если бы поподробней описал и оформил в виде статьи, то вообще цены бы не было.
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 18 марта 2009 г. 18:14, спустя 1 час 2 минуты 35 секунд

    Прикрепил тему.
  • adw0rd

    Сообщения: 22908 Репутация: N Группа: в ухо

    Spritz 19 марта 2009 г. 2:05, спустя 7 часов 51 минуту 14 секунд

    AlexB, мой пост должен был появится сразу после ТС, однако я не нажал сабмит, поэтому даже позже дуда… Тем не менее,
    « Последнее редактирование: Вчера в 11:28:16 pm от killich

    Килл поправил пост свой, поэтому он уже не такой и кашевидный :)
    adw/0
  • killich

    Сообщения: 270 Репутация: N Группа: Адекваты

    Spritz 18 ноября 2010 г. 8:10, спустя 609 дней 7 часов 4 минуты

    >killich, покажи как верстаешь ;) Нужно макетов 100-150 сверстать… для соц. сети, а Тимур занят :(
    Когда есть полный комплект макетов и время - верстаю довольно неплохо

    Студия где я работаю щас свою социалку запускает.
    Косяком множество каэшно, но мы никогда ничем подобным не занимались - это экспериментальная авантюра скорее >;0)

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

    PS:

    adw0rd, парни  - в понедельник запуск первой беты будет, если найдете время и кому не в лом - прохакайте нас
    Будем очень признательны

    Рубист с большой буквы Г. Серый кардинал кулинарного блога open-cook.ru
  • phpdude

    Сообщения: 26632 Репутация: N Группа: в ухо

    Spritz 18 ноября 2010 г. 8:24, спустя 14 минут 11 секунд

    /images/deadline/soon.jpg

    сделали бы уж на яваскрипте) а то не веб2нольно
    Сапожник без сапог
  • Lirck

    Сообщения: 1658 Репутация: N Группа: Джедаи

    Spritz 21 марта 2009 г. 7:53, спустя 22 часа 29 минут

    да точн
  • Trej Gun

    Сообщения: 5299 Репутация: N Группа: в ухо

    Spritz 21 марта 2009 г. 9:20, спустя 1 час 27 минут 10 секунд

    ну давайте по порядку
    первое это немного измененный css framework 'elements'
    http://elements.projectdesigns.org/download.html


    второе старинный баян
    http://www.twinhelix.com/css/iepngfix/

    подключаеться так
    img {
    behavior: url('iepngfix.htc');
    }


    третье тоже баян
    http://blog.erlang.com.ru/files/help/csshover3.htc


    а хаков ваще полный интернет
  • adw0rd

    Сообщения: 22908 Репутация: N Группа: в ухо

    Spritz 4 февраля 2010 г. 5:39, спустя 319 дней 21 час 18 минут

    Блин, не могу я этот iepngfix заюзать… у меня явно руки кривые…
    помогите, если можете http://kinsburg.ru/
    adw/0
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 февраля 2010 г. 7:03, спустя 1 час 23 минуты 51 секунду


    Блин, не могу я этот iepngfix заюзать… у меня явно руки кривые…
    помогите, если можете http://kinsburg.ru/
    а что именно? Просто у меня тоже были проблемы… :)
    Вообще все пнгшки не отображаются? Или те который заданы для background?Или которые прописаны в img?
  • soul

    Сообщения: 790 Репутация: N Группа: Кто попало

    Spritz 4 февраля 2010 г. 7:12, спустя 9 минут 39 секунд



    да проф верстальщики мне памятник поставят при жизни >;0)



    проф верстальщики это всё уже знают.
    кстати, я не проф, но знаю

Пожалуйста, авторизуйтесь, чтобы написать комментарий!