SelenIT
-
Posts
4,327 -
Joined
-
Last visited
-
Days Won
140
Content Type
Profiles
Forums
Calendar
Store
Everything posted by SelenIT
-
Серый*, со всеми идеалистическими представлениями W3C начала века есть одна общая беда: поддержка браузерами (прежде всего линейкой IE, хотя FF2- и Opera8- тоже были "не ангелы"). SVG, например, пока (до ожидаемой 9-й версии) вообще не подерживается IE (по крайней мере, без спецплагинов или скриптов, преобразующих SVG в его IEшный аналог - VML, с потерей части форматирования). Поддержка object в IE тоже порядком поломана (не работают вложенные объекты, в IE6 при вставке в object HTML-страницы для нее строилась неполная DOM и т.д.). Всё это привело к тому, что многие разработчики разочаровались в "единственно верном светлом XML-будущем" и стали разрабатывать свой параллельный стандарт, узаконивший то, что работает (не только img, но и embed с iframe). Сейчас этот разрабатываемый стандарт называется HTML5 и считается очень перспективным. Так что информацию из восторженных статей начала 2000-х, предвещавших тупик HTML и скорую XMLизацию всего и вся, сегодня нужно воспринимать критичнее. Хотя SVG - штука действительно весьма удобная для градиентов, графиков и схем, простых иконок и логотипов и т.п. (т.е. кандидат на частичную замену gif/png, особенно для полностью "резиновых" дизайнов). А вот фотографии перегонять в вектор незачем, поэтому jpeg еще долго будет актуален...
-
Имхо, на примере нагляднее: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> /* красит каждого третьего потомка dl, независимо от типа */ dl>*:nth-child(3n+1) { color: red; } /* жирнит каждый третий dt и каждый третий dd отдельно */ dl>*:nth-of-type(3n+1) { font-weight: bold; } </style> </head> <body> <dl> <dt>Бесконечный цикл</dt> <dd>См. "бесконечный цикл"</dd> <dt>Рекурсия</dt> <dd>Способ общего определения объекта или действия через себя, с использованием ранее заданных частных определений. См. "рекурсия"</dd> <dt>CSS</dt> <dd>Каскадные таблицы стилей</dd> <dt>CSS3</dt> <dd>Собирательное название модулей CSS так называемого 3-го уровня. Разрабатываются независимо и в разном темпе.</dd> <dt>CSS Selectors level 3</dt> <dd>Один из <a href="http://www.w3.org/TR/css3-selectors/">модулей CSS</a>, описывающий селекторы.</dd> <dt>:nth-child</dt> <dd>Селектор выбора каждого n-го потомка</dd> <dt>:nth-of-type</dt> <dd>Селектор выбора каждого n-го однотипного потомка</dd> </dl> </body> </html>
-
Блочная верстка. Выравниваем список по ширине.
SelenIT replied to Great Rash's topic in Tricks and solutions
Обалдеть! Я был уверен, что IE-шный (ниже 8-го) "шибко умный" парсинг списков (съедающий пробелы между LI и переносящий их внутрь) ничем не пробить, а поди ж ты - "комбо" из text-justify: newspaper и hasLayout-а для UL совершают чудо и "принуждают его к сотрудничеству". Мегареспект и гиперуважуха! Если не секрет, как удалось узнать об этих магических нестандартных свойствах? И еще пара-тройка вопросов: 1) Что дает text-justify: newspaper; для не-IE7-? 2) Зачем понадобилось вырубать хелпер и добавлять правило для последней строки (text-align-last) для IE7-, не проще ли оставить хелпера на своем месте и обойтись магией одного лишь text-justify (я наскоро проверил в IE7/WinXP - вроде работает)? 3) Width:99.9% нужен только для включения лейаута (т.е. его можно легко заменить привычным и безопасным zoom:1) или где-то этот один пиксель реально спасает от гориз. скроллинга? -
Я сказал "как минимум" . Ноуты с предустановленной вистой, по моему, еще не редкость... Главное, что "шестерке" это не поможет подняться с нынешних рекордно низких 2 млн. . IE7 еще может напоследок подскочить, но он - уже не такая беда...
-
По опыту прошлых лет, абсолютное кол-во дефолтных браузеров стабильно падает летом (сезон отпусков-каникул у корпоративщиков и "случайных" пользователей) и подскакивает осенью (массовые закупки новых "необжитых" компов к новому учебному году/поре годовых отчетов etc.). Одна надежда, что в этом году новые компы будут идти как минимум с Вистой (кроме нетбуков)...
-
И доктайп не помешает, квирксмод (эмуляция IE5) в 2010-м - решительно не тру
-
Правильно не пустили, отрывать данные от подписей в отдельный документ (ладно б просто в отдельную таблицу, как давным-давно делал неугомонный Стью...) - это варварство какое-то. Чем не угодили стандартные способы растяжки дива по контейнеру (напр. position:absolute + top + bottom) и overflow: auto, на кой в 2010 году фреймы?
-
Если кнопка одна на форме, то как вариант - заменить на <button type="submit">текст</button>, там больше возможностей для стилизации...
-
По идее, должно помочь, если в label вставить span с display:block, и width вместе с text-align'ом задать этому span-у. Проверить сейчас, к сожалению, не могу, т.к. сам давно последовал совету №1 из предыдущего коммента...
-
rash, спасибо! Да, получается, нужно было любым способом "выбить" блок с отступом в отдельный контекст форматирования. Overflow:hidden и hasLayout (любым способом) - подходящие варианты.
-
psywalker, спасибо! "Изоляция" блока с отступом в отдельный контекст (обертку с overflow:hidden) помогла!
-
Наткнулся на занятную пакость в IE7, вот минимальный пример: <!DOCTYPE HTML> <html> <head> <title>Пример</title> <style> p { margin: 0; padding: 0; } div { padding: 2px; } </style> </head> <body> <div style="width: 72%; float: left; background: #fcc;"> <div> <div style="margin-bottom: 40px; width: 90%; background: #ccc;"> <p>Отступ задан только здесь, с последующим блоком никак не связан...</p> </div> </div> <div style="width: 60%; float: left; background: #cfc;"> <div style="width: 90%; background: #fff;"> <p>Откуда же в IE7 берется отступ под этим блоком?</p> </div> </div> <!-- ...а если раскомментить это?;) --> </div> </body> </html> В нормальных браузерах белый блок прижат к нижней рамке. В IE7 под ним, как и сверху, рисуется 40px розового. Если раскрыть коммент или добавить что угодно в нормальном потоке, он прижимается . Но мне нужно найти решение без дополнительного кода... Подскажите, пожалуйста, куда копать?
-
Конечно . Мое предложение относилось к условию
-
Как вариант, можно прибегнуть к "магии" inline-block (см. напр. http://blog.grakhov.com/post/99406348/inline-block). Правда, там есть свои сюрпризы (напр., пробелы между тегами учитываются), но задачу размещения разновысоких блоков в строку оно решает...
-
RedEclipse, вроде же уже разобрались, что href у input-а не работает (поскольку не предусмотрен объектной моделью). А <input type="submit"> всегда отправляет форму, и в результате открывается адрес ее action-а. А "../" работает в соответствии со своим смыслом - это ссылка на родительскую директорию относительно текущей. Чтобы прыгнуть сразу на два уровня вверх, нужен соотв. путь - "../../". Чтобы прыгнуть с любого места в корень сайта, можно использовать "/". Подробнее про относительные ссылки можно посмотреть, например, здесь (первое, что нагуглилось).
-
psywalker, с замечанием согласен, на полную универсальность метода и не претендовал. В основном я хотел показать возможности inline-block и центрирования его с помощью text-align (плюс запрет переноса этих блоков на другую строку). Но чем, все-таки, так уж плохи отрицательные маргины и широкие сплошноцветные бордеры?
-
Увы, задать "в лоб" фиксированный отступ фоновой картинки от правого края в CSS2.1 невозможно. Самое тривиальное решение - добавить эти 250px самой картинке (в виде белого поля справа), в PNG это не сильно скажется на размере файла. Альтернатива посложнее - сделать общую обертку шириной с левую колонку, а сайдбару визуально вынести из него наружу отрицательным маргином (на всю его ширину).
-
Небольшая вариация на тему решения psywalkerа. Насчет красоты не ручаюсь, но может подскажет что-нибудь полезное... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0;} ul{ list-style: none; background: #888; border-top: 75px solid #ccc; border-bottom: 1em solid #ccc; text-align: center; white-space: nowrap; } ul li { display: inline-block; margin-top: -75px; } ul li span { margin: 0; display: block; width: 55px; height: 55px; border: 10px solid #ccc; } ul li a { display:block; margin: 0; text-align: center; padding: 4px; color: #fff; background: #888; border-left: 1px solid #ccc; text-decoration: none; } ul li:first-child a { border: none; } ul li a:hover { background: transparent; } *+html ul li { /* IE7 */ display: inline; min-height: 1px; } * html ul li { /* IE6 (optional) */ display: inline; height: 1px; } </style> <title>Документ без названия</title> </head> <body> <p>Контент до менюшки</p> <ul> <li style="background: red"><span></span><a href="#">Ссылка</a> </li><li style="background: yellow"><span></span><a href="#">Ссылка</a> </li><li style="background: green"><span></span><a href="#">Ссылка</a> </li><li style="background: orange"><span></span><a href="#">Ссылка</a> </li><li style="background: lime"><span></span><a href="#">Ссылка</a> </li><li style="background: maroon"><span></span><a href="#">Ссылка</a> </li><li style="background: black"><span></span><a href="#">Ссылка</a> </li><li style="background: teal"><span></span><a href="#">Ссылка</a> </li><li style="background: orangered"><span></span><a href="#">Ссылка</a></li> </ul> <p>Контент после менюшки</p> </body> </html>
-
Ее не видно. Но она есть ul#cssmenu img { border: 0; }должно решить проблему
-
Рисунок с float не растягивает div по вертикали
SelenIT replied to Blockhead's question in HTML Coding
Хотел сказать, что с не столь далеких времен свойство zoom больше не IE-only. Насчет Оперы, правда, комментатор по ссылке, похоже, приукрасил (по крайней мере, в 10.52 под Убунтой не работает), но в 5-м Хроме работает стабильно. Так что в редких случаях, имхо, можно пользоваться свойством по прямому назначению (напр. в JS-эффектах а-ля FishEye), но при использовании ради побочных эффектов надо уже держать ухо востро (zoom:1, конечно, теоретически ни на что влиять не должен, но кто знает...). -
Рисунок с float не растягивает div по вертикали
SelenIT replied to Blockhead's question in HTML Coding
Невалидно-нешмалидно, однако... -
Это не ОК, это Quirks mode (режим совместимости с глюками браузеров 90-х). 100% от чего? По стандарту CSS, высота наследуется не от auto, а только от явно заданного значения. Чтобы подхватить высоту окна, нужна строчка html, body { height: 100%; }
-
Мои поздравления вдогонку!
-
С точки зрения смены фона при наведении - ничуть.
-
Верстка дивами. Выравнивание по вертикали.
SelenIT replied to Great Rash's topic in Tricks and solutions
С инлайн-блоками нужно постоянно держать ухо востро по поводу пробелов между тегами. В данном примере повезло, что ширина чайлда меньше 100% ширины парента, а то бы хелпер перенесся на новую строку - и привет... Имхо, пробел перед хелпером желательно убрать, а для пущей надежности паренту добавить white-space: nowrap (ну а чайлду вернуть white-space: normal).