центровка блока с "absolute" элементами внутри

[Archi_xxx]

Ребята проясните плиз ситуацию с position:absolute

Мне нужно: загнать одну картинку под другую (читай 2 картинки на одних и тех же координатах, одна над другой) для того что бы потом анимировать прозрачность верхней.

Это у меня получается сделать только с помощью position:absolute DIV-а (картинки внутри)

НО мне нужна еще и центровка этого блока (в который и помещаются картинки друг под другом) и куда бы я этот блок не пихал картинки стоят на месте, движется только блок или таблица.

брр.. надеюсь понятно о чем речь, то есть ограничить абсолютную позицию каким либо блоком нельзя, действие будет в любом случае на все окно так?

Сорри за нубство, первый раз довелось заниматься.. что нужно в моем случае, z-index мне может помочь? центровка мне нужна в любом случае + картинки друг под другом....

[npofopr]

не совсем понятно.

но вам наверно надо диву задать position:relative;

а картинкам внутри дива уже absolute.

чтобы они прыгали относительно дива, а не всего окна.

а z-index'ом уже расположите как вам надо. одну над другой

[Archi_xxx]

мне нужно элементарно разместить 1.jpg над 2.jpg после чего и ту и другую картинку ОТЦЕНТРОВАТЬ относительно окна, что бы они находились четко одна под другой, но всегда по центру окна (разрешение у них одинаковое)

и вот я пытаюсь это сделать с помощью центровки блока или таблицы (мне все равно куда помещать) и абсолютного ориентирования внутри этого блока, но вместе то и другое у меня не дружат(

Edited August 18, 2010 by Archi_xxx

[Колос]

<div style="position:relative;width:100px;height:100px;">
  <img src="ris1.jpg" width="100" height="100" style="position:absolute;top:0px;left:0px;">
  <img src="ris2.jpg" width="100" height="100" style="position:absolute;top:0px;left:0px;">
</div>

И div уже центруешь, размещаешь куда тебе надо

[stars]

Ну если размеры картинок известны, например возьмите 2 дива <div><div></div></div> и задайте картинки через background внешний див уже центруйте например margin: 0 auto; или align="center". Или же возьмите 1 див задайте ему position: relative; внутрь поместите обе картинки тэгами <img> им присвойте position: absolute; и различные z-index

[Archi_xxx]

<div style="position:relative;width:100px;height:100px;">
  <img src="ris1.jpg" width="100" height="100" style="position:absolute;top:0px;left:0px;">
  <img src="ris2.jpg" width="100" height="100" style="position:absolute;top:0px;left:0px;">
</div>

И div уже центруешь, размещаешь куда тебе надо

Ну вот я накручу например от левого края 500 пикселей, так все это добро будет по центру только у человека у которого 1000 пикселей разрешение по ширине (грубо говоря), а тут заходит кто нить у кого 1920 и где у него будут эти картинки?

Ну если размеры картинок известны, например возьмите 2 дива <div><div></div></div> и задайте картинки через background внешний див уже центруйте например margin: 0 auto; или align="center". Или же возьмите 1 див задайте ему position: relative; внутрь поместите обе картинки тэгами <img> им присвойте position: absolute; и различные z-index

Спасибо, но если я правильно понял, это почти тоже самое что предложил Колос?

Главное что решение где то рядом чувствую, и потом будет даже смешно, но не могу понять как)

и задайте картинки через background внешний

Имеется ввиду фоновое изображение для элемента?

Да можно попробовать, но не совсем ли это через Ж ?)) В принципе главное результат....

Edited August 18, 2010 by Archi_xxx

[Колос]

Ну вот я накручу например от левого края 500 пикселей, так все это добро будет по центру только у человека у которого 1000 пикселей разрешение по ширине (грубо говоря), а тут заходит кто нить у кого 1920 и где у него будут эти картинки?

http://www.htmlbook.ru/content/?id=95

И на форуме полно веток про это дело

Edited August 18, 2010 by Колос

[Archi_xxx]

http://www.htmlbook.ru/content/?id=95

И на форуме полно веток про это дело

Установка % вмеcто px мне ничего не дает, отступ все равно идет в пикселях то есть left:50% ничего не решает, почему не знаю

Пришлось идти окольными путями через z-index:

<head>
  <style>
   #layer1, #layer2 {position: relative;}
   #layer2 {top: -100px;}
   #layer1 { z-index: 1; }
   #layer2 { z-index: 2; }
  </style>

</head>

<body>
  <div align="center" id="layer1"><img src="1.jpg" width="100" height="100" /></div>
  <div align="center" id="layer2"><img src="2.jpg" width="100" height="100" /></div>
</body>

Тоже криво, но хотя бы что то похожее проклюнулось. С кроссбраузерностью хоть проблем не будет как думаете?

Как это сделать по человечески, блоками, без лишнего кода, мне до сих пор не известно...

Edited August 18, 2010 by Archi_xxx

[Lincky]

Как это сделать по человечески, блоками, без лишнего кода, мне до сих пор не известно...

А что тебе в твоём же решении не нравится? Лишний код для центрирования все равно надо добавлять, даже если через абсолют делать.

[sigma77]

Archi_xxx,

А чем простой margin: 0 auto не устраивает, если известна ширина блока?

[Lincky]

Archi_xxx,

А чем простой margin: 0 auto не устраивает, если известна ширина блока?

тож не плохо, но лишних симоволов в css добавиться. Предложенный им способ я думаю самый оптимальный.

[Archi_xxx]

Всем спасиб. за помощь, но думаю это еще не все

просто если сейчас в одном из браузеров вылезет какой то баг по этой методе, у меня вообще руки опустятся...

[Lincky]

Всем спасиб. за помощь, но думаю это еще не все

просто если сейчас в одном из браузеров вылезет какой то баг по этой методе, у меня вообще руки опустятся...

не вылезет! ты главное ие6 не открывай

[stars]

Всем спасиб. за помощь, но думаю это еще не все

просто если сейчас в одном из браузеров вылезет какой то баг по этой методе, у меня вообще руки опустятся...

Ссылку на страницу дай и что за баг конкретней?