Блог Webmolot не раздает подарки!

Со 2-го по 28-е февраля отвечаем на каверзные вопросы по верстке.
Отличие от новогодней акции в том, что сейчас мы играем за вознаграждение. Любой из нас может как проиграть, так и выиграть от 2 до 28 wmz. Каждый день цена вопроса увеличивается на 1 wmz.

Правила игры:

  1. Принимаются вопросы исключительно по верстке (html/css) сайтов
  2. Если я отвечаю на Ваш вопрос правильно, Вы — проиграли
  3. Если я не нахожу ответ, а он у Вас есть, я признаю свой проигрыш
  4. Если ответа нет ни у меня, ни у Вас, любой желающий может ответить на вопрос и выиграть ставку (50% мои, 50% того, кто задавал вопрос)
  5. Цена вопроса соответствует дате, когда он был задан
  6. Ответ должен быть дан не позднее, чем через 2 дня после написания вопроса
  7. Один человек может задать не более 1-го вопроса в день
  8. Необходимо очень четко формулировать задачу, с возможностью конкретного ответа на нее
  9. Обязательно оставлять правильный e-mail, по которому можно с Вами связаться
  10. В день отвечаю не более, чем на три вопроса. Если вопросов задали больше, они переносятся на следующий день с новыми ставками

После окончания акции подведем итог. Самый умный участник, который «высосет» из меня последние гроши, появится на «доске почета» в Полезных ссылках на 2 месяца. Самый «залетный», который просадит больше всего «бабла», увлекшись игрой со мной, будет висеть рядом с самым умным.

ps. Оплату в случае проигрыша со своей стороны гарантирую, оплата с Вашей стороны остается на Вашей совести.
pps. Вопросы типа «Как сверстать такой сайт» не принимаются.

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

webmolot 02 февраля 2009 года, 4:40 #

Что-то все сразу приутихли и затаились :)
Не бойтесь, я тоже не все знаю, поэтому и организовал такую акцию. В первую очередь, для проверки своих знаний и приобретения новых.
Активнее, народ, тем более сегодня ставки самые низкие )

Олег 02 февраля 2009 года, 9:30 #

Ну что же, я попробую ;) Как при помощи директивы @import загрузить CSS файл только для IE6. Важно! IE7 это понять не должен + без лишних запросов к серверу. Ответ у меня есть ;)

webmolot 02 февраля 2009 года, 10:06 #

Ответ (Олег 02 февраля)
@import url(«all.css») — загружаем все стили кроме IE6
@import _url(«ie6.css») — загружаем стили для IE6

Олег 02 февраля 2009 года, 10:14 #

IE7 благополучно понял конструкцию
@import _url(”ie6.css”);

Это не по условиям задачи ;)
Надо что бы только IE6 понял твою директиву. IE7 это не должен понять.

webmolot 02 февраля 2009 года, 10:40 #

Олег, у Вас, наверное, какой-то особенный IE7 :)
Проверьте по этой ссылке, у меня IE7 отказывается понимать стили ie6.css

Олег 02 февраля 2009 года, 12:31 #

Тем не менее продолжаю утверждать что IE7 понимает такую конструкцию. Я упростил test case http://temp.tagv.biz/ie6-filter/
Как минимум под Вистой IE7 выводит надпись «IE6 ONLY».

Олег 02 февраля 2009 года, 12:37 #

Так, приношу свои извинения, чего то у меня это всё работает через раз. Не надо делать дополнительных проверок, я завтра прийду на работу, всё окончательно проверю, и признаю либо не признаю свое поражение. В любом случае у меня есть ещё хитрые вопросы ;)

webmolot 02 февраля 2009 года, 13:56 #

ок, проверьте все хорошенько, по вашей ссылке надпись «IE6 ONLY» отображается только в IE6, что и требовалось доказать.
хитрые вопросы я люблю, главное не перемудрить с ними :)

Олег 03 февраля 2009 года, 11:47 #

Так, я разобрался. Да, действительно это работает в IE6 и не работает в IE7, НО! IE7 всё равно делает запрос к серверу такого вот вида

«GET /ie6-filter/_url(%22ie6.css%22) HTTP/1.1″

Но я писал «+ без лишних запросов к серверу». Это значит что IE7 реально не должен понять искомую конструкцию, а не понять превратно, и сделать запрос несуществующего файла.

Макс 03 февраля 2009 года, 12:04 #

Есть следующая задачка. Сверстать блок, удовлетворяющий таким требованиям:
- «резиновый» по горизонтали и вертикали
- с произвольным фоном по периметру и телу блока
- одинаково выглядящий в ИЕ6+, Fx2+, Opera/Safari3(Win/Mac)/Chrome
- без javascript и expressions
- валидный маркап хотя бы для HTML 4.01 Strict и XHTML1.0 Strict
- максимальное количество элементов 3 (например, 2 div’a вложенных в 1)
Сразу скажу, что ответа я не знаю. Но если я правильно понял правила, это допускается.
Готов отдать 2wmz (такая цена вопроса сегодня?) за решение этой задачи.
Удачи! )

Макс 03 февраля 2009 года, 12:15 #

P.S. не 2, а 3 wmz — сегодня ж 3-е. Не жалко за решение )

Макс 03 февраля 2009 года, 12:26 #

P.P.S. Небольшое пояснение. С «произвольным фоном» — имеется в виду, что должны быть возможность приложить любой фон. Например, закгруглённые уголки неправильной формы с прозрачными краями. Т.е. фон задаётся картинкой. Картинку эту строить можно как угодно — «с запасом», скомбинировать фоны для элементов вместе, либо раздельно (3 различных картинки).

webmolot 03 февраля 2009 года, 12:30 #

Олег, ок!
С Вас правильный полный ответ и я признаю свое поражение, т.к. не учел все условия задачи.

ps. и если можно, расскажите, как Вы делаете проверку запросов к серверу.

Gansik aka Олег 03 февраля 2009 года, 12:33 #

Это Олег. Теперь уже со ссылкой на мой блог, на котором я публиковал решение ;) Вот мой ответ http://temp.tagv.biz/ie6-filter-2/

Больше деталей http://gansik.tagv.com/online/markup/2008-09-08-extra-css.xhtml
Там же ещё один хитрый импорт описан :)

webmolot 03 февраля 2009 года, 12:34 #

Макс, уточните, пожалуйста, что вы имеете ввиду под фоном «по периметру и телу блока», 5 фоновых картинок что ли :)

Gansik aka Олег 03 февраля 2009 года, 12:41 #

У вас какие то проблемы с очерёдностью коментов в блоге. Получилось что я опубликовал решение раньше чем вы это разрешили сделать :)

Проверку запросов к серверу я делаю либо читая логи апача, либо используя http://www.my-debugbar.com/wiki/Doc/HomePage . Там же IETester — рекомендую.

Макс 03 февраля 2009 года, 12:53 #

ну вот такой фон например
http://www.picamatic.com/show/2009/02/03/01/28/1951440_314x71.png

webmolot 03 февраля 2009 года, 14:03 #

ОК, спасибо, Олег!
Ваша взяла, 1:0 в пользу телезрителей :)
в моем примере запрос все таки отправляется.

На Ваш e-mail ушло письмо с запросом wmz-кошелька )

webmolot 03 февраля 2009 года, 15:19 #

Макс, насколько я понял, Вы хотите следующее:
- блок с резиновой шириной и высотой
- у блока прозрачные закругленные уголки (gif/png), рамка по периметру (gif/png/jpg) и блок залит фоновым цветом, как на картинке по вашей ссылке
- максимальное количество элементов, включая контейнер — три
- чистый html/css валидный и кроссбраузерный.

При такой постановке задачи, я не знаю ее решения и у меня есть подозрение, что решения нет.

Если кто-то справится с этим заданием, с удовольствием разделю с Максом ставку.

Макс 03 февраля 2009 года, 15:44 #

Ага. С 4-мя элементами, я думаю, можно попробовать сделать. А вот с 3-мя если кто-то сделал бы, было бы супер )

Добрый 04 февраля 2009 года, 18:12 #

Макс, а если так? http://www.noinimod.ru/3/
но экспрэшн полюбому нужен (

webmolot 04 февраля 2009 года, 18:46 #

Добрый, интересное решение с одним дивом, спасибо.
Иногда оно может очень даже пригодиться.
К сожалению, в твоем примере не учтены некоторые требования нашей задачи:
- рамка по периметру
- прозрачность уголков наружу, т.е. если под блоком находится какой-то бэкграунд он должен быть виден. В этом примере background-color для блока перекрывает все, что под ним
- чистый html/css

40a 04 февраля 2009 года, 21:20 #

Задачка на кругозор.
Как расположить текст по контуру изображения, не путать с периметром картинки. Используем одку картинку.

Добрый 04 февраля 2009 года, 21:47 #

webmolot, извиняйте, но кроссбраузерного решения чисто на html и css покамест не встречал )

webmolot 05 февраля 2009 года, 10:21 #

40a, если можно, приложите скриншот того, как должен располагаться текст.

Добрый, я тоже не встречал, поэтому и подозреваю, что решения нет.

webmolot 05 февраля 2009 года, 17:02 #

40a, постараюсь ответить без скриншота, надеюсь, что правильно вас понял.

Очень редко можно встретить сайты с обтеканием текста по контуру изображения. И это хорошо. Текст при обтекании, как правило, хуже читается. Но это не самое страшное. Больше всего пугает реализация этого приема. Я знаю 2 способа и все они далеки от идеального, т.к. приходится писать большой код. Спасает то, что есть сервисы, которые быстро генерят этот самый код после указания необходимых параметров.

- первый
- второй

ИМХО, второй поинтереснее и больше подходит к вашей задаче

40a 07 февраля 2009 года, 21:02 #

Спасибо за сервисы, если получится обтекание как на скриншоте — я проиграл.

webmolot 07 февраля 2009 года, 21:07 #

Воспользовавшись первым сервисом, сделал обтекание контура картинки, как на скриншоте.

40a 07 февраля 2009 года, 21:26 #

Присылай номер кошелька.

webmolot 07 февраля 2009 года, 21:45 #

Отлично, сравнял счет ;)
Жду следующих вопросов.
Кстати, обратите внимание на новый, 10-й номер правил игры.

webmolot 20 февраля 2009 года, 13:23 #

Как то совсем глухо…
20-е число, а это значит, что можно выиграть 20wmz
Смелее :)

Gansik aka Олег 24 февраля 2009 года, 14:45 #

Ну раз вы так настаиваете и денег не жалко, есть у меня ещё хитрые вопросы :)

Откройте линк http://umka.tagv.com/umk.opera.html в Опере и объясните поведение броузера. Опера показывает текст «Opera» хотя как бы должна показывать «Uknown». Это я такой хитрый хак нашёл и мне надо писать багрепорт? Объясните мне!

Правильный ответ я знаю, есно ;)

Андрей 24 февраля 2009 года, 15:31 #

Практический вопрос. Есть сайт http://www.brigg.ru/temp. Нужно визуально разделить его на два экрана: на первом экране пользователь видит до «Новости / Технический перевод / Области специализации / База знаний».
На втором экране текстовый блок, который ниже. Так должно отображаться при любых разрешениях и любых браузерах. Как это сделать?

webmolot 25 февраля 2009 года, 11:55 #

Андрей, надеюсь, я Вас правильно понял. Решение задачи смотрите здесь.

Gansik aka Олег, по Вашей ссылке все браузеры показывают текст «The page you are looking for is temporarily unavailable.
Please try again later. «

Gansik aka Олег 25 февраля 2009 года, 12:20 #

Я поправил линк, ВНЕЗАПНО сервер упал, sorry.
http://umka.tagv.com/umk.opera.html

Андрей 25 февраля 2009 года, 13:39 #

Спасибо. Адрес кошелька на почту, пожалуйста.

webmolot 26 февраля 2009 года, 15:49 #

Gansik aka Олег, спасибо за вопрос!
Я могу ошибаться, но мне кажется, что вопрос не по html/css, а главным правилом конкурса является именно этот пункт.
Я думаю, что значение для оперы возвращает скрипт, который лежит у Вас на сервере.

ps. в одной строчке кода по ссылке содержится 4 ошибки валидатора.
pps. в Opera 8.5 пример не работает

Gansik aka Олег 26 февраля 2009 года, 16:01 #

Уверяю вас что мой вопрос самым непосредственным образом касается HTML/CSS.

Я использую одну малоизвестную особенность, которая документирована в спецификациях, просто о ней мало кто знает :)

Эта вещь будет работать вне зависимости от валидности HTML.

Будете продолжать думать или написать ответ ? ;)

Gansik aka Олег 26 февраля 2009 года, 16:07 #

> Я думаю, что значение для оперы возвращает скрипт,
> который лежит у Вас на сервере.
Если вы посмотрите исходный код в Opere, то увидите что код такой же как и в остальных броузерах. Но вообще ход мыслей правильный, есть только один вопрос, как это сделано? ;)

webmolot 26 февраля 2009 года, 18:47 #

подстановку слова выполняет скрипт на Вашем сервере. Браузер определяется при помощи PHP или ASP.NET. Непонятным остается задача сомнительного id который не проходит валидацию и своим видом разрушает все представление синтаксиса идентификатора элемента.

Gansik aka Олег 26 февраля 2009 года, 19:02 #

Ну ладно. Пишу ответ, сами решайте по теме он или нет…

Кроме трёх известных способов подключения внешнего файла 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

webmolot 27 февраля 2009 года, 14:22 #

Gansik aka Олег, спасибо!
Интересный пример по теме.
Скажите Ваш кошелек, я перечислю выигрыш.
Кстати, Вы не сказали, как определяли браузер Opera.

Андрей, я написал Вам письмо на e-mail and@deti-angeli.ru, ответа пока не получил.

Gansik aka Олег 27 февраля 2009 года, 14:37 #

Вообще этот метод загрузки стилей понимают только Опера и Firefox.
Я написал правило которое понимает только Opera.
#id-elm{content:»new content»}
FF не позволяет менять контент блока, только с пcевдокласcами «:after, :before».
Номер кошелька вышлю позже немного… Это не горит, главное же процесс :)

Андрей 27 февраля 2009 года, 14:42 #

видел, счас не имею доступа к wm-кошельку. В понедельник вернусь — переведу.

Андрей 02 марта 2009 года, 16:01 #

Задача не решена полностью. Если на экране только текст, как в приведенном Вами ответе, то проблем нет, все работает. Но ведь в моем условии был не просто текст, там есть вертикальные рамки, которые нужно «растягивать». Вынужден снова задать вопрос: есть ли решение такой задачи?

webmolot 03 марта 2009 года, 12:12 #

Андрей, скиньте мне на почту please макет, т.к. по Вашей ссылке его уже нету и мне сложно по памяти верстать )

webmolot 03 марта 2009 года, 12:33 #

Подведем итог игры.
Смелых игроков, к моему сожалению, оказалось не много, по пальцам можно пересчитать:
- Олег
- Макс
- 40a
- Андрей
Спасибо всем за участие!
Счет игры 2:2, дружественная ничья :)
Больше всего денег вытянул из меня Олег, молоток, так держать!
Больше всего денег просадил Андрей, молоток, так держать :)
Вопрос Макса остался без ответа. Надеюсь, что когда-нибудь найдется виртуоз, который сможет ответить на этот вопрос.

Как и обещал, Олег и Андрей будут 2 месяца красоваться у меня в блогролле. Пришлите, please, ссылки на свои блоги.

P.S. я все же остался в плюсе ;)

Gansik aka Олег 03 марта 2009 года, 13:10 #

> P.S. я все же остался в плюсе ;)
Это я вас просто пожалел ;)

Андрей 03 марта 2009 года, 16:55 #

Все разобрались. Спасибо за ответ, интересную игру. Приятно общаться с профессионалами своего дела.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com