выравнивание по центру - пропадает часть при сдвиге окна

[Dasha]

Есть один слой. Я его выравниваю по центру окна.

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

Как сделать так, чтобы при соприкосновении с левой стороной окна браузера, слой оставался на странице, т.е. переставал ехать налево? Т.е. чтобы центрирование работало, только когда ширина окна браузера больше ширины слоя, т.е. 900 пикселей.

#sloy{
    top: 50px;
    width: 900px; 
    height:50px;
    background:red;

    position: absolute;
    left: 50%;
    margin-left: -450px;
}

Edited July 18, 2012 by Dasha

[hedgehog]

А почему не подходит такой вариант?

#sloy{
  width:900px;
  margin:0 auto;
}

Абсолютное позиционирование важно для этого блока?

Edited July 18, 2012 by hedgehog

[Dasha]

Про такой вариант я думала уже, но он не подходит, т.к. нужно именно абсолютное позиционирование и возможность этот слой поставить в любое место страницы, не раскурочив ее содержимое.

Вопрос в силе.

Edited July 18, 2012 by Dasha

[Николя223]

Никогда не задавайте процентное соотношение по краю с такими большими марджинами!!)) именно поэтому у вас всё влево и уходит. Лучше сделать всё в два слоя. Один абсолютное позиционирование, а второй внутри. Вот:

<style>
 #sloy{
    top: 50px;  
    width:100%;
    position: absolute;
}
 #sloy2{
    width: 900px;
    height:50px;
    background:red;
    margin:0 auto;
}
</style>


<DIV id="sloy"><DIV id="sloy2">содержимое</DIV></DIV>

[Dasha]

Поняла, СПАСИБО, уже кинулась применять.

Довопросец:

если в указанном вами примере окошко браузера сузить, то налево слой с красным фоном не уедет, но между границей браузера и красным фоном слева остается неубираемые 5 пиксюлей пустоты. Как бы из убрать?

Edited July 18, 2012 by Dasha

[Николя223]

Тут вообще всё просто)) нужно первому слою задать позицию 0 слева.

Только я ошибку нашёл: explorer не центрирует почему то sloy2, поэтому добавьте text-align:center;

Вот так:

  
 #sloy{
top: 50px;  
width:100%;
position: absolute;

text-align:center;
left:0px;
}

Edited July 18, 2012 by Николя223

[Dasha]

Проблема все таки вылезла. И очень неприятная.

Если мы создаем блок sloy1,sloy2

и еще один такой же блок sloy3,sloy4

У обоих блоков ширина 900 пиксюлей.

Если они располагаются друг над другом, то настройки верхнего блока убивают настройки нижнего блока. Например,

для нижнего блока мы устанавливаем

#block2 a{}

#block2 a:hover{}

и вот эти ссылки уже не будут работать, они даже не будут нажиматься или выделяться как-то, т.к. их блокирует верхний слой. Z-index'ом можно поменять слои местами, но от этого не слаще. Все будет с точностью до наоборот - ссылки слоя, который внизу, блокируются, а того, который вверху работаю. Причем IE8 нормально переваривает наложение, работаю и те и те ссылки. А вот Опера ссылки нижнего слоя убивает. Подскажите, как быть.

Может можно какое-то свойство прописать слою, чтобы он ни при каком раскладе не трогал другие слои, с которыми он соприкасается?

Если нельзя, то тогда вопрос в первом моем посте остается открытым

Edited July 18, 2012 by Dasha

[Николя223]

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

Edited July 19, 2012 by Николя223