Selen

Для реализации градиента (и не только) в ИЕ 6+ тебе необходим PIE. http://css3pie.com/ Качай, подключай, пробуй

.class_name:hover { background: url("link_on_picture"); }

Еще раз перечитай мой первый совет. Идеальный вариант: 1. Меню через UL, LI. 2. Скругление через border-radius. 3. Картинка-ссылка 4. Изменение картинки - через Ховер. Ну если человек очень хочет меню в форме капли и для него не важно, будет ли ссылка интерактивной. Я предложил МАР. Не нужно выдергивать цитаты из контекста и показывать, какой ты умный и красивый!

Судя по задаваемым вопросам и оставляемым комментариям, предположу что ВовчиГ является дизайнером и не по наслышке знаком с фотошопом. Мои познания в этом ограничены нарезкой и ретушью фотографий. Было бы интересно ознакомиться с другой стороной медали веб разработки (графическим рядом). ВовчиГ - "Даешь мастер класс"?!

Тогда Тебе помогут теги <map></map> и <area coords="shape" coords="X1,Y1,X2,Y2 …Xn,Yn" /> и вырисовывай капли. Хотя бы примерно.

Вместе с вендорными префиксами и содержимым PIE скругление будет кроссбраузерное. На мой взгляд решение с картинкой не совсем то. Это не метод верстальщика.

Закругление углов решается через: border-radius: px; -moz-border-radius: px; -webkit-border-radius: px; behavior: url(pie/PIE.htc); PIE скачай с сайта автора, поищи в гугле. Там есть нюанс с закруглением картинок. Но на Хабре есть решение. А цвет меняй с помощью :hover.

+1. Очень правильные мысли! В наше непростое время вначале нужно найти работу, осознать, что это "твое", получать удовольствие от работы. А потом, учиться и получать высшее образование в этом направлении. К сожалению, родители этого пока до конца не осознают. И отправляют сразу после школы учиться свое чадо на юриста или финансиста. А в конечном итоге, выпускник работает в сфере обслуживания продавцом консультантом или охранником. Не по теме верстки, но все же...

htmlonline растет над собой. Тонко намекая на бесплатную помощь в верстке)))

Учить полный материал по HTML это Сизифов труд, не благодарный и ненужный. Как уже было сказано выше сейчас форматирование и оформление веб страницы осуществляется через стили. Для того, что бы сверстать страницу, необходимо знать с десяток тегов. И несколько обязательных значений к ним. В спецификации очень много тегов и их значений, не проходящие строгую валидацию. О таких тегах лучше сразу забыть и не привыкать использовать. Информации о тегах на HTMLBOOK, вполне достаточно. К тому же, скомпонована информация по валидации, браузерам и поддержка стандартов. Лучше сразу начинать читать учебник по CSS. Брендовые пользователи форума советую Эрика Мейера. Я такую книгу уже нашел. Начинаю читать, чего и Вам советую) Удачи!

Господа!) Вопрос касался валидации вендорных префиксов. А касательно значка - это был стеб) Цеплять значок валидации на невалидную страничку, это тоже самое, что клеить ярлык БЕЗ ГМО на продукт с ГМО))) Для посетителя, действительно, не имеет значение валиден код страницы или нет. А тем более, подтверждено это банером или нет))

Спасибо за разъяснение. Буду использовать float там где возможно, а position - там где не получиться применить обтекание)) Vlad, можно вас попросить ссылку на книгу ?

В разделе "Верстка с помощью слоев" (_htmlbook.ru). Описаны два метода расположения блоков (слоев) с помощью обтекания (Float) и позиционирования (Position). Оба метода мной испробованы. Хотелось бы уточнить, каким методом верстают профессионалы и в чем разница этих методов? Их достоинства и недостатки.

И тебе привет Значит парится по этому поводу не буду. Но все равно жалко, значок о валидном CSS на сайт не повесишь, эх))

Вопрос касательно валидации. С валидацией HTML все понятно и просто, без невалидных и переходных тегов и их значений можно обойтись. То с CSS все гораздо интереснее. Вопрос следующий: в какой форме записать вендорные префиксы что бы сделать их валидными ? Может есть аналог условных комментариев для этих целей ?

Очень полезная тема. Прежде чем регистрироваться на форуме и задавать свой первый вопрос, я прочитал почти весь учебный материал который есть на HTMLBOOKe и посетил с десяток различных сайтов, так или иначе связанных с веб разработкой. Очень часто новичкам дают ссылку _htmlbook.ru, мол бери и читай. Новички, с растерянными глазами, переходят по ссылке и не найдя ответа возвращаются, ругая "посылателей за информацией". А ведь действительно, прежде задавать вопросы, не лучше ли воспользоваться гУглем. Тем более в 9 из 10 случаев ответ можно найти намного быстрее, чем регистрироваться, создавать новую тему, описывать подробно суть проблемы, а потом еще и ждать ответа. К тому же не факт, что вам ответят быстро) Возможно будут уточняющие вопросы и вам придется писать уточняющие ответы. И так далее и тому подобное. В общем ГУГЛЬ ВАМ В ПОМОЩЬ уважаемые новички. PS: да, кстати. Таких терпеливых модераторов и старожил форума еще поискать нужно, а терпению позавидовать. На других бы форумах послали бы куда-подальше и забанили прижизненно. А тут до последнего борются за души жаждущих знаний)) Ибо есть такие твердолобые "студенты", которым даже ткнув носом в решение проблемы, ничего не докажешь) Спасибо за внимание

Да

Всем большое спасибо за помощь и дельные советы. Отдельное спасибо Serlutin за подсказку с классами. Правда и тут пришлось немного повозиться, т.к. добавление класса для UL (LI:hover .class_name) сработало (правда, для каждого уровня пришлось прописывать свой стиль), а для A (LI:hover .class_name a) - нет(( Пришлось городить монстроподобные конструкции стилей для каждого уровня и цеплять к каждой ссылке класс. Получилось кроссбраузерно. HTML <div class="menu"> <ul> <li><a class="color_l1" href="#">Все байки</a> <ul class="level_2"> <li><a class="color_l2" href="#">Байка №1</a></li> <li><a class="color_l2" href="#">Байка №2</a></li> <li><a class="color_l2" href="#">Байка №3</a></li> </ul> </li> <li><a class="color_l1" href="#">Байки по автору</a> <ul class="level_2"> <li><a class="color_l2" href="#">Автор №1</a> <ul class="level_3"> <li><a class="color_l3" href="#">Не страшная байка</a></li> <li><a class="color_l3" href="#">Байка-Бабайка</a></li> </ul> </li> <li><a class="color_l2" href="#">Автор №2</a> <ul class="level_3"> <li><a class="color_l3" href="#">Страшная байка</a></li> <li><a class="color_l3" href="#">Очень страшная байка</a></li> <li><a class="color_l3" href="#">Самая страшная байка</a></li> </ul> </li> <li><a class="color_l2" href="#">Автор №3</a></li> <li><a class="color_l2" href="#">Автор №4</a></li> <li><a class="color_l2" href="#">Автор №5</a></li> <li><a class="color_l2" href="#">Автор №6</a></li> <li><a class="color_l2" href="#">Автор №7</a></li> </ul> </li> <li><a class="color_l1" href="#">Байки по теме</a> <ul class="level_2"> <li><a class="color_l2" href="#">Тема №1</a></li> <li><a class="color_l2" href="#">Тема №2</a></li> <li><a class="color_l2" href="#">Тема №3</a></li> <li><a class="color_l2" href="#">Тема №4</a></li> </ul> </li> <li><a class="color_l1" href="#">Популярные разделы</a> <ul class="level_2"> <li><a class="color_l2" href="#">Популярный раздел №1</a></li> </ul> </li> <li><a class="color_l1" href="#">Последние байки</a> <ul class="level_2"> <li><a class="color_l2" href="#">Последняя байка №1</a></li> <li><a class="color_l2" href="#">Последняя байка №2</a></li> <li><a class="color_l2" href="#">Последняя байка №3</a></li> <li><a class="color_l2"href="#">Последняя байка №4</a></li> <li><a class="color_l2" href="#">Последняя байка №5</a></li> </ul> </li> </ul> </div> CSS: LI { behavior: url(ie6/hover.htc); /* :hover for IE 6 */ } LI.hover { position: relative; } LI.hover .level_2 { /* visibility for level 2 */ visibility: visible; } UL LI UL LI.hover .level_3 { /* visibility for level 3 */ visibility: visible; } LI.hover .color_l1 { /* hover color for level 1 */ background: #99FF99; font-weight: bold; } UL LI UL LI.hover .color_l2 { /* hover color for level 2 */ background: #99FF99; font-weight: bold; } UL LI UL LI UL LI.hover .color_l3 { /* hover color for level 3 */ background: #99FF99; font-weight: bold; } PS: и еще маленький вопрос) В каком разделе форума я могу выложить код странички которой я сверстал для оценки? В разделе обсуждение работ или можно в этой теме? Страничка простенькая, за основу взял страницу с учебника _htmlbook.ru.

В этом месте прошу поподробнее.. По поводу прописывания верстки...

Все что касается ИЕ6 я пишу в отдельном CSS,и подключаю к HTML)

Вариант без знака дочернего селектора не пройдет, тогда при наведении на ссылку, будет открываться все уровни сразу и помеченные цветом выделения, все без исключения. Вот полный CSS отвечающий за выпадение менюшек. Для нормальных браузеров .menu{ float: left; margin-top: 15px; margin-left: 10px; border-bottom: 1px solid #33CC33; } UL { width: 200px; position: relative; } LI { float: left; } LI A { display: block; width: 198px; height: 30px; line-height: 30px; text-indent: 5px; background: #CCFFCC; border: 1px solid #33CC33; border-width: 1px 1px 0 1px; text-decoration: none; } LI UL { visibility: hidden; position: absolute; left: 199px; top: 0; border-bottom: 1px solid #33CC33; } LI:hover { position: relative; } LI:hover > UL { visibility: visible; } LI:hover > A { background: #99FF99; font-weight: bold; }

Доброго времени суток. Это моя первая тема и первое сообщение. Я новичок в изучении HTML верстки и как любой новичок сталкиваюсь с определенными сложностями. Слава богу информации всевозможной на эту тему достаточно много, бери и учись. Очень много полезного узнал именно на сайте _www.htmlbook.ru. На мой взгляд это лучший сайт для начала изучения. Для новичка все разжевано и разложено по полочкам. Выше была присказка, дальше будет сказка)) Задача: Создать выпадающий список 2-3-4...n уровней, методом CSS. В разных источниках, предлагается много разных рабочих вариантов. Попробовав несколько из них, я остановился на одном из них, наиболее универсальном на мой взгляд. Все работает на ура, во всех браузерах... Кроме одного... ИЕ 6 не понимает :hover и дочерние селекторы. С ховером проблему решил, а с дочерними селекторами не получается. Перепробовал несколько решений предназначенных для этого, но ожидаемого результата не получил. HTML: <ul> <li><a href="#">Байки по автору</a> <ul> <li><a href="#">Автор №1</a></li> <li><a href="#">Автор №2</a> <ul> <li><a href="#">Байка автора №1</a></li> <li><a href="#">Байка автора №2</a></li> <li><a href="#">Байка автора №3</a></li> </ul> </li> <li><a href="#">Автор №3</a></li> <li><a href="#">Автор №4</a></li> <li><a href="#">Автор №5</a></li> <li><a href="#">Автор №6</a></li> <li><a href="#">Автор №7</a></li> </ul> </li> </ul> CSS: LI:hover { position: relative; } LI:hover > UL { visibility: visible; } LI:hover > A { background: #99FF99; font-weight: bold; } :hover решил с помощью LI { behavior: url(ie6/hover.htc); /* :hover for IE 6 */ } LI { behavior: url(ie6/hover.htc); /* :hover for IE 6 */ } LI.hover { position: relative; } LI.hover UL { visibility: visible; } LI.hover A { background: #99FF99; font-weight: bold; } Содержимое [b]behavior[/b] <attach for=element event=onmouseover handler=topm> <attach for=element event=onmouseout handler=verm> <script> function topm(){element.className='hover';} function verm(){element.className='';} </script> Прошу прощение за большое кол-во букв и за оформление поста Новичок, что с меня взять ?!