Вид для печати
В общем, ситуация такова:
Страничка убегает вниз (т.е. увеличивается по высоте) видимо потому, что в левом столбце расположено несколько слоев с картинками.. Несмотря на то, что слои расположены друг на друге.. Как решить эту проблему?
может не совсем ясно объяснил.. Можете посмотреть тут:
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'>[Only registered and activated users can see links. Click Here To Register...]
А, да, кстати, действительно, а Ведь он прав. Делай в разных слоях, используй абсолютное позиционирование, и всё
Если обобщить все вышесказанное:
Присвойте свойству position значение absolute, а не relative для всех идентификаторов.
Затем укажите одинаковые значения свойств top и left для всех идентификаторов. Только координаты при этом рассчитывайте не от левого верхнего угла ячейки таблицы, где в HTML-коде располагаются изображения, а от левого верхнего угла страницы.
И никаких z-index-ов здесь не требуется (изображения-то "вываливаются" поочередно).
Вот и всё решение. :hi:
Спасибо всем ответившим за, то что ответили, огромное!
Но ребята! Если б всё было так просто, я бы наверно сюда не написал.. Абсолютное позиционирование - замечательное решение для многих задач, но тут оно, увы, не подойдет... Это было первое, что пришло мне на ум. Но здесь мы имеем выравнивание основного текста страницы ПО ЦЕНТРУ т.е., координаты меняются, исходя даже не из разрешения экрана посетителя, а исходя из размера окна браузера... Как мне использовать абсолютное позиционирование, если координаты каждый раз разные?
Именно для этого было использовано позиционирование относительное. Именно для этого z-index и именно из-за этого - проблемы..
А вариант отказаться от выравнивания по-центру тут рассматриваться не может, ибо не вариант [Only registered and activated users can see links. Click Here To Register...]
Может кто подскажет, как на JS измеряется ширина окна браузера и как это встроить в код формулой, чтоб можно было пользоваться абсолютным позиционированием?
[/quote]Цитата:
Originally posted by Инститорис@Nov 18 2006, 21:47
Может кто подскажет, как на JS измеряется ширина окна браузера и как это встроить в код формулой, чтоб можно было пользоваться абсолютным позиционированием?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
По-моему есть там что-то типа this.window.width... Но это ТАКОЙ геморрой на мой взгляд...
Можно подумать над другими решениями. Например, действительно отказаться от абсолютного позиционирования и попробовать воспользоваться ролловерным скриптом. Т.е. грузить изначально в ячейку таблицы пустое изображение, а потом менять его на другие при наведении курсора мыши на определенные объекты. Чтобы проявляемые изображения вовремя подгружались, можно воспользоваться <body onload...>
А эффект прозрачности в этом случае можно выдернуть из того же opacity.js.
Собственно говоря, вот пример кода с простейшим дополнительным скриптом, при помощи которого вся проблема и решается:
Скрипт, конечно, не совсем ролловерный, так как при ролловерном скрипте изображения возвращаются на первоначальные при потере фокуса. А здесь нам не надо, чтобы они возвращались. Пусть висят - хлеба не просят [Only registered and activated users can see links. Click Here To Register...] - они же прозрачные становятся в конечном итоге...Код:<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')">
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[img]img/spacer.gif[/img]
Причем решается все в данном случае вообще без всяких там position, top, left и z-index... Вставляйте spacer.gif в любую нужную Вам ячейку таблицы. И он будет меняться по описанным выше правилам.
Единстенный нюанс - мне пришлось все-таки добавить alpha и прочее для spacer.gif. В противном случае при ПЕРВОМ изменении изображения оно немного дергалось. А теперь вот и spacer.gif "вдвойне" прозрачный стал при загрузке страницы... [Only registered and activated users can see links. Click Here To Register...]
Теперь ничего никуда не убегает?
Aykroyd
Спасибо! Сёдня попробую [Only registered and activated users can see links. Click Here To Register...]
Кстати, да!
отличная идея... Такую штуку очень легко сделать можно в ImageRеady, и почему я сразу про нее не подумал... [Only registered and activated users can see links. Click Here To Register...] может потому как только что закончил CSS курсы...=)
[/quote]Цитата:
Originally posted by Mr. Willson@Nov 19 2006, 14:20
Кстати, да!
отличная идея... Такую штуку очень легко сделать можно в ImageRеady...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Такую штуку несложно сделать и ручками. [Only registered and activated users can see links. Click Here To Register...]
ImageReady - замечательная программа. Но для профессиональной работы, на мой взгляд, она нужна только для обегчения создания карт ссылок, да GIF-анимаций. Лично я даже ролловеры вручную...
Ну в самом деле, не будете же Вы коммерческий макет автоматом в ImageReady резать? :fie:
Он Вам так нарежет... грузиться страница полчаса по выделенке будет... [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by Mr. Willson@Nov 17 2006, 22:05
А, да, кстати, действительно, а Ведь он прав. Делай в разных слоях, используй абсолютное позиционирование, и всё
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
абсолютное позиционирование не панацея для верстки, более того, layout я бы не советовал делать им, а только через float позиционирование.
и если честно,я не понял, в чем проблема? :crazy:
[/quote]Цитата:
Originally posted by Zigzag@Nov 19 2006, 21:40
и если честно,я не понял, в чем проблема? :crazy:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А уже нет никакой проблемы... [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by Aykroyd@Nov 19 2006, 21:44
А уже нет никакой проблемы...* [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Таки есть одна проблема [Only registered and activated users can see links. Click Here To Register...]
Теперь при переходе от одного меню к другому прозрачность не меняется...
[/quote]Цитата:
Originally posted by Инститорис@Nov 20 2006, 13:34
Таки есть одна проблема [Only registered and activated users can see links. Click Here To Register...]
Теперь при переходе от одного меню к другому прозрачность не меняется...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А как она еще должна меняться? [Only registered and activated users can see links. Click Here To Register...] Моргать? Прыгать? Скакать по экрану? :crazy:
Извините! Скрипт, отвечающий за прозрачность (opacity.js), мной не изменялся.
Все работает в точности так, как и было у вас на сайте раньше (с позиционированием).
С той лишь разницей, что теперь ничего никуда не убегает...
Попробуйте вернуть всё как было, с CSS. Проявление всех изображений и их "угасание" будет в точности таким же, как и при текущем решении без CSS-позиционирования. Хоть при переходе от одного меню к другому, хоть без перехода... [Only registered and activated users can see links. Click Here To Register...]
Если у Вас одно изображение не успевает "угаснуть" перед проявлением другого изображения (при резких дерганьях мышки с ссылки на ссылку) - это наблюдалось и изначально...
Может быть Вы в коде где-нибудь ошиблись?
[Only registered and activated users can see links. Click Here To Register...] Заметьте, я нигде не использовал id. В скриптовых выражениях тоже все img.id заменены на img.name...
cпасибо за инфу, приму к сведению