Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Центрирование div относительно родителя 
V
    Опции темы
localhost
Дата 29.1.2013, 12:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Хирург-длятехкт
**


Профиль
Группа: Участник
Сообщений: 712
Регистрация: 8.11.2005
Где: Н.Новгород

Репутация: нет
Всего: 43



Всем привет.

Дано: http://jsfiddle.net/uvrJD/5/
Здесь фоновая подложка двухцветная (красный, зеленый блоки), а также основной блок (серый) фиксированной ширины, который надо отцентрировать по горизонтали (одинаковые отступы слева и справа).

Обычно делал margin: 0 auto; но в этом случае оно не работает, видимо из-за абсолютного позиционирования родительского блока.
Ну, а иначе как сделать такой составной фон я не придумал.

Вобщем, просьба помочь отцентрировать блок по горизонтали. Заранее спасибо за советы smile
PM MAIL   Вверх
Aliance
Дата 29.1.2013, 12:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137



Ставить body position в absolute по-моему не лучшая идея априори.
PM MAIL WWW ICQ Skype   Вверх
localhost
Дата 29.1.2013, 12:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Хирург-длятехкт
**


Профиль
Группа: Участник
Сообщений: 712
Регистрация: 8.11.2005
Где: Н.Новгород

Репутация: нет
Всего: 43



Цитата(Aliance @  29.1.2013,  12:21 Найти цитируемый пост)
Ставить body position в absolute по-моему не лучшая идея априори. 

Согласен, переделал
http://jsfiddle.net/uvrJD/8/
PM MAIL   Вверх
ksnk
Дата 29.1.2013, 13:04 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Код

#wrapper {
    position: absolute;
    width: 500px;
    height: 350px;
    top: 50%;
    left: 50%;
    z-index: 100;
    margin: -175px 0 0 -250px;
}

#main {
    background-color: #e1e1e8;
    border: 2px solid #000;
    height: 100%;
}


марджины у #wrapper вычисляются как минус половины габаритов. 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
localhost
Дата 29.1.2013, 13:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Хирург-длятехкт
**


Профиль
Группа: Участник
Сообщений: 712
Регистрация: 8.11.2005
Где: Н.Новгород

Репутация: нет
Всего: 43



ksnk, спасибо!
Но получается, если задать ширину wrapper в 960px, на разрешении 1024х768 блок выезжает за пределы по горизонтали.
PM MAIL   Вверх
ksnk
Дата 29.1.2013, 13:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Цитата(localhost @  29.1.2013,  13:29 Найти цитируемый пост)
Но получается, если задать ширину wrapper в 960px, на разрешении 1024х768 блок выезжает за пределы по горизонтали. 

С чего бы? В фидле, вроде, не вылезает. 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
localhost
Дата 29.1.2013, 14:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Хирург-длятехкт
**


Профиль
Группа: Участник
Сообщений: 712
Регистрация: 8.11.2005
Где: Н.Новгород

Репутация: нет
Всего: 43



Ну вот, у меня вылезает... http://jsfiddle.net/uvrJD/10/

Добавлено через 12 минут и 39 секунд
А не, вроде норм ) smile 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0476 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.