Полезная информация

Общайтесь со знакомыми и друзьями в нашем сообществе в Facebook.

№117-11-2006 18:27:57

Rohanx
Участник
 
Группа: Members
Зарегистрирован: 24-06-2005
Сообщений: 195

позиционирование div'a

Проблемма в том что FireFox2.0 не позиционирует правильно сайт (сайт смещается в левую сторону) в то время как IE отображает сайт строго по центру

Выделить код

Код:

.site 					{
					text-align: center;
					}
Выделить код

Код:

<div class="site">
<div class="site_or">

Отсутствует

 

№217-11-2006 22:16:43

chaos8
Участник
 
Группа: Members
Зарегистрирован: 05-09-2005
Сообщений: 39

Re: позиционирование div'a

text-align не отвечает за позиционирование div'а, ибо div есть блочный элемент и text-align на него не должен влиять. можно поэкспериментировать с margin: 0 auto; хотя IE это крайне плохо переваривает. будет работать неверно (если считаться со стандартами). text-align сам за себя говорит, что это выравнивает текст.

и советую перечитать спецификацию css2 :)

Отсутствует

 

№317-11-2006 22:36:08

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: позиционирование div'a

Rohanx
Дело в том, что по стандартам text-align отвечает именно за позиционирование текста и некоторых замещаемых элементов (картинок) внутри блоков. И сделано это вот зачем. Предположим, у Вас есть несколько блоков, наследующих свойство text-align, и Вы задаете центрирование текста в родительском блоке. Тогда, независимо от ширины блоков и их положения внутри родительского, во всех в них текст будет центрирован. Точно так же Вы можете задать режим justify, и это не значит, что дочерние блоки будут жаться по стеночке.
Стандартный способ выравнивать блоки внутри родительских вытекает из определения полей. У полей есть значения по умолчанию. Если два блока 100% ширины (а точнее, ширины auto) располагаются друг в друге, margin-left будет по умолчанию 0, а margin-right будет auto, что в данном случае аналогично нулю. Если внутренний блок будет уже, чем внешний, это будет значить выравнивание по левому краю. Давайте посмотрим, что будет, если мы зададим другие значения, отличные от значений по умолчанию:

Выделить код

Код:

div.innerBlock {margin-left: auto; margin-right: 0; width: 100px;}
<div class="outerBlock">
    <div class="innerBlock">
        ...
    </div>
</div>

Теперь внутренний блок выравнивается по правому краю.
Аналогично делается центрирование:

Выделить код

Код:

div.innerBlock {margin-left: auto; margin-right: auto; width: 100px;}

Теперь попробуем сделать общий код, который работает и в современных браузерах - Firefox, Opera, Konqueror, Safari, не понимающих некорректный способ, и в браузере IE, не понимающем стандартный, и при этом учитывает наследование свойств и не смущает валидаторы.

Выделить код

Код:

div.outerBlock {text-align: center;}
div.innerBlock {margin-left: auto; margin-right: auto; width: 100px; text-align: left;}
<div class="outerBlock">
    <div class="innerBlock">
        ...
    </div>
</div>

Здесь для тупого IE задается text-align: center; что современные браузеры воспринимают как директивы для текста, и чтобы текст во внутреннем блоке не центрировался, для него задается text-align: left; , для современных же браузеров центрирование выполняется через поля внутреннего блока.

Отсутствует

 

№417-11-2006 23:07:05

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: позиционирование div'a

P.S. Старайтесь не использовать знак подчеркивания _ в именах классов, потому что с ним могут быть проблемы в некоторых браузерах. Некоторые браузеры воспринимают такие классы исключительно через \_ в то время как другие считают эту конструкцию ошибкой. В IE некоторых версий классы с подчеркиванием вообще не работают, но не любые, а только в некоторых случаях. Систему тут найти так и не удалось.

Отсутствует

 

№518-11-2006 10:08:19

Rohanx
Участник
 
Группа: Members
Зарегистрирован: 24-06-2005
Сообщений: 195

Re: позиционирование div'a

все спасибо за разъяснения!

Отсутствует

 

№619-06-2010 00:57:32

thebazel
Участник
 
Группа: Members
Зарегистрирован: 11-02-2010
Сообщений: 2
UA: Opera 10.5

Re: позиционирование div'a

Выравнивание с помощью margin: auto; подходит только для не плавающих блоков. Если блоки или блоки имеет свойство float left или right, то подойдет метод выравнивания блоков по центру со свойством float.

Отсутствует

 

№719-06-2010 01:21:45

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
UA: Firefox 3.6
Веб-сайт

Re: позиционирование div'a

thebazel
:mad: Что за некрофилия?


Isn't it ironic... don't you think? — Alanis Morissette

Отсутствует

 

№819-06-2010 09:40:36

petrovich
Участник
 
Группа: Members
Зарегистрирован: 12-02-2005
Сообщений: 484
UA: Minefield 3.7

Re: позиционирование div'a

text-align: center можно для body задать, чтоб дивы не плодить.

upd:
И в IE6 нет проблемы такой, вроде, только в IE5.5 и ранее. Или ошибаюсь?

Отредактировано petrovich (19-06-2010 09:42:43)

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]