HTML+CSS+JavaScript

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


Вот этого

<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 () - код её вы по моему совету совершенно правильно ведь удалили. Неужели ни в одном из перечисленных вами браузеров вы не посмотрели "Консоль ошибок"?


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

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

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 всё нормально. :-)

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

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


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

margin: 19px 3px 0 0

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

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

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

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'}

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

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

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

<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

Извиняюсь за отрицательное смещение.
Сейчас изменения внёс и вот что интересно.
В 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 кнопки располагались горизонтально.