HTML+CSS+JavaScript

Здравствуйте уважаемое сообщество.
У меня такая проблема, я верстаю макет, в нижней его части есть меню с 3-мя кнопками, при нажатии на кнопку выезжает подменю.
Сейчас если нажимаем на 1 кнопку, 2 смещается вниз, по мере раскрытия подменю для 1 кнопки.
Как сделать чтобы при раскрытии подменю первой кнопки, 2 не смещалась вниз.
файлы по вёрстке в прикреплённом архиве.

/* Стили для раскладывающихся кнопок link1(menu1), link2(menu2), link3(menu3) */    #ras_knopki { border:1px solid black; height:auto; position:relative; width:715px; margin-left:20px; }   #raskladka1 { position:relative; left:0px; top:0px;}  #raskladka2 { position:relative; left:243px; top:-66px; }  #raskladka3 { position:relative; left:486px; top:-132px;} ....

Возможно это связано с позиционированием, сейчас все неплохо, но кнопки при раскрытии подменю смещатся не должны.
ras_knopki - блок для 3 кнопок
raskladka1, raskladka2, raskladka3 - блок для 1,2,3 кнопки.
Ни поможете?

Может можно что-то сделать.
http://www.my-page29.narod.ru
Как избавиться от смещения кнопок при их раскладки (нажимаем на 1 кнопку, 2 смещается вниз, по мере раскрытия подменю для 1 кнопки)
Предположения у меня есть, только вот низнаю насколько они правильны.
1)- может это связано с позиционированием

/* Стили для раскладывающихся кнопок link1(menu1), link2(menu2), link3(menu3) */      #ras_knopki { border:1px solid black; height:auto; position:relative; width:715px; margin-left:20px; }    #raskladka1 { position:relative; left:0px; top:0px;}   #raskladka2 { position:relative; left:243px; top:-66px; }   #raskladka3 { position:relative; left:486px; top:-132px;}  ....

2) Может нужно для раскладки каждого подменю использовать разные функции
Для раскладки кнопок меню используется функция на js

/* Функция выдвигающегося меню для кнопок */ function menu_in(id, height){      id_ = id;      height_ = height;      he = parseInt(document.getElementById(id_).style.height);      if(he < height){          show_in();      }else{          close_in();      }  }  function show_in(){      he += 5;      document.getElementById(id_).style.height = he + 'px';      if(he < height_ + 5){          setTimeout('show_in()', 15);      }  }  function close_in(){      he -= 5;      document.getElementById(id_).style.height = he + 'px';      if (he > 0){          setTimeout('close_in()', 15);      }  }

Как исправить?

Для начала во всех трёх кнопках добавьте выделенное жирным:

<a href="#" onclick="menu_in('menus2', 420); return false" class="link2" >Изготовление рекламы</a>

, чтобы ваша страница всякий раз не прыгала наверх.
Тогда хоть можно будет увидеть - какого же визуального эффекта вы пытаетесь достичь вашим супер-пупер скриптом.
Вот когда народ УВИДИТ - чего же вам надо? - тогда, может быть, кто-то и предложит вам нормальное решение вашей проблемы.

Что ещё можно сделать.
Добавил, не помогло.
Нужно чтобы при раскладке 1 кнопки, 2 не двигалась вниз, а оставалась на месте.

Где добавили? В своей голове?
На сайте http://www.my-page29.narod.ru/ добавьте, в трёх местах.
И тогда только ПОСМОТРИМ - что надо сделать, чтобы помочь.

Извиняюсь, не скопировал на сервер,
Посмотрите сейчас.
http://www.my-page29.narod.ru
Хотел чтобы при раскладке 1 кнопки, 2 не смещалась вниз и оставалась на месте.

Помедитировал я над вашим скриптом.
Возникли вопросы.
Представьте, что всё работает отлично, именно ТАК, КАК ВАМ ХОЧЕТСЯ.

Ситуация 1.
Клиент кликает на кнопку "Размещение рекламы".
Скрытая панель "Размещения" начинает открываться.
Не дождавшись полного открытия панели "Размещения", клиент кликает на кнопку "Размещение рекламы" ещё раз.
Что должен В ЭТОМ СЛУЧАЕ делать скрипт? Остановить разворачивание и начать сворачивание панели "Размещения"? А если клиент кликнет в третий раз?
Ваш скрипт в данном случае "сходит с ума".
Я могу сделать В ЛЮБОМ ВИДЕ, только никак не соображу - а чего бы вам хотелось?

Ситуация 2.
Клиент кликает на кнопку "Размещение рекламы".
Скрытая панель "Размещения" начинает открываться.
Не дождавшись полного открытия панели "Размещения", клиент кликает на соседнюю кнопку "Изготовление рекламы".
Что должен В ЭТОМ СЛУЧАЕ делать скрипт? Панель "Размещения" следует "дооткрыть" до конца? Или просто остановиться? Или, наоборот, её закрыть?
Ваш скрипт и в этом случае "сходит с ума".
И здесь я могу сделать ПО-ЛЮБОМУ. Только вот не знаю - как вам надо?

PS. И совершенно не понял - для чего вам нужны "плюсики" на кнопках? :-)

Ситуация 1.
Если кликаем по 1 кнопке (Размещение рекламы) скрытая панель начинает раскрываться,
пока скрытая панель не раскроется до конца ничего происходить при повторном нажатии на эту же кнопку не должно.
Если "Размещение рекламы" полностью раскрылось и мы нажимаем эту же кнопку опять, то идёт сворачивание скрытой панели, и здесь также пока панель не скроется полностью, при нажатии на эту же кнопку ничего не происходит.

Ситуация 2
Кликаем на кнопке "Размещение рекламы" пока раскрывается скрытая панель кликаем соседнюю кнопку "Изготовление рекламы" здесь Размещение реклымы" следует "дооткрыть" до конца, и начать раскрытие 2 кнопки.

По +- на кнопках хотел чтобы при нажатии на + шло раскрытие скрытой панели (выполнялось то же что при нажатии на ссылку) если - сворачивание.
Ни подскажете какие изменения сделать.

Ни окажете помощь, мне просто ни всё понятно, делать начал а до конца довести не получается.

такое ощущение, что сайт призван скомпрометировать названные на страничке компании. И небрежность в верстке, и грамматические ошибки....

У вас кнопки в дивах вложенных друг в друга или как сделано?

Кнопки располагаются в блоке "ras_knopki"
Каждая кнопка в своём блоке raskladka1, raskladka2, raskladka3

<div id="ras_knopki">                 <div id="raskladka1">                   ...                 </div>                 <div id="raskladka2">                   ...                 </div>                 <div id="raskladka3">                   ...                 </div> </div>

стили css для этих блоков такие

#ras_knopki { border:1px solid black; height:auto; position:relative; width:715px; margin-left:20px; }   #raskladka1 { position:relative; left:0px; top:0px; width:231px; }  #raskladka2 { position:relative; left:243px; top:-66px; width:231px; }  #raskladka3 { position:relative; left:486px; top:-132px; width:231px; }

Пока занят по работе... через часик-полтора освобожусь, помогу.

Спасибо что откликнулись, жду, ;-)

/* Стили для раскладывающихся кнопок link1(menu1), link2(menu2), link3(menu3) */    #ras_knopki { border:1px solid black; height:auto; position:relative; width:715px; margin-left:20px; }   #raskladka1 { position:relative; left:0px; top:0px;display:inline-block;width:205px;}  #raskladka2 { position:relative; left:30px; top:0px; display:inline-block;width:205px;}  #raskladka3 { position:relative; left:60px; top:0px;display:inline-block;width:205px;}

У вас неправильно определен был тип блоков. Они располагались как и положено один под другим, вы отрицательным смещением вверх сбили себя и всех с толку.

Извиняюсь за отрицательное смещение.
Сейчас изменения внёс и вот что интересно.
В opera 3 кнопки располагаются в ряд, в ie в строку, почему не ясно

#ras_knopki { border:1px solid black; height:auto; position:relative; width:715px; margin-left:20px; }   #raskladka1 { position:relative; left:0px; top:0px; display:inline-block; width:231px; }  #raskladka2 { position:relative; left:7px; top:0px; display:inline-block; width:231px; }  #raskladka3 { position:relative; left:7px; top:0px; display:inline-block; width:231px; }

Мне бы хотелось чтобы кнопки распологались горизонтально, пробовал для блока кнопок #ras_knopki ставить display:inline-block, display:inline ни помогло.
Ни скажете что здесь можно сделать.
Хотел добится чтобы 3 кнопки располагались горизонтально.

<style> #iMenu          {float: left; width: 705px; border: 1px solid black} #iMenu div.cBtn {float: left; width: 231px; height: 53px; line-height: 53px; text-align: center; cursor: pointer; font-weight: bold; color: black; text-decoration: underline} #iMenu #iBtn0   {background-image: url('http://www.my-page29.narod.ru/image/link-1.jpg')} #iMenu #iBtn1   {background-image: url('http://www.my-page29.narod.ru/image/link-2.jpg'); margin: 0 6px} #iMenu #iBtn2   {background-image: url('http://www.my-page29.narod.ru/image/link-3.jpg')} #iMenu #iClr    {clear: both} #iMenu div.cPan {float: left; overflow: hidden; width: 231px; height: 1px} #iMenu #iPan1   {margin: 0 6px} </style> <!--[if IE]><style>#iMenu {width: 707px}</style><![endif]-->  <script> function fFormContent (x, y) //JS-код формирования содержимого панелей, вам он не нужен, потом удалите { for (var s = '<ol>', j = 0; j < x; j++) s += '<li>' + y; with (document) {open (); write (s + '</ol>'); close ()} } //конец кода формирования содержимого панелей var gStatus = new Array (0, 0, 0); //Статус трёх пар "кнопка/панель": // 0 - кнопка активна    / панель полностью свёрнута // 1 - кнопка недоступна / панель в процессе разворачивания // 2 - кнопка активна    / панель полностью развёрнута // 3 - кнопка недоступна / панель в процессе сворачивания var gTimer = null; //состояние таймера function fChangeStatus (x) { if (gStatus [x] % 2) return;              //статус нечётный (1 или 3), кнопка недоступна, выходим из функции gStatus [x] = (!gStatus [x]) ? 1 : 3;     //установка нового статуса (1 - разворачиваем или 3 - сворачиваем) with (document.getElementById ('iBtn' + x).style) {fontWeight = 'normal'; color = 'gray'; textDecoration = 'none'; cursor = 'default'} //делаем кнопку неактивной if (!gTimer) fProcess ();                 //запускаем таймер, если он ещё не включён } function fProcess () { for (var k = j = 0, l = gStatus.length; j < l; j++) //просматриваем статусы всех пар "кнопка-панель"    {    var st = gStatus [j]; if (st % 2) //если статус нечётный (1 или 3), то сворачиваем/разворачиваем       {       var obj = document.getElementById ('iPan' + j);       var he = obj.offsetHeight + 1 * ((st == 1) ? 1 : -1); //определяем текущую высоту панели и изменяем её (в плюс или в минус, в зависимости от статуса)       obj.style.height = he + 'px';       if (st == 1 && he == obj.scrollHeight) gStatus [j] = 2; //меняем статус на "полностью развёрнута"       if (st == 3 && he == 1) gStatus [j] = 0; //меняем статус на "полностью свёрнута"       if (st != gStatus [j]) with (document.getElementById ('iBtn' + j).style)       {fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной       else k++; //статус не изменился, надо продолжать процесс, меняем флаг       }    } if (k) gTimer = setTimeout (fProcess, 5); else gTimer = null; //продолжаем процесс или выходим из него } </script> <div id="iMenu">    <div class="cBtn" id="iBtn0" onclick="fChangeStatus (0)">Размещение рекламы</div>    <div class="cBtn" id="iBtn1" onclick="fChangeStatus (1)">Изготовление рекламы</div>    <div class="cBtn" id="iBtn2" onclick="fChangeStatus (2)">Интернет-проекты</div>       <div id="iClr"></div>    <div class="cPan" id="iPan0"><script>fFormContent (20, 'Размещение'     )</script><!-- Замените на своё содержимое --></div>    <div class="cPan" id="iPan1"><script>fFormContent (15, 'Изготовление'   )</script><!-- Замените на своё содержимое --></div>    <div class="cPan" id="iPan2"><script>fFormContent (10, 'Интернет-проект')</script><!-- Замените на своё содержимое --></div> </div>

И, заметьте, никакого позиционирования вовсе :-)

PS. Тестировал в MSIE6, FF3.5.7, Opera10.10

с Оперой хуже, у нее свои "понятия".
пока нет времени копать, если не решится вопрос с оперой, в течение дня попробую еще

Ну просто отлично,
Даже не знаю как Вас отблагодарить. Сейчас собираю всё вместе.
Скрипт то что надо.
Можно ещё небольшой вопрос, Как прикрепить рядом с кнопкой раскладку +- чтобы работало таким образом (нажимаем кнопку + он меняется на - и идёт раскрытие панели, т.е. то же действие что и при нажатии ссылки, с - на + закрытие)

я делаю иначе - если панель начала раскрываться, то следующее нажатие начинает процесс свертывания и меняю значок на кнопке на соответствующий. состояния панели храню в куке, чтобы пользователь, вернувшись на страницу, имел тоже состояние панели, в каком оставил, покинув страницу

1. Добавьте в стили строку:

#iMenu div.cBtn img {width: 14px; height: 14px; margin: 19px 3px 0 0}

2. Добавьте в HTML-код:

<div class="cBtn" id="iBtn0" onclick="fChangeStatus (0)"><img src="http://www.my-page29.narod.ru/image/plus.jpg">Размещение рекламы</div> <div class="cBtn" id="iBtn1" onclick="fChangeStatus (1)"><img src="http://www.my-page29.narod.ru/image/plus.jpg">Изготовление рекламы</div> <div class="cBtn" id="iBtn2" onclick="fChangeStatus (2)"><img src="http://www.my-page29.narod.ru/image/plus.jpg">Интернет-проекты</div> ВНИМАНИЕ: писать следует именно ТАК, без пробелов и без переносов строк между тегами внутри DIV'ов

3. Сделайте следующие изменения в скрипте:
а) После комментария //делаем кнопку неактивной добавьте строку

document.getElementById ('iBtn' + x).firstChild.style.visibility = 'hidden';

б) Кусок кода

if (st == 1 && he == obj.scrollHeight) gStatus [j] = 2; //меняем статус на "полностью развёрнута"       if (st == 3 && he == 1) gStatus [j] = 0; //меняем статус на "полностью свёрнута"       if (st != gStatus [j]) with (document.getElementById ('iBtn' + j).style)       {fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной

замените на

if (st == 1 && he == obj.scrollHeight) {gStatus [j] = 2; document.getElementById ('iBtn' + j).firstChild.src = 'http://www.my-page29.narod.ru/image/minus.jpg'} //меняем статус на "полностью развёрнута"       if (st == 3 && he == 1) {gStatus [j] = 0; document.getElementById ('iBtn' + j).firstChild.src = 'http://www.my-page29.narod.ru/image/plus.jpg'} //меняем статус на "полностью свёрнута"       if (st != gStatus [j]) {with (document.getElementById ('iBtn' + j).style)       {fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной       document.getElementById ('iBtn' + j).firstChild.style.visibility = 'visible'}

Благодаря Вам сверстал хороший макет. http://www.my-page29.narod.ru.
Прямо всё как хотел сделать, полностью реализовано.
Спасибо Вам огромное.

1. Я вам ТРИЖДЫ жирным шрифтом написал: <!-- Замените на своё содержимое -->

А вы вместо замены ТРИЖДЫ "улучшили" (добавили type="text/javascript") и оставили
абсолютно ненужные вам скриптовые блоки с вызовом функции внутри DIV'ов класса "cPan" и только после них добавили ваше содержимое.


2. Кроме того, я ведь специально высчитал и указал вам маргин для тегов <img> -

margin: 19px 3px 0 0

Но вы снова "улучшили" и 19 пикселов заменили на НОЛЬ.
Посмотрите на своё творение в MSIE6.0 - там вы увидите всю "прелесть" своего "улучшения" :-)

Тяжко быть бестолковым, правда? :-)

А о валидности вы не подумали.
Если не писать

type="text/javascript"

идёт ошибка.
Я заменил на своё содержимое да, там у меня блок с закруглёнными углами, элементы списка, фон, белая полоса между закруглёнными блоками.

#iMenu div.cBtn img {width: 14px; height: 14px; margin: 19px 10px 0 0; }

Здесь да 19 по верху, и 10 справа, между рисунком +- и ссылкой надо небольшой зазор
проверял в ie 7, opera 9.6, mozila 3.0, safari 3.1 всё нормально. :-)

Я щас кипятком уписаюсь, честное слово :-)
Ведь "о валидности я и не подумал"...


Вот этого

<div class="cPan" id="iPan0"><script type="text/javascript">fFormContent (0, 'Размещение'     )</script>                <div class="vneshniy_link1">                         <div class="zagolovok_link1">и так далее

вам НЕ НАДО.

Вам надо ТАК:

<div class="cPan" id="iPan0"><div class="vneshniy_link1">                         <div class="zagolovok_link1">и так далее

НЕ НУЖЕН вам скриптовой блок СОВСЕМ.
И невалидный без type="text/javascript" - НЕ НУЖЕН, и валидный с type="text/javascript" - тоже НЕ НУЖЕН.

Он был нужен мне, для того, чтобы пустой <div class="cPan"></div> для примера заполнить бессмысленным содержанием. Скриптовая функция мне это бессмысленное содержание формировала.
У вас же собственное содержание ЕСТЬ. В каждом из трёх DIV'ов. Все эти ваши заголовки и списки в блоках с закругленными краями.
Вы трижды вызываете несуществующую функцию fFormContent () - код её вы по моему совету совершенно правильно ведь удалили. Неужели ни в одном из перечисленных вами браузеров вы не посмотрели "Консоль ошибок"?


В общем, я очень рад, что вы помните о валидности :-)
Хотя... "поздно пить боржоми, когда почки отвалились" (с)