Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Почему не работает Margin и padding в Opere

Автор: php5 6.2.2008, 15:15

Хочу сделать со всех четырех сторон отступ в 40 px для этого пишу
body { margin: 40px; padding: 40px; background-image: url(img/fon.png); }
в IE все работает ОК а вот в Opere правого отступа нет , почему и как это лечить

Автор: bars80080 6.2.2008, 16:21

правого отступа для чего нет?

мож плавающий контейнер? или ещё чего?

Автор: php5 6.2.2008, 16:37

да плавающий контейнер smile

Автор: bars80080 6.2.2008, 16:51

ну, плавающий контейнер у тебя и плавает поверх твоих отступов

ему по-барабану эта атрибутика, он примыкает к ближайшему блочному элементу

чтоб его усмирить нужно добавить ещё один внешний контейнер:

я примерно делаю так

Код

<body><div id="leftwall"><div id="rightwall">
<div id="page">

страница ...

Код

* { margin: 0px; padding: 0px; }
body { text-align: center; }

div#leftwall { background: url(image/) repeat-y; }
div#rightwall { background: url(image/) repeat-y top right; }

div#page { position: relative; width: 970px; text-align: left; margin-left: auto; margin-right: auto; }

т.е.
в боди мы центрируем посередине, два следующих дива нужны для отображения левого и правого колонтитула (скажем рамочка нужна)
а div#page - и есть сама страница, отцентрирована и сужена до нужного размера

Автор: php5 6.2.2008, 17:49

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

Автор: bars80080 6.2.2008, 17:57

Код


div#page { position: relative; text-align: left; margin-left: 40px; margin-right: 40px; }

попробуйте так

Автор: KonstRuctor 6.2.2008, 18:10

bars80080, откуда ты это все знаешь?

Автор: bars80080 6.2.2008, 18:22

в смысле? не помогает?

Автор: php5 6.2.2008, 19:00

не не работает так , так даже и IE отступ с права пропал smile

Автор: bars80080 7.2.2008, 10:31

попробуйте так:

Код


<style>
* { margin: 0px; padding: 0px; }
body { text-align: center; background: #ffff00; padding-left: 40px; padding-right: 40px; }

div#leftwall { background: url(image/) repeat-y; }
div#rightwall { background: url(image/) repeat-y top right; }

div#page { position: relative; text-align: left; /*margin-left: 40px; margin-right: 40px;*/ background: #cccccc; }

.a1 { float: left; }
.a2 { float: right; }
.a3 { float: left; }
/*.clear { clear: both; }*/
</style>
<body><div id="leftwall"><div id="rightwall">
<div id="page">

ñòðàíèöà ...

<div class="a3">
<img src="zzz.jpg" class="a1" />
<div class="a2"><img src="zzz.jpg" /></div>
wqerr
</div>
<div class="clear"></div>

</div></div></div>