Блог → Webmolot не раздает подарки!
Со 2-го по 28-е февраля отвечаем на каверзные вопросы по верстке.
Отличие от новогодней акции в том, что сейчас мы играем за вознаграждение. Любой из нас может как проиграть, так и выиграть от 2 до 28 wmz. Каждый день цена вопроса увеличивается на 1 wmz.
Правила игры:
- Принимаются вопросы исключительно по верстке (html/css) сайтов
- Если я отвечаю на Ваш вопрос правильно, Вы – проиграли
- Если я не нахожу ответ, а он у Вас есть, я признаю свой проигрыш
- Если ответа нет ни у меня, ни у Вас, любой желающий может ответить на вопрос и выиграть ставку (50% мои, 50% того, кто задавал вопрос)
- Цена вопроса соответствует дате, когда он был задан
- Ответ должен быть дан не позднее, чем через 2 дня после написания вопроса
- Один человек может задать не более 1-го вопроса в день
- Необходимо очень четко формулировать задачу, с возможностью конкретного ответа на нее
- Обязательно оставлять правильный e-mail, по которому можно с Вами связаться
- В день отвечаю не более, чем на три вопроса. Если вопросов задали больше, они переносятся на следующий день с новыми ставками
После окончания акции подведем итог. Самый умный участник, который “высосет” из меня последние гроши, появится на “доске почета” в Полезных ссылках на 2 месяца. Самый “залетный”, который просадит больше всего “бабла”, увлекшись игрой со мной, будет висеть рядом с самым умным.
ps. Оплату в случае проигрыша со своей стороны гарантирую, оплата с Вашей стороны остается на Вашей совести.
pps. Вопросы типа “Как сверстать такой сайт” не принимаются.
- 49 комментариев
- 02 февраля 2009 года
Комментарии
Спасибо за комментарий!Написать комментарий
Используйте в комментариях html-теги
Что-то все сразу приутихли и затаились :)
Не бойтесь, я тоже не все знаю, поэтому и организовал такую акцию. В первую очередь, для проверки своих знаний и приобретения новых.
Активнее, народ, тем более сегодня ставки самые низкие )
Ну что же, я попробую ;) Как при помощи директивы @import загрузить CSS файл только для IE6. Важно! IE7 это понять не должен + без лишних запросов к серверу. Ответ у меня есть ;)
Ответ (Олег 02 февраля)
@import url(“all.css”) – загружаем все стили кроме IE6
@import _url(“ie6.css”) – загружаем стили для IE6
IE7 благополучно понял конструкцию
@import _url(”ie6.css”);
Это не по условиям задачи ;)
Надо что бы только IE6 понял твою директиву. IE7 это не должен понять.
Олег, у Вас, наверное, какой-то особенный IE7 :)
Проверьте по этой ссылке, у меня IE7 отказывается понимать стили ie6.css
Тем не менее продолжаю утверждать что IE7 понимает такую конструкцию. Я упростил test case http://temp.tagv.biz/ie6-filter/
Как минимум под Вистой IE7 выводит надпись “IE6 ONLY”.
Так, приношу свои извинения, чего то у меня это всё работает через раз. Не надо делать дополнительных проверок, я завтра прийду на работу, всё окончательно проверю, и признаю либо не признаю свое поражение. В любом случае у меня есть ещё хитрые вопросы ;)
ок, проверьте все хорошенько, по вашей ссылке надпись “IE6 ONLY” отображается только в IE6, что и требовалось доказать.
хитрые вопросы я люблю, главное не перемудрить с ними :)
Так, я разобрался. Да, действительно это работает в IE6 и не работает в IE7, НО! IE7 всё равно делает запрос к серверу такого вот вида
“GET /ie6-filter/_url(%22ie6.css%22) HTTP/1.1″
Но я писал “+ без лишних запросов к серверу”. Это значит что IE7 реально не должен понять искомую конструкцию, а не понять превратно, и сделать запрос несуществующего файла.
Есть следующая задачка. Сверстать блок, удовлетворяющий таким требованиям:
- “резиновый” по горизонтали и вертикали
- с произвольным фоном по периметру и телу блока
- одинаково выглядящий в ИЕ6+, Fx2+, Opera/Safari3(Win/Mac)/Chrome
- без javascript и expressions
- валидный маркап хотя бы для HTML 4.01 Strict и XHTML1.0 Strict
- максимальное количество элементов 3 (например, 2 div’a вложенных в 1)
Сразу скажу, что ответа я не знаю. Но если я правильно понял правила, это допускается.
Готов отдать 2wmz (такая цена вопроса сегодня?) за решение этой задачи.
Удачи! )
P.S. не 2, а 3 wmz – сегодня ж 3-е. Не жалко за решение )
P.P.S. Небольшое пояснение. С “произвольным фоном” – имеется в виду, что должны быть возможность приложить любой фон. Например, закгруглённые уголки неправильной формы с прозрачными краями. Т.е. фон задаётся картинкой. Картинку эту строить можно как угодно – “с запасом”, скомбинировать фоны для элементов вместе, либо раздельно (3 различных картинки).
Олег, ок!
С Вас правильный полный ответ и я признаю свое поражение, т.к. не учел все условия задачи.
ps. и если можно, расскажите, как Вы делаете проверку запросов к серверу.
Это Олег. Теперь уже со ссылкой на мой блог, на котором я публиковал решение ;) Вот мой ответ http://temp.tagv.biz/ie6-filter-2/
Больше деталей http://gansik.tagv.com/online/markup/2008-09-08-extra-css.xhtml
Там же ещё один хитрый импорт описан :)
Макс, уточните, пожалуйста, что вы имеете ввиду под фоном “по периметру и телу блока”, 5 фоновых картинок что ли :)
У вас какие то проблемы с очерёдностью коментов в блоге. Получилось что я опубликовал решение раньше чем вы это разрешили сделать :)
Проверку запросов к серверу я делаю либо читая логи апача, либо используя http://www.my-debugbar.com/wiki/Doc/HomePage . Там же IETester – рекомендую.
ну вот такой фон например
http://www.picamatic.com/show/2009/02/03/01/28/1951440_314x71.png
ОК, спасибо, Олег!
Ваша взяла, 1:0 в пользу телезрителей :)
в моем примере запрос все таки отправляется.
На Ваш e-mail ушло письмо с запросом wmz-кошелька )
Макс, насколько я понял, Вы хотите следующее:
- блок с резиновой шириной и высотой
- у блока прозрачные закругленные уголки (gif/png), рамка по периметру (gif/png/jpg) и блок залит фоновым цветом, как на картинке по вашей ссылке
- максимальное количество элементов, включая контейнер – три
- чистый html/css валидный и кроссбраузерный.
При такой постановке задачи, я не знаю ее решения и у меня есть подозрение, что решения нет.
Если кто-то справится с этим заданием, с удовольствием разделю с Максом ставку.
Ага. С 4-мя элементами, я думаю, можно попробовать сделать. А вот с 3-мя если кто-то сделал бы, было бы супер )
Макс, а если так? http://www.noinimod.ru/3/
но экспрэшн полюбому нужен (
Добрый, интересное решение с одним дивом, спасибо.
Иногда оно может очень даже пригодиться.
К сожалению, в твоем примере не учтены некоторые требования нашей задачи:
- рамка по периметру
- прозрачность уголков наружу, т.е. если под блоком находится какой-то бэкграунд он должен быть виден. В этом примере background-color для блока перекрывает все, что под ним
- чистый html/css
Задачка на кругозор.
Как расположить текст по контуру изображения, не путать с периметром картинки. Используем одку картинку.
webmolot, извиняйте, но кроссбраузерного решения чисто на html и css покамест не встречал )
40a, если можно, приложите скриншот того, как должен располагаться текст.
Добрый, я тоже не встречал, поэтому и подозреваю, что решения нет.
40a, постараюсь ответить без скриншота, надеюсь, что правильно вас понял.
Очень редко можно встретить сайты с обтеканием текста по контуру изображения. И это хорошо. Текст при обтекании, как правило, хуже читается. Но это не самое страшное. Больше всего пугает реализация этого приема. Я знаю 2 способа и все они далеки от идеального, т.к. приходится писать большой код. Спасает то, что есть сервисы, которые быстро генерят этот самый код после указания необходимых параметров.
- первый
- второй
ИМХО, второй поинтереснее и больше подходит к вашей задаче
Спасибо за сервисы, если получится обтекание как на скриншоте — я проиграл.
Воспользовавшись первым сервисом, сделал обтекание контура картинки, как на скриншоте.
Присылай номер кошелька.
Отлично, сравнял счет ;)
Жду следующих вопросов.
Кстати, обратите внимание на новый, 10-й номер правил игры.
Как то совсем глухо…
20-е число, а это значит, что можно выиграть 20wmz
Смелее :)
Ну раз вы так настаиваете и денег не жалко, есть у меня ещё хитрые вопросы :)
Откройте линк http://umka.tagv.com/umk.opera.html в Опере и объясните поведение броузера. Опера показывает текст “Opera” хотя как бы должна показывать “Uknown”. Это я такой хитрый хак нашёл и мне надо писать багрепорт? Объясните мне!
Правильный ответ я знаю, есно ;)
Практический вопрос. Есть сайт http://www.brigg.ru/temp. Нужно визуально разделить его на два экрана: на первом экране пользователь видит до “Новости / Технический перевод / Области специализации / База знаний”.
На втором экране текстовый блок, который ниже. Так должно отображаться при любых разрешениях и любых браузерах. Как это сделать?
Андрей, надеюсь, я Вас правильно понял. Решение задачи смотрите здесь.
Gansik aka Олег, по Вашей ссылке все браузеры показывают текст “The page you are looking for is temporarily unavailable.
Please try again later. “
Я поправил линк, ВНЕЗАПНО сервер упал, sorry.
http://umka.tagv.com/umk.opera.html
Спасибо. Адрес кошелька на почту, пожалуйста.
Gansik aka Олег, спасибо за вопрос!
Я могу ошибаться, но мне кажется, что вопрос не по html/css, а главным правилом конкурса является именно этот пункт.
Я думаю, что значение для оперы возвращает скрипт, который лежит у Вас на сервере.
ps. в одной строчке кода по ссылке содержится 4 ошибки валидатора.
pps. в Opera 8.5 пример не работает
Уверяю вас что мой вопрос самым непосредственным образом касается HTML/CSS.
Я использую одну малоизвестную особенность, которая документирована в спецификациях, просто о ней мало кто знает :)
Эта вещь будет работать вне зависимости от валидности HTML.
Будете продолжать думать или написать ответ ? ;)
> Я думаю, что значение для оперы возвращает скрипт,
> который лежит у Вас на сервере.
Если вы посмотрите исходный код в Opere, то увидите что код такой же как и в остальных броузерах. Но вообще ход мыслей правильный, есть только один вопрос, как это сделано? ;)
подстановку слова выполняет скрипт на Вашем сервере. Браузер определяется при помощи PHP или ASP.NET. Непонятным остается задача сомнительного id который не проходит валидацию и своим видом разрушает все представление синтаксиса идентификатора элемента.
Ну ладно. Пишу ответ, сами решайте по теме он или нет…
Кроме трёх известных способов подключения внешнего файла CSS к документу (LINK, @import, xslt декларация) есть ещё один, о котором мало кто знает. Через HTTP заголовок “Link”:
Link: [http://example.com/w.css]; REL=stylesheet
Именно так и был подключён файл http://umka.tagv.com/umk.opera.css к примеру. Сомнительный ID был добавлен исключительно для запутывания :)
Всё это можно было выяснить очень просто при помощи аналога FireBug для Оперы. Просто надо было знать где смотреть :)
Доказательство что вопрос “в тему”
http://www.w3.org/TR/REC-html40/present/styles.html#h-14.6
Gansik aka Олег, спасибо!
Интересный пример по теме.
Скажите Ваш кошелек, я перечислю выигрыш.
Кстати, Вы не сказали, как определяли браузер Opera.
Андрей, я написал Вам письмо на e-mail and@deti-angeli.ru, ответа пока не получил.
Вообще этот метод загрузки стилей понимают только Опера и Firefox.
Я написал правило которое понимает только Opera.
#id-elm{content:”new content”}
FF не позволяет менять контент блока, только с пcевдокласcами “:after, :before”.
Номер кошелька вышлю позже немного… Это не горит, главное же процесс :)
видел, счас не имею доступа к wm-кошельку. В понедельник вернусь – переведу.
Задача не решена полностью. Если на экране только текст, как в приведенном Вами ответе, то проблем нет, все работает. Но ведь в моем условии был не просто текст, там есть вертикальные рамки, которые нужно “растягивать”. Вынужден снова задать вопрос: есть ли решение такой задачи?
Андрей, скиньте мне на почту please макет, т.к. по Вашей ссылке его уже нету и мне сложно по памяти верстать )
Подведем итог игры.
Смелых игроков, к моему сожалению, оказалось не много, по пальцам можно пересчитать:
- Олег
- Макс
- 40a
- Андрей
Спасибо всем за участие!
Счет игры 2:2, дружественная ничья :)
Больше всего денег вытянул из меня Олег, молоток, так держать!
Больше всего денег просадил Андрей, молоток, так держать :)
Вопрос Макса остался без ответа. Надеюсь, что когда-нибудь найдется виртуоз, который сможет ответить на этот вопрос.
Как и обещал, Олег и Андрей будут 2 месяца красоваться у меня в блогролле. Пришлите, please, ссылки на свои блоги.
P.S. я все же остался в плюсе ;)
> P.S. я все же остался в плюсе ;)
Это я вас просто пожалел ;)
Все разобрались. Спасибо за ответ, интересную игру. Приятно общаться с профессионалами своего дела.