| |
|
|
| | у меня такая схема:
<div id="conteiner">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
#container {
width:829px;
margin:0 auto;
text-align:left;
}
И всё бы ничего, но когда в content содержится много текста, весь container сдвигается на несколько пикселей влево. Как будто центр всего макета смещается на эти несколько пикселей. Как избежать этого эффекта? Такое происходит в Opera и Chrome.
Если сделать так: margin-left:400px; то всё становится нормально, но мне нужно чтобы макет был по центру страницы. | |
| |
|
|
| |
|
|
| |
для: Keyses
(07.03.2011 в 02:40)
| | | Установку какого-либо объекта по центру тела документа браузер делает так:
1) Определяет доступную ширину тела документа
2) Определяет ширину центрируемого объекта
3) Отнимает из "первого" "второе" и делит напополам
4) Полученное в "третьем" - это и будет отступ центрируемого объекта слева (и такой же - справа).
Если "второе" не изменилось (если макет у Вас ширины не меняет), на позицию его может повлиять лишь ТОЛЬКО изменение доступной ширины тела документа и ничто другое.
Запустите в браузере (в любом) и посмотрите:
<p><input type="button" value="1. Узнать ширину тела документа"
onclick="document.getElementById ('i1').value += document.body.clientWidth; this.disabled = 1; document.getElementById ('b2').disabled = 0">
<input id="i1" readonly value="Было - ">
<p><input id="b2" disabled type="button" value="2. Добавить содержимое"
onclick="document.getElementById ('mDV').style.height = '5000px'; this.disabled = 1; document.getElementById ('b3').disabled = 0">
<p><input id="b3" disabled type="button" value="3. Узнать ширину тела документа"
onclick="document.getElementById ('i3').value += document.body.clientWidth; this.disabled = 1">
<input id="i3" readonly value="Стало - ">
<div id="mDV"> </div>
|
При добавлении контента справа на странице появляется вертикальный скроллбар, который уменьшает доступную ширину тела документа на какую-то (свою) ширину.
Ровно вполовину этой ширины скроллбара и сдвигается влево центрируемый объект.
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(07.03.2011 в 12:19)
| | | Получается так:
Было - 1676
Стало - 1659
Спасибо за подробное объяснение. Идея ясна, но всё же не ясно как исправить такое поведение?
Нашёл советы сделать так:
html,body{min-height:101%;}
или так
html,body{overflow-y:scroll;}
но по-моему это плохие варианты. надо что-то динамическое что будет компенсировать ширину полосы прокрутки. | |
| |
|
|
| |
|
|
| |
для: Keyses
(07.03.2011 в 12:49)
| | | Самый простой способ - body {overflow-y: scroll} - и Вы его уже нашли.
Динамически - тоже можно, конечно.
Тогда НИЧЕГО не задавайте в стилях для margin центрируемого блока, а напишите функцию, коя будет всё то, что я перечислил выше в четырёх пунктах, делать вместо браузера.
И повесьте эту функцию на события onload и onresize.
<head>
<style>
body {margin: 0}
#conteiner {width: 829px}
</style>
<script>
function myFunc ()
{
var dv = document.getElementById ('conteiner');
var W_body = document.body.clientWidth;
var W_div = dv.offsetWidth;
dv.style.marginLeft = (W_body > W_div) ? ((W_body - W_div) / 2 + 'px') : 0;
}
</script>
</head>
<body onload="myFunc ()" onresize="myFunc ()">
<input type="button" value="Добавить содержимое"
onclick="document.getElementById ('myDV').style.height = '5000px'; this.disabled = 1"><br>
...
<div id="conteiner"><div id="myDV" style="height: 123px; background: aqua"> </div></div>
...
</body>
|
PS. намекаю: container и conteiner - это два разных слова :-) | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(07.03.2011 в 13:53)
| | | >Самый простой способ - body {overflow-y: scroll} - и Вы его уже нашли.
Да, но тогда, по крайней мере в Опере появляются 2 скроллабара, может можно сделать так, чтобы всегда был только 1 но иногда активный, иногда нет? | |
| |
|
|
| |
|
|
| |
для: Keyses
(07.03.2011 в 14:15)
| | | Какие два скроллбара?
Вы о чём вообще пишете?
Запустите ТОТ ЖЕ самый код, который я Вам давал, в Опере, добавив в нём стиль для <BODY>
<style>
body {overflow-y: scroll}
</style>
<body>
<p><input type="button" value="1. Узнать ширину тела документа"
onclick="document.getElementById ('i1').value += document.body.clientWidth; this.disabled = 1; document.getElementById ('b2').disabled = 0">
<input id="i1" readonly value="Было - ">
<p><input id="b2" disabled type="button" value="2. Добавить содержимое"
onclick="document.getElementById ('mDV').style.height = '5000px'; this.disabled = 1; document.getElementById ('b3').disabled = 0">
<p><input id="b3" disabled type="button" value="3. Узнать ширину тела документа"
onclick="document.getElementById ('i3').value += document.body.clientWidth; this.disabled = 1">
<input id="i3" readonly value="Стало - ">
<div id="mDV"> </div>
</body>
|
Где тут "второй скроллбар" появляется?
Или у Вас прописан скроллбар для тега DIV, просто Вы об этом скромно умолчали?
Или у Вас настолько древняя Опера, которая не понимает overflow-y:, а только overflow: и добавляет поэтому ещё и горизонтальный скроллбар?
Не сильно переживайте по этому поводу. Вы, видимо, ЕДИНСТВЕННЫЙ на этой планете, кто до сих пор пользует Оперу версии до 9.5 - у всех уже давно стоят 10-я и 11-я версии, кои прекрасно понимают overflow-y: | |
| |
|
|
