Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Смещение ячеек

Автор: Guedda 21.11.2007, 11:01

Доброго времени суток. Подскажите, как можно лучше реализовать следующее. есть три ячейки таблицы, под ними располагается одна единственная ячейка с текстом (см. рис.): так вот после наведения мышкой на слово Меню, раскрывалось меню, а весь текст смещался вправо (то есть, освобождение как бы для этого меню (имеется ввиду, что меню не закрывает текст.)) как на втором рисунке: Подскажите, пожалуйста, как и через что это лучше реализовать? Заранее благодарен.

Автор: Castro 21.11.2007, 11:58

Единственное, что приходит в голову- это обрабатывать onMouseOver меню, а потом через DOM менять параметры ячейки с текстом, как вариант делать ей colspan=2, задавая левой ячейке размер равный ширине меню + ещё некоторый отступ для удобства чтения, но не ясно конечно в какой из этих ячеек окажется текст. Ещё можно сделать блоками -это ИМХО проще. Тот же onMouseOver меню, но пока меню не активно, левый <div style="display:none;width:200px;">(хм..возможено ещё нужно и float:left),  правому не указываете ширину - он и так должен занять всю ширину содержащего блока.   Как только наводите на меню курсор, меняем стиль скрытого блока на display:block - у Вас вылезает Вас левый блок и двигает "резину" справа.

Автор: dstorm81 21.11.2007, 12:09

положить внуть большой объединенной ячейки div со стилем float и display:none а потом когда меню будет выпадапть присваивать этому div display="block" вот как то так

Автор: Guedda 21.11.2007, 12:33

а как реализовать это самое присваивание??? что нужно написать примерно???

Автор: Castro 21.11.2007, 12:42

Смотрите. Задаёте Вашему диву id, потом жабаскриптом ищете его  function f(divID) Код { var div=document.getElementByID(divID); div.style.display="block"; } Примерно так, если не ошибаюсь, давненько не писал на жабаскрипте.

Автор: dstorm81 21.11.2007, 13:55

Код <html> <head> <style> #s2{float:rigth;height:100%} #s1,#s2{display:block} #s1{width:200px;background:red;float:left;height:100%;display:none} </style> <script> var make=function() { if(document.getElementById("s1").style.display!="block"){document.getElementById("s1").style.display="block"} else{document.getElementById("s1").style.display="none"} } </script> </head> <body> <table border=1> <tbody> <tr><td onmouseover="make()" onmouseout="make()">menu</td><td>&nbsp;</td></tr> <tr><td colspan=2> <div id="s1">скрываемый блок</div> <div id="s2"> многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса многа многа тектсамнога многа тектсамнога многа тектса </div> </td></tr> </tbody> </table> </body> </html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)