траблы со слоями

163

мартышон

25 февраля 2007 г. в 09:09

708

Когда-то сделала сайт под 1024х768, а недавно глянула на него на мониторе 1280х1024 и ужаснулась: сайт болтается в левом верхнем углу и впечатление производит самое жалкое. Хотелось бы сделать так, чтобы на мониторе 1024х768 он смотрелся как есть, а на 1280х1024 был по центру экрана.

Сайт сверстан слоями, у каждого слоя прописана position: absolute, и по идее если запихнуть все эти слои в один и поместить его по центру экрана, то все эти position absolute уже будут отсчитываться не от края экрана, а от родительского слоя. То есть будет именно то, чего я добиваюсь. Но это в теории, а на практике когда я так делаю, то сайт так и остается левом верхнем углу. В чем может быть ошибка и как ее исправить?

Заранее спасибо.

99

Sveta Prokopeva

25 февраля 2007 г. в 09:27

#1

Абсолют он на то и абсолют что бы считатся от (0;0) - верхнего левого угла и это уже не как не исправить. Получить центрованый абсолют можно следующей конструкцией:

<html>

<body>

<table height=200 bgcolor=#eeeeee style="position: absolute; left: 20%; right: 20%; width: 60%;">

 <tr> 

  <td>

  </td>

 </tr>

</table>

</body>

</html>

Но в Вашем случае я так понимаю ширина вполне конкретная в районе 1000 пикселей и что бы отцентрировать я бы рекомендовала Вам перейти от абсолюта к относительному расположению слоёв. Конструкция вида:

<html>

<body>

<table width=100%>

 <tr>

  <td align=center>

<table width=1000 height=200 bgcolor=#eeeeee style="position: relative; left: 0; top: 10;">

 <tr> 

  <td>

  </td>

 </tr>

</table>

  </td>

 </tr>

</table>

</body>

</html>

324

response

25 февраля 2007 г. в 12:47

#2

Sveta Prokopeva:
Абсолют он на то и абсолют что бы считатся от (0;0) - верхнего левого угла и это уже не как не исправить.

левого угла экрана?

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

<html>

<body>



<div style="background: red; width: 500px; height: 500px; padding: 100px; position: relative">

	<div style="background: blue; width: 300px; height: 300px; position: absolute; top: 10px; right: 10px;">

		content

	</div>

</div>



</body>

</html>

далее необходимо спозиционировать внешний див, и дело в шляпе.

Однопоточный парсер ключевых слов Магадан (http://magadanparser.ru) (со свистелками) Многопоточный парсер ключевых слов Солнечный (http://sunnyparser.ru) (без свистелок)

163

мартышон

25 февраля 2007 г. в 14:54

#3

Sveta Prokopeva, response, большое спасибо. Я попробовала все три варианта, сработал только второй из вариантов Светы, а два другие не получились. Жалко только, что в лисичке он почему-то не работает. Зато в IE все выглядит замечательно.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

99

Sveta Prokopeva

25 февраля 2007 г. в 15:37

#4

мартышон, у меня лиса, так что под лисой всё работает :)

163

мартышон

25 февраля 2007 г. в 17:44

#5

У нас наверное какие-то разные лисы...😕

99

Sveta Prokopeva

25 февраля 2007 г. в 17:52

#6

Лисы они одинаковые, даже если модели разные, просто мы не совсем друг друга поняли :)

171

filosof

25 февраля 2007 г. в 18:08

#7

Не совсем одинаковые. Версия 1.5 и 2.0 отличаются в рендеринге

Что бы проверить свой сайт используйте http://www.browsercam.com/

Там можно бесплатно зарегистрировать тестовый аккаунт

99

Sveta Prokopeva

25 февраля 2007 г. в 18:38

#8

А у меня на днях лиса обновилась до 1.5.0.10, а где взять вторую?

386

dkameleon

25 февраля 2007 г. в 18:48

#9

Sveta Prokopeva:
а где взять вторую?

http://www.mozilla.com :)

Дизайн интерьера (http://balabukha.com/)

99

Sveta Prokopeva

25 февраля 2007 г. в 19:09

#10

Ага, прикольно. Я вот жму проверить апдейты - он говорит что апдейтов нету.

Google: E-E-A-T не является фактором ранжирования

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы

zproxy.org