Центрирование...

[johan]

Такое дело, заказчику нужно чтобы сайт был расположен по центру, делаю таким образом

#centerLayer {
    position: absolute; /* Абсолютное позиционирование */
    width: 280px; /* Ширина слоя в пикселах */
    height: 180px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -150px; /* Отступ слева */
    margin-top: -100px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }

и вроде всё хорошо, пока не поменяется размер браузера, то есть вот так смотрим всё нормально

Но вот меняем размер браузера и правый бок уходит за границу видимости

[Modestes]

зачем позишн.

задайте родителю этих блоков margin: 0 auto; и все

например:

<div class="wrap"> <!--Центрируем этот див-->
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.wrap{
width:500px;
margin: 0 auto;
}

Edited October 2, 2012 by Modestes

[johan]

Позишн нужен для вертикального центрирования, так что не вариант

[tius]

для body установите min-width: 280px

[johan]

Не помогает

[tius]

ссылку или пример на http://jsfiddle.net/

[Whatsup]

Если ты хочешь убрать лишь полосу прокрутки то добавь в body overflow-y: hidden

[johan]

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

http://jsfiddle.net/6scNs/ - смещение меню не проблема, а вот левый блок прячется и всё тут

[DownHouse]

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

[johan]

Но таблицы использовать не очень хорошо же, или другого выхода нет?

[Whatsup]

Но таблицы использовать не очень хорошо же, или другого выхода нет?

Вы где такую чушь читаете ? Таблицы использовать можно. Есть задачи где только их и нужно использовать. Так что не бойтесь. Конечно задавать главный блок следом за боди таблицей не очень хорошо в плане верстки, но это не запрещено

[Whatsup]

Ну а задачу задал интересную

Вот решение

http://jsfiddle.net/6scNs/6/

что мы сделали.

Создаем главный блок с релативным позиционированием.

В нем делаем два контейнера. Первый контейнер нам будет давать правильное обтекание по вертикали, без обрезки при уменьшении окна, но с появлением скрола. мы этого добились установив обтекание контейнера(для того что бы он стремился к левому верхнему углу нашего главного контейнера и любые отрицательные маргины не уходили за пределы документа), и указав этому блоку 50 процентную высоту по вертикали. то есть в любом случае этот блок будет делить нашу страницу на 2 равные части своей нижней границей. Далее мы вставляем третий блок который имеет свойство clear: both которое отменяет обтекание этого блока по всем сторонам, следовательно блок будет начинаться ровно там где заканчивается наш первый контейнер, то есть сразу под ним. Так как нам нужно горизонтальное выравнивание, его мы добиваемся автоматическим маргином по горизонтали. Но наш блок все равно не находится по ветикальной середине. Для этого мы должны задать ему фиксированную ширину, что бы знать где у этого блока будет центр. Когда нам известен этот центр мы из первого контейнера, отрицательным маргином по нижней части блока убираем половину высоты нашего второго-основного контейнера. Вот вроде и все

Edited October 3, 2012 by Whatsup

[DownHouse]

Но таблицы использовать не очень хорошо же, или другого выхода нет?

А position:absolute для всего сайта лучше что ли?

[Whatsup]

Но таблицы использовать не очень хорошо же, или другого выхода нет?

А position:absolute для всего сайта лучше что ли?

Это глупое утверждение. Все используется в том месте где это нужно. И абсолют в ином случае для всего сайта даст больше толку чем что либо иное

[DownHouse]

Это не утверждение, это вопрос.

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

Ваш пример работает только для фиксированной высоты блока с контентом. Если убрать фикс высоты и добавить текста, то блок потянется вниз, оставляя фиксированный отступ от верха страницы. Т.е. вертикального выравнивания уже не будет.

Скажем так, у вас ручное выравнивание с манипулированием цифрами высоты и маржинов, а в таблице это все делается автоматически.

Edited October 3, 2012 by DownHouse

[Whatsup]

В таблице все точно так же. Если ширина внутреннего блока будет больше высоты экрана то выравнивание по центру не случиться. + вертикальное выравнивание и нужно тогда когда высота известна. иначе это не сделать никак, кроме способов с явой. У автора пример именно с фиксированной шириной и высотой. Но в чем то ты прав. Таблицей можно сделать проще.

[Whatsup]

Кстати вариант с резиновой версткой в двух плоскостях. Можно сделать из дивов таблицу с дисплеем. У основного контейнера задать свойство тэйбл, у ячеек внутри тэйбл цел

[johan]

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

И так вопрос, чтобы не плодить тему, может кто сходу носом ткнёт - как бороться с размерами в процентах в 64 битной и 32 битной ОС? Сейчас открыл макет который делаю на другом компьютере и разница заметна существенно

[Whatsup]

может браузер просто другой. Скажи где открывал

[johan]

может браузер просто другой. Скажи где открывал

Пардон, оказалось что на рабочем компьютере лиса не понимает border-box без префикса, а на домашнем - понимает

Появилась проблема с цветами... вообще странная - на одном мониторе Benq G2020HD смотрю оттенок прямо зеленый у фона, смотрю на ноуте - светлоголубой, как такое можно исправить? Cам цвет #91AA9D

Вот собственно фото отражающее суть проблемы

Edited October 5, 2012 by johan

[USF]

настроить цветопередачу на мониторах.

посмотрите отображение этого цвета не только на сайте.

ЗЫ: юзайте принтскрин

Edited October 5, 2012 by USF

[Whatsup]

да. лучше принтскрин, а то подозрительные сайты делаешь наверное Но вообще цветопередача на компьютерах другая. Потому как цвет в 6 значном виде он и в Африке цвет

[johan]

настроить цветопередачу на мониторах.

посмотрите отображение этого цвета не только на сайте.

ЗЫ: юзайте принтскрин

Принтскрин пробовал но по принтскрину разное отображение на разных мониторах, продемонстрировать не получилось бы), ну тогда как определить какое отображение "истинное" или хотя бы у большинства пользователей? Или может есть "таблица цветов стандартных на всех мониторах"?

В пайнт.нет та же беда

да. лучше принтскрин, а то подозрительные сайты делаешь наверное Но вообще цветопередача на компьютерах другая. Потому как цвет в 6 значном виде он и в Африке цвет

Вот и я думал что цвет он и в Африке цвет, взял цвета в синих тонах, включил товарищу показать, а тут на тебе - зелёный

Edited October 5, 2012 by johan

[USF]

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