16:39 

Нужна помощь с кодом

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Верстаю сайт. Все замечательно, НО пришлось сделать менб на Javasсript скопировав код с сайта, т.к. я пока не понимаю как это делается...
Собственно проблема в меню.
В макете оно выглядит так:

Я это реализовала... Но работает оно не совсем корректно. В частности после последних изменений html+css меню отлично работает в Опере и ИЕ... В не зависимости от ширины используемого экрана находится на своем месте... Но! В Хроме и Мазиле не работает :( Точнее работает но очень странно, только с права на лево. Как?? Почему??? Я не понимаю...
Привязываться к джаве совсем не обязательно....

Залила на хост: madhed.h16.ru/

:ps: Есть идеи, как адаптировать это все к ИЕ6? И прозрачность, и полупрозрачность... >_<

Css отвечающие за расположение:




Css отвечающие за вид:


html код вызова меню:



html код самих меню:



Javasсript:

@темы: Оптимизация, JavaScript, HTML, CSS

Комментарии
2011-05-08 в 17:16 

alhames
alhames.ru
Плз, оберните каждый кусок кода в [CODE][/CODE]
И допишите JS - видно он у вас оборвался.
Если не вмещается в пост - можно разместить в комментарии.

Касательно верстки: то всплывающий блок делится на три части - top, middle, bottom.
Top и bottom имеют фиксированные ширину / высоту и на них вешаются куски с закруглением.
На middle вешается на repeat-y однопиксельная вырезка:


Все сохраняется в png24
Для ie6 задаются фильтры.
Более подробно могу рассмотреть только когда увижу код в нормальном формате..

2011-05-08 в 17:25 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames поправила пост.

Делила изначально как вы описали... Тогда меню работало через 1. Не срабатывало меню под красной плашкой...
Теперь там 4 части... 2 вверху (одна меньше по ширине, чтобы работало нормально)...

Все сохранено в png24, с заданной полупрозрачностью...

2011-05-08 в 17:33 

alhames
alhames.ru
Фильтр для ie6:
img { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop"); }

Только вам по-моему вместо crop надо scale подставить - я не помню уже )

Тогда меню работало через 1. Не срабатывало меню под красной плашкой...
))))))
Дык само собой не сработает, выж его перекрыли и включили visibility: hidden;
Подробнее почитайте про visibility. Или даже проще - забудьте про это свойство. Реально сколько я уже проектов сверстал - едвали смогу вспомнить хоть один, где оно могло понадобиться.
display: none; полностью скрывает элемент - его и юзайте.

Сейчас посмотрим подробнее..

2011-05-08 в 17:47 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames visibility я использую, потому что он шел с кодом java... И совсем не уверена, что если я изменю что-то в коде он останется рабочим...



вот в этом куске менять?

И этот самый код отлично работает в опере и ие8 (остальные еще не настраивала)...
Вот залила на хостинг: madhed.h16.ru/


ie6 попробую...

:ps: у меня там еще будут вопросы >_< Но не все ж сразу сваливать :(

2011-05-08 в 18:04 

alhames
alhames.ru
Ох не.. Мне проще весь код переписать, чем править это. Но лучше я вам объясню что нужно сделать - хоть разберетесь.

html

1. Таблицы в меню используются только для равномерного распределения отступов между элементами меню в резиновых макетах. Да и то, если приходится делать выпадание, но в ячейку пихается див с width/height = 100%
Поэтому берем все элементы меню и запихиваем в <div class="menu"></div>

2. Создаем столько дивов внутри div.menu, сколько у нас элементов. Каждый див будет выглядить примерно так:
<div class="item item1"><a class="link">Ссылка</a></div>
item1, item2, item3 и тд нужны только в том случае, если не удается сделать универсальное выпадение.

3. Пихаем внутырь каждого div.item сразу за a.link выпадающий блок. Он выглядит примерно так:
<div class="list"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>

4. Внутри div.middle размещаем ссылки. Обысно используют ul li, но я недолюбливаю эту конструкцию, поэтому можно просто a с display: block;

css

1. Задаем div.menu div.item { position: relative; } и все остальные свойства, универсальные для общего блока
2. Прописываем стиль выпадающих блоков: div.menu div.item div.list { position: absolute; left: 0px; top: 20px; display: none; z-index: 10; }
3. Вешаем бекграунды. Вот тут нам и понадобиться item1, item2 и тд, так как картинка у div.item div.list div.top будет у каждого своя (скорее всего, но возможно совпадет)

js

Хоть увольте, но я юзаю JQuery и не мучаюсь с такой кашей, которую вы выложили.
По этому советую подключить фреймворк. Код будет примерно такой:

Согласитесь намного проще?

Вроде все.. Хотя возможно что то забыл.

2011-05-08 в 18:08 

alhames
alhames.ru
div.item div.list div.top
Да, кстати, да бы быть правильно понятым - это я не перечисляю блоки, т.к. не ставлю запятых, а указываю наследование (как в css).
Надеюсь вы поняли о чем речь..

2011-05-08 в 18:15 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames
1. У меня тут резиновая верстка
min-width: 988px;
max-width: 1200px;
Поэтому и засунула в таблицу... в div пыталась... Но div -верстка не мой конек :(

подключить фреймворк? :small:
с любой джава у меня проблема... Хоть и приходится использовать...
Можно подробнее, как делать с джава?

Если пойму что делать с джава, попробую сделать еще раз в div... :small:

2011-05-08 в 18:49 

alhames
alhames.ru
Судя по примеру у вас меню не тянется.
Если есть желание тянуть - пихайте в td блоки div.item. Причем этим td задавайте фиксированную ширину, а между каждым td с div.item вставьте еще по td с &nbsp; и не заданной шириной.

в div пыталась... Но div -верстка не мой конек
Вы от нее никуда не денетесь. Поэтому уж лучше начните привыкать сейчас )

подключить фреймворк?
jquery.com/ - качаете последний релиз и подключаете в head перед всеми другими js
Как у вас с английским дело обстоит?

с любой джава у меня проблема...
И еще, чтобы вы сами себя не запутали - Javasсript aka JS - это не Java. Поэтому не называйте его джава - иначе вас не правильно поймут.

2011-05-08 в 19:19 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Когда меняю visible на display перестает работать меню вообще :(

2011-05-08 в 20:11 

alhames
alhames.ru
Ну в вашей реализации - да, это понятно.
Попробуйте сделать как я описал.

2011-05-08 в 20:44 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Вначале:


Потом в блоке javasсript:


html примерно так? :


и css



Правильно?

2011-05-08 в 21:37 

alhames
alhames.ru
<sсript src="http://code.jquery.com/jquery-latest.js"></sсriрt>
Так нельзя. Либо скачайте и подключайте у себя, либо подключайте с гугула - code.google.com/intl/ru-RU/apis/libraries/devgu...

А код.. Ну вот так посмотрите:


Работает без js, но для ie6 js всеже придется прописать

2011-05-10 в 10:57 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames Почему нельзя с сайта разработчика? *скачаю переподключу*
Спасибо, сейчас попробую разобраться.

2011-05-10 в 11:19 

alhames
alhames.ru
Я что-то подумал, что при наведенном курсоре на пункт 1 и перемещение его направо пункт 2 не раскроется, т.к. он перекрыт.
Хотя возможно от этой проблемы избавит z-index. В любом случае - пробуйте )

2011-05-11 в 23:23 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Не раскрывалось.... Но, я поправила свою... Теперь стал вопрос с перетием слоев... никак не могу сообразить на скоорую руку что и как...

Тут я не меняла:


А вот тут поставила position:


И все заработало как надо, вот только я не знаю скрипта, чтобы подсвечивала ссылку пока курсов находится на слое :(

   

@web-программирование

главная