Меню
Что нового?

Сложность с абсолютнопозиционированным дивом после резсайза

Asar

Новичок
Сложность с абсолютно позиционированным дивом после резсайза

Схема страницы: Наверху абсолютнопозиционированный див top:0px, отцентрованный по середке экрана (body margin 0px auto).
Под ним (с соответствующим отступом) идут еще 2 блока.

Проблема:
В ИЕ при изменении размера окна браузера нижние 2 блока остаются по центру, а верхний - остается в том месте экрана, где был изначально. Ситуация исправляется только после обновления окна.

Вопрос: Что делать, как жить?
 

denver

?>Скриптер
1. Сверстать по-человечески, без position:absolute
2. Сделать блок вмещающий эти три и настроить центрирование к нему.

Короче это рядовая задача верстальщика
 

Asar

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

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

denver

?>Скриптер
Если не трудно выложи пример полаконичней куда-нибудь
 

Asar

Новичок
html {
background:#F3F3F3
}
body {
font-family: Tahoma, Verdana, Helvetica, Sans Serif;
font-size:80%;
padding:0; margin:0 auto;
width:60em;
color:#333
}

#header {background: url(/pic/grad.jpg) repeat-x #FFF; width:100%; overflow:hidden; height:141px; position:absolute; top:0px; width:60em}

#footer {background:#CCC; padding:0em 0em; width:100%}

p {text-align:justify; padding:0px 3.5em}

img {border:0px}

-~{}~ 01.09.06 11:04:

<body>

<div id="content">

<h1>Мини-процессор AMD</h1>

<img src="/pic/proc.jpg" align="right" style="margin:0em 1em">
<p class="first">Компания ...</p>
<p>Наша...</p>

</div>
<div id="footer">Footer</div>
<div id="header">
<a href="/"><img src="/pic/house.jpg" style="position:absolute; top:29px; left:1em"></a>
<img src="/pic/items.jpg" style="position:absolute; top:16px; right:0px">

</div>
 

denver

?>Скриптер
Что-то у меня это ну никак не позоже на что-то более-менее приличное. И кстати ничего не центрируется вовсе. Подозреваю что вот это нифига не делает:

body {
margin:0 auto;
width:60em;
}

-~{}~ 01.09.06 11:22:

PS. Да, а шапка накрывает полностью текст. Это так и надо? :)
 

Asar

Новичок
Код порезал перед постом - наверное, от этого и глюки у тебя происходят. Щас посмотрю, что не так скопировал... )
 

denver

?>Скриптер
По мелорчам: указание width, height и alt у рисунков очень помогают когда рисунки эти недоступы. Иначе они блин все дурацкого неизвестного размера и с стандартным текстом

ЗЫ полож это на сервер какой
 

Asar

Новичок
Проверил все в одном файле:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Div's</title>

</head>

<body>
<style type="text/css">

html {
background:#F3F3F3
}
body {
font-family: Tahoma, Verdana, Helvetica, Sans Serif;
font-size:80%;
padding:0; margin:0 auto;
width:60em;
color:#333
}

#header {background: url(/pic/grad.jpg) repeat-x #FFF; width:100%; overflow:hidden; height:141px; position:absolute; top:0px; width:60em; }

#footer {background:#CCC; padding:0em 0em; width:100%}

#content {
overflow:hidden; width:100%; background:#FFF; padding:0em 0em; margin-top:141px;
}

p {text-align:justify; padding:0px 3.5em}

img {border:0px}

h1 {font-size:125%; text-align:center}

</style>
<div id="content">

<h1>Мини-процессор AMD</h1>
<img src="/pic/proc.jpg" align="right" style="margin:0em 1em" width="200" height="387">
<p class="first">...</p>
<p>...</p>

</div>
<div id="footer">Footer</div>
<div id="header">
<a href="/"><img src="/pic/house.jpg" style="position:absolute; top:29px; left:1em" width="125" height="105"></a>
<img src="/pic/items.jpg" style="position:absolute; top:16px; right:0px" width="429" height="118">
</div>

</body>
</html>
 

denver

?>Скриптер
Asar
<body> и <html> это такие "псевдо"блоки, ширина у них не задается. Добавь главный контейнер:

<body>
<div id="body">
...
</div>
</body>

и поменяй в стилях body {...} на #body {...}
 

Asar

Новичок
Почему ширина у боди на задается? Я ее задаю, и она отлично срабатывает, при этом не требуется городить никаких лишних блоков.
В данном конкретном случае - на всякий пожарный я-таки проставил лишний

-~{}~ 01.09.06 12:45:

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

denver

?>Скриптер
А добавь

body {
...
border: 10px solid green;
background: red;
}

и посмотри как это выглядит в разных браузерах.
 

Asar

Новичок
Посмотрел в ИЕ, ФФ, Опере. Не вижу особо ужасных отличий... Что имеешь ввиду?
 

denver

?>Скриптер
блин разуй глаз. с таким CSS у блока с шириной 60em и должен быть бэкграунд соответствующего размера и обрамляющая рамка. Ни в одном браузере, body не имеет ни рамки ни ограничений ширины судя по бэкграунду, который везде 100% страницы. Отакот.
 

Asar

Новичок
Если я правильно понял твою мысль, то:

<style type="text/css">
html {background-color:#336699}
body {
border: 10px solid green;
background: red;
width:500px; height:500px
}
</style>

-~{}~ 01.09.06 14:10:

Теперь в ИЕ и Опере отступ основного блока сильно больше, чем в ФФ стал. Мда№2...
 

denver

?>Скриптер
Ну ладно, сдаюсь :)
Но это всё равно не проблема :)
А тем более с отступом (проставь body {margin:0; padding: 0}
 

Asar

Новичок
Ставлю отступ для <div id="content"> margin:141px (это высота хедера, соответственно, на нее и отступаем). В ФФ - все Ок. В Ие - расстояние между хедером и контентом. В Ёпере - то же, но еще больше. Приставил к <body> нулевые маргины паддинги - чуть лучше, но все равно нужно обновляться в Ёпере хотя бы - в ИЕ уже нормально.
Нет в жизни щастья?
 

Asar

Новичок
Долго объяснять. Все равно на результат в данном случае не влияет.
 
Войдите или зарегистрируйтесь для ответа.
Сверху