|
Название: Killich's Верстко Hacks Отправлено: killich от 18 Март, 2009, 04:18:55 Илья Зайко Зыкин постит свои любимые верстко хаки:
Ничего никому пояснять не буду. Поверьте - кому надо - тот поймет: (да родные пыхо-братья - можете ох$еть от моего альтруизма и доброты, такого хер где найдете в одном месте) Данный пост создаю для себя - где запостю все те хаки верстки с которыми приходилось столкнуться. Если буду далеко от рабочего места - всегда смогу найти тут - да и вам глядишь пригодится 1.Всегда использовать reset.css РЕСЕТ - сбрасывает все стандартные CSS всех браузеров и помогает наблюдать более адекваватное поведение элементов. Первое с чего начинает проф верстальщик - вставляет в CSS ресет. Короче - смотрите внутринности например Opera.com - там оно есть. Там вообще очень хорошо поучиться и фиксов много можно найти под ослы Text /* 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 Искать тут Text Ищите в гугле - абсолютно незаменимая вещь! // IE5.5+ PNG Alpha Fix v2.0 Alpha 2 // (c) 2004-2008 Angus Turnbull http://www.twinhelix.com 3. использовать csshover3.htc для IE6 - позволяет применять :hover для дивов Text Ищите в гугле - абсолютно незаменимая вещь! При наведении на слой позволяет к нему применять псевдокласс :hover как у ссылки 4. Всегда юзать для блоков, дочки которых имеют float Text overflow:hidden; zoom:1; Если внутри блока находятся блоки со свойством float, то родтельский блок не растягивается под высоту дочерних (даже можно сказать не натягивается на них - эта тема лечит это поведение) решает абсолютное кол-во проблем ослов! Однако есть одно ограничение, вы не сможете использовать абсолютное позиционирование выходящее за рамки блока с определением - overflow:hidden; что вполне понятно - блок просто не будет отображаться, т.к. фактически находится вне зоны отображения содержимого блока. Короче - чем объяснять - легче попробовать. ХАКИ видит только опера Text /* Jast Opera */ html:first-child .afisha .right ul.event_list li{ background:#F00; } видит только сафарь Text /*safari only*/ html:root* .main .left{width:556px;} Вообще хороший список хаков под конкретный браузер тут Text http://higher.com.ua/article/111/poleznye-css-khaki Эмуляция псевдоклассов - первый элемент, последний элемент для осла 6 например, нужно сделать список у которого все <li> имеют сверху и снижу рамку, а только верхний и нижней элементы списка этих рамок не имеют. Во всех нормальных браузерах есть псевдоклассы - первый и последний элемент. У ослов такого нет - нужно в CSS внедрять expression, т.е. JS код, который определяет есть ли предыдущий/последующий элемент списка и соответственно генерит нужный стиль Text 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 Но не работает в Осле. Значит! Лечим осел! Например подстановка каких то элементов перед и после списка. Самый неверояный да еще и оптимизированный экспрешн который мне на данный момент попадался Text E: expression(this.yes ? '' : (this.yes = true, this.parentNode.innerHTML = 'ЛЮБОЙ КОНТЕНТ ПЕРЕД' + this.parentNode.innerHTML + 'ЛЮБОЙ КОНТЕНТ ПОСЛЕ')); Эмуляция выравнивания по вертикали внутри блока для гребаных ослов Если хочешь картинки разной высоты позиционировать в некотором блоке и всегда по середине - самое простое обернуть картинку в inline элемент, например p. Сделать line-height у <p> равным высоте блока, и задать выравнивание строчного элемента vertical-align:middle; Но Осел - он и есть Осел. Какой бы версии он ни был. Лечим с помощью выражения, которое определяет высоту родителя и смещает <p> так что бы она была посередине блока! Text p{ line-height:240px; vertical-align:middle; margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? '0' : (parentNode.offsetHeight - this.offsetHeight)/2 + 'px'); } ____________________________________________ Как сделать блок тянущимся до определенного момента? А вот так! Очередная эмуляция для Ослов Text .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 а все прочие будут игнорировать. Определяем: Text <div class="fixme"> содержимое блока </div> Text .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%; } Начала Браузер видит определение Text .fixme { position: absolute; left: 33%; top: 30%; } После этого переходит к следующему определению Text -top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + Это определение может увидит только IE 6 (именно для этого здесь стоит знак - перед определением top) Если его убрать, то все браузеры будут отображать блок нормально, а IE 7 будет тупить, т.к. он понимает и expression и top. во всех остальных браузерах будет выполняться определение Text body > div.fixme { position: fixed; top: 30%; left: 33%; } только IE его не увидит. Так мы получаем блок в указанном месте сайта. Text /* 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 */ Почти адекватная эмуляция табличных структур в дивах. Есть небольшие ограничения Text /* 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 */ Text <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 который должен полностью совпадать по размерам с всплывающим блоком, абсолютно позиционирован к нему и иметь следующее определение: Text .fixme iframe { position:absolute; top:0; left:0; z-index:-1; filter:mask(); width:400px; height:100px; } только iframe c фильтром filter:mask(); способен перекрыть селекты Название: Killich's Верстко Hacks Отправлено: phpdude от 18 Март, 2009, 04:40:31 полезно
Название: Killich's Верстко Hacks Отправлено: adw0rd от 18 Март, 2009, 05:45:12 Жесть... много букав, думаю есть что-то полезное для искателей хаков, однако надо оформить лучше... иначе просто каша.
Название: Killich's Верстко Hacks Отправлено: killich от 18 Март, 2009, 11:23:38 полезно? епр!
да проф верстальщики мне памятник поставят при жизни >;0) кстати - я стал очень здорово верстать. если буде халтурка то могу поучавствовать. на пыхе почти не пишу, все на рельсах рубиновых теперь, но если проект будет на cake php могу рассмотреть предложение С уважением к Пыхо братству! Название: Killich's Верстко Hacks Отправлено: adw0rd от 18 Март, 2009, 11:52:12 killich, покажи как верстаешь ;) Нужно макетов 100-150 сверстать... для соц. сети, а Тимур занят :(
Название: Killich's Верстко Hacks Отправлено: AlexB от 19 Март, 2009, 12:11:30 killich, очень полезно, спасибо. Ткну носом своего верстальщика ...
Я бы не сказал что каша. Все понятно! Но если бы поподробней описал и оформил в виде статьи, то вообще цены бы не было. Название: Killich's Верстко Hacks Отправлено: Timur от 19 Март, 2009, 01:14:05 Прикрепил тему.
Название: Killich's Верстко Hacks Отправлено: adw0rd от 19 Март, 2009, 09:05:19 AlexB, мой пост должен был появится сразу после ТС, однако я не нажал сабмит, поэтому даже позже дуда... Тем не менее,
« Последнее редактирование: Вчера в 11:28:16 pm от killichКилл поправил пост свой, поэтому он уже не такой и кашевидный :) Название: Killich's Верстко Hacks Отправлено: killich от 18 Ноябрь, 2010, 04:10:02 >killich, покажи как верстаешь ;) Нужно макетов 100-150 сверстать... для соц. сети, а Тимур занят :(
Когда есть полный комплект макетов и время - верстаю довольно неплохо Студия где я работаю щас свою социалку запускает. Косяком множество каэшно, но мы никогда ничем подобным не занимались - это экспериментальная авантюра скорее >;0) недельки две надо - когда первые юзвери прохакают систему как следует - мы чуть придем в себя после запуска - тогда можно и обсудить - щас времени ваапще нема. А там можно и обсудить. помогу с радостью, если смогу PS: adw0rd, парни - в понедельник запуск первой беты будет, если найдете время и кому не в лом - прохакайте нас Будем очень признательны Название: Killich's Верстко Hacks Отправлено: phpdude от 18 Ноябрь, 2010, 04:24:13 /images/deadline/soon.jpg
сделали бы уж на яваскрипте) а то не веб2нольно Название: Killich's Верстко Hacks Отправлено: aivee от 21 Март, 2009, 02:53:13 да точн
Название: Killich's Верстко Hacks Отправлено: CTAPbIu_MABP от 21 Март, 2009, 04:20:23 ну давайте по порядку
первое это немного измененный css framework 'elements' http://elements.projectdesigns.org/download.html второе старинный баян http://www.twinhelix.com/css/iepngfix/ подключаеться так Text img {behavior: url('iepngfix.htc'); } третье тоже баян http://blog.erlang.com.ru/files/help/csshover3.htc а хаков ваще полный интернет Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 01:39:16 Блин, не могу я этот iepngfix заюзать... у меня явно руки кривые...
помогите, если можете http://kinsburg.ru/ Название: Killich's Верстко Hacks Отправлено: mario от 04 Февраль, 2010, 03:03:07 а что именно? Просто у меня тоже были проблемы... :) Вообще все пнгшки не отображаются? Или те который заданы для background?Или которые прописаны в img? Название: Killich's Верстко Hacks Отправлено: soulgarden от 04 Февраль, 2010, 03:12:46
проф верстальщики это всё уже знают. кстати, я не проф, но знаю Название: Killich's Верстко Hacks Отправлено: CTAPbIu_MABP от 04 Февраль, 2010, 03:50:17 Название: Killich's Верстко Hacks Отправлено: welder от 04 Февраль, 2010, 04:18:17 наркоманил
Название: Killich's Верстко Hacks Отправлено: md5 от 04 Февраль, 2010, 04:06:51 я щас делаю рефакторинг своего проекта одного - на отсутствие альфаканала в ИЕ6 забил хуй!
Спустя 53 секунды добавил у меня просто из пары тысяч посетителей ие6 = 40-50 штук
а если сильно хочется ублажить — для ие6 пропиши ГИФы и все Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 04:20:18 mario, там есть div.stars у него есть background, вот там то и png
Спустя 2 минуты 41 секунду добавил
ну начнем с того, что звезды в пнг ты мне рисовал если ты можешь их переделать в gif, я буду очень благодарен... у меня просто не вышло... уебанско все выглядило :/ Название: Killich's Верстко Hacks Отправлено: mario от 04 Февраль, 2010, 05:39:55 дай эти звезды то :) Спустя 1 минуту 41 секунду добавил сори че так долго инет обрубали гады :(Название: Killich's Верстко Hacks Отправлено: md5 от 04 Февраль, 2010, 06:22:53 adw0rd, а, ты про звезды...
бля, ну и пусть будет уебанско, для пользователей ие6 же... Название: Killich's Верстко Hacks Отправлено: phpdude от 04 Февраль, 2010, 06:28:05 для них можно вместо логотипа - фотку хуя сделать =)) Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 06:47:08 http://pchelpforum.ru/f27/t17555/ нас тут с The pirate bay сравнили )
Название: Killich's Верстко Hacks Отправлено: NRG от 04 Февраль, 2010, 06:52:12
http://kinsburg.ru/? Название: Killich's Верстко Hacks Отправлено: md5 от 04 Февраль, 2010, 06:54:37 хыыы)) Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 07:09:11 NRG, никто дизайн не драл, мы у них только торренты агрегируем... а диз у них гавно
Название: Killich's Верстко Hacks Отправлено: CTAPbIu_MABP от 04 Февраль, 2010, 07:21:05 adw0rd, как скришоты делаешь?
Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 07:30:43 Какие? Где?
Название: Killich's Верстко Hacks Отправлено: mario от 04 Февраль, 2010, 08:13:03 парсит с торентс.ру, кинокопилки :) Название: Killich's Верстко Hacks Отправлено: CTAPbIu_MABP от 04 Февраль, 2010, 08:15:30 mario, пасиб
Название: Killich's Верстко Hacks Отправлено: mario от 04 Февраль, 2010, 08:18:55 Оо за что? :))) Название: Killich's Верстко Hacks Отправлено: CTAPbIu_MABP от 04 Февраль, 2010, 10:50:43 за ответ
Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 11:07:52 с кинокопилки, кинопоиска, virtualdub
Название: Killich's Верстко Hacks Отправлено: Sinkler от 04 Февраль, 2010, 11:40:21 .
Название: Killich's Верстко Hacks Отправлено: adw0rd от 04 Февраль, 2010, 11:44:33 Sinkler, баян )
Спустя 17 секунд добавил http://www.ginsburg.ru/Название: Killich's Верстко Hacks Отправлено: Sinkler от 04 Февраль, 2010, 11:46:16 вот блять =) у нас эта коробка уже давноооо стоит в продаже... Название: Killich's Верстко Hacks Отправлено: adw0rd от 05 Февраль, 2010, 01:57:55 Тимур решил проблему, без всяких iepngfix )
Спустя 17 секунд добавил Всем спасибо, особенно Тимуру и МариоНазвание: Killich's Верстко Hacks Отправлено: mario от 05 Февраль, 2010, 01:59:44 ??? Как? :))) Спустя 1 минуту 5 секунд добавил о спасибо за плюсик :)Название: Killich's Верстко Hacks Отправлено: adw0rd от 05 Февраль, 2010, 02:10:47 Название: Killich's Верстко Hacks Отправлено: mario от 05 Февраль, 2010, 02:12:53 CSS /** update: fix rating in IE6 */ *html div.rating div.stars { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/css/images/stars.png', sizingMethod='crop'); overflow:hidden; } @author Timur Название: Killich's Верстко Hacks Отправлено: phpdude от 05 Февраль, 2010, 12:15:53 если глянешь исходники пнгфикса, то там увидишь что есть только регулярки, которые из <img src="....png" делают <img src='blank.if' style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/css/images/stars.png', sizingMethod='crop');" :) тимур просто руками это сделал. тоже пару раз пригождаллось руками это делать ... :) Название: Killich's Верстко Hacks Отправлено: mario от 05 Февраль, 2010, 12:36:48 никогда не заглядывался туда :) я и пнг фикс юзал два раза всего то :) Название: Killich's Верстко Hacks Отправлено: ukroficer от 15 Август, 2010, 10:58:11 4.
Всегда юзать для блоков, дочки которых имеют float Код: Text overflow:hidden; zoom:1; Если внутри блока находятся блоки со свойством float, то родтельский блок не растягивается под высоту дочерних (даже можно сказать не натягивается на них - эта тема лечит это поведение) решает абсолютное кол-во проблем ослов! Однако есть одно ограничение, вы не сможете использовать абсолютное позиционирование выходящее за рамки блока с определением - overflow:hidden; что вполне понятно - блок просто не будет отображаться, т.к. фактически находится вне зоны отображения содержимого блока. Короче - чем объяснять - легче попробовать ____________________________________________________ еще лечится вот так в div который не ростягиваеться пишем внизу вот такое <div style="clear: both;"></div> работает во всех браузерах нормально.... Название: Killich's Верстко Hacks Отправлено: Troy от 15 Август, 2010, 06:17:44 На авке слоник явно лишний...
|