В общем, ситуация такова:
Страничка убегает вниз (т.е. увеличивается по высоте) видимо потому, что в левом столбце расположено несколько слоев с картинками.. Несмотря на то, что слои расположены друг на друге.. Как решить эту проблему?
может не совсем ясно объяснил.. Можете посмотреть тут:
wstyle.info/nec/
Заранее спасибо!
Не являясь большим специалистом по позиционированию в CSS, все-таки не могу не заметить:
Что-то не похоже, что слои-то друг на друге...
Посмотрите значение свойства TOP.
А я бы проверил z-index, а еще браузер случаем у вас не NN ?
Особо в код не вникал, но заметил следующее:
В CSS у каждого ID position: relative - относительное расположение. А вы все разместили в таблицах. Соответственно, расположение определяется относительно границ таблицы? Поправьте меня, если я с теорией ошибаюсь.
Но СSS здесь не причём.
Страница выравнивается, чтобы вместить все картинки. Кстати, слоёв я там не заметил. Расположите картинки по слоям с уникальными ID и подправьте JavaScript или CSS.
[/quote]Originally posted by Njoy@Nov 17 2006, 23:55
Особо в код не вникал, но заметил следующее:
В CSS у каждого ID position: relative - относительное расположение. А вы все разместили в таблицах. Соответственно, расположение определяется относительно границ таблицы? Поправьте меня, если я с теорией ошибаюсь.
Но СSS здесь не причём.
Страница выравнивается, чтобы вместить все картинки. Кстати, слоёв я там не заметил. Расположите картинки по слоям с уникальными ID и подправьте JavaScript или CSS.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
А, да, кстати, действительно, а Ведь он прав. Делай в разных слоях, используй абсолютное позиционирование, и всё
Если обобщить все вышесказанное:
Присвойте свойству position значение absolute, а не relative для всех идентификаторов.
Затем укажите одинаковые значения свойств top и left для всех идентификаторов. Только координаты при этом рассчитывайте не от левого верхнего угла ячейки таблицы, где в HTML-коде располагаются изображения, а от левого верхнего угла страницы.
И никаких z-index-ов здесь не требуется (изображения-то "вываливаются" поочередно).
Вот и всё решение.
Спасибо всем ответившим за, то что ответили, огромное!
Но ребята! Если б всё было так просто, я бы наверно сюда не написал.. Абсолютное позиционирование - замечательное решение для многих задач, но тут оно, увы, не подойдет... Это было первое, что пришло мне на ум. Но здесь мы имеем выравнивание основного текста страницы ПО ЦЕНТРУ т.е., координаты меняются, исходя даже не из разрешения экрана посетителя, а исходя из размера окна браузера... Как мне использовать абсолютное позиционирование, если координаты каждый раз разные?
Именно для этого было использовано позиционирование относительное. Именно для этого z-index и именно из-за этого - проблемы..
А вариант отказаться от выравнивания по-центру тут рассматриваться не может, ибо не вариант
Может кто подскажет, как на JS измеряется ширина окна браузера и как это встроить в код формулой, чтоб можно было пользоваться абсолютным позиционированием?
[/quote]
По-моему есть там что-то типа this.window.width... Но это ТАКОЙ геморрой на мой взгляд...
Можно подумать над другими решениями. Например, действительно отказаться от абсолютного позиционирования и попробовать воспользоваться ролловерным скриптом. Т.е. грузить изначально в ячейку таблицы пустое изображение, а потом менять его на другие при наведении курсора мыши на определенные объекты. Чтобы проявляемые изображения вовремя подгружались, можно воспользоваться <body onload...>
А эффект прозрачности в этом случае можно выдернуть из того же opacity.js.
Собственно говоря, вот пример кода с простейшим дополнительным скриптом, при помощи которого вся проблема и решается:
Скрипт, конечно, не совсем ролловерный, так как при ролловерном скрипте изображения возвращаются на первоначальные при потере фокуса. А здесь нам не надо, чтобы они возвращались. Пусть висят - хлеба не просятКод:<script language="JavaScript" src="opacity.js"></script> <script language="JavaScript">fadeOpacity.addRule('oR1', .0, 1, 20);</script> <script> function preloadImages() { frame = new Array(); a = preloadImages.arguments; if (document.images) { for (i=0; i<a.length; i++) { if (a[i].indexOf("#")!=0) { frame[i] = newImage(a[i]); }} preloadFlag = true; }} </script> <script> function imgOn(imgName) { if (document.images) { document.img.src = imgName; }} </script> <body onload="preloadImages('img/1.gif', 'img/2.gif')"> [Только зарегистрированные пользователи могут видеть ссылки. ] [Только зарегистрированные пользователи могут видеть ссылки. ] [img]img/spacer.gif[/img]- они же прозрачные становятся в конечном итоге...
Причем решается все в данном случае вообще без всяких там position, top, left и z-index... Вставляйте spacer.gif в любую нужную Вам ячейку таблицы. И он будет меняться по описанным выше правилам.
Единстенный нюанс - мне пришлось все-таки добавить alpha и прочее для spacer.gif. В противном случае при ПЕРВОМ изменении изображения оно немного дергалось. А теперь вот и spacer.gif "вдвойне" прозрачный стал при загрузке страницы...
Теперь ничего никуда не убегает?
Aykroyd
Спасибо! Сёдня попробую
Кстати, да!
отличная идея... Такую штуку очень легко сделать можно в ImageRеady, и почему я сразу про нее не подумал...может потому как только что закончил CSS курсы...=)
[/quote]
Такую штуку несложно сделать и ручками.
ImageReady - замечательная программа. Но для профессиональной работы, на мой взгляд, она нужна только для обегчения создания карт ссылок, да GIF-анимаций. Лично я даже ролловеры вручную...
Ну в самом деле, не будете же Вы коммерческий макет автоматом в ImageReady резать? :fie:
Он Вам так нарежет... грузиться страница полчаса по выделенке будет...
[/quote]
абсолютное позиционирование не панацея для верстки, более того, layout я бы не советовал делать им, а только через float позиционирование.
и если честно,я не понял, в чем проблема?
[/quote]
А как она еще должна меняться?Моргать? Прыгать? Скакать по экрану?
Извините! Скрипт, отвечающий за прозрачность (opacity.js), мной не изменялся.
Все работает в точности так, как и было у вас на сайте раньше (с позиционированием).
С той лишь разницей, что теперь ничего никуда не убегает...
Попробуйте вернуть всё как было, с CSS. Проявление всех изображений и их "угасание" будет в точности таким же, как и при текущем решении без CSS-позиционирования. Хоть при переходе от одного меню к другому, хоть без перехода...
Если у Вас одно изображение не успевает "угаснуть" перед проявлением другого изображения (при резких дерганьях мышки с ссылки на ссылку) - это наблюдалось и изначально...
Может быть Вы в коде где-нибудь ошиблись?
Заметьте, я нигде не использовал id. В скриптовых выражениях тоже все img.id заменены на img.name...
cпасибо за инфу, приму к сведению
Ваши права
