Jump to content
  • 0

отступы для блока в IE6


Kat
 Share

Question

Нужно просто поместить прямоугольник на страницу, но не на всю высоту, а чтобы сверху и снизу были фиксированные отступы, скажем по 100px.

Рисуем div и делает для него

#list{

background-color:#FFFFFF;

position:absolute;

width:80%;

top:100px;

bottom:100px;

}

Так вот, в Opera и Mozilla все нормально отрабатывает, а в IE6 высота блока сжимается.

Прочитала, что можео задавать для IE так:

height:expression(document.body.offsetHeight-200);

Да, вроде отрабатывает, но я боюсь это использовать, потому что JavaScript может быть отключен и тогда весь дизайн полетит...Я права? Помогите, please, верстаю слоями первый раз и не знаю, как это правильно делается...

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0

Во первых, Див и так не будет на всю высоту, поскольку он выщитывает высоту, от высоты контента и margin, padding, border;

ИЕ считает это растояние по своему и если эти параметры не нужны то лучше их обнулять!

Ну а во вторых, если нужно чтобы от прямоугольника были отступы, то нада вместо position: absolute; bottom и top использовать

margin: 100px 0;

То что вы написали распологает блок по оси координат, а не делает отступы от блока!

Link to comment
Share on other sites

  • 0

Ну а во вторых, если нужно чтобы от прямоугольника были отступы, то нада вместо position: absolute; bottom и top использовать

margin: 100px 0;

Не получается так в IE6. Попробовала- снова все стягивается п оразмеру контента. Вот весь код:

<html>
<head>
<style type="text/css">
<!--
html, body {
background-color:#003399;
margin:0;
padding:0;
width:100%;
height:100%;

}
#list{
background-color:#FFFFFF;
position:absolute;
top:100px;
bottom:100px;
margin: 100px 0;

}
</style>
<head>
<body>
<div id="list">
content
</div>
</body>
</html>

(именно в IE6 не получается, остальные браузеры (Opera..) вроде делают высоту.

Link to comment
Share on other sites

  • 0

не помогает.

если задать высоту - все ок, но я не знаю какая высота будет, даже в 100% - это зависит от разрешения экрана.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<!--
html, body {
background-color:#003399;
margin:0;
padding:0;
width:100%;
height:100%;

}
#list{
background-color:#FFFFFF;
position:absolute;
margin: 100px 0;
}
</style>
<head>
<body>
<div id="list">
content
</div>
</body>
</html>

надо именно что отступы определенные снизу и сверху, потому что там фиксированные картинки, которые должны к границам экрана и к этому слою прилегать.

Link to comment
Share on other sites

  • 0

Kat

Если я правильно тебя понял, то ты хочешь получить это!

вот проверял (на IE6, Opera 9.02. Mozilla FireFox 2.0.0.1) под разный разрешения, блок всегда находится по центру!

Все придельно просто!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
border: none;
background: #fff;}

#list {
width: 40%;
height: 150px;
margin: auto;
padding: auto;
border: solid 2px #ff9;
background: #ff9;
position: absolute;
top: 150px;
left: 30%;}

--></style>
</head>

<body>

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


</body>
</html>

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

А теперь посмотри на этот код) понимаешь в чем фишка!

Здесь высота задана в процентах(у воженого блока)!

Просто наработай его под себя!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
border: none;
background: #fff;}

#list {
width: 40%;
height: 300px;
margin: auto;
padding: auto;
border: solid 2px #ff9;
background: #ff9;
position: absolute;
top: 150px;
left: 30%;}

#content {
width: 100%;
height: 70%;
margin: auto;
padding: auto;
border: none;
background: red;}

--></style>
</head>

<body>

<div id="list">
<div id="content">content</div>
</div>
</body>
</html>

P. S. Если я тебя правильно то все верно! Если нет, поясни лучше! :)

Link to comment
Share on other sites

  • 0

В том то и дело, что высоту блока я не знаю!!!

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

Если задать высоту, то и у меня все работает. Но я знаю только расстояние снизу и сверху.

Link to comment
Share on other sites

  • 0

Ну если она будет в виксрованом состояние, то тебе нужно смотреть первый пример!

Если же в процентах то второй!

А задавать отступ снизу ты замучаешся!!! Тебе нужно будет скрипт, который будет определять разрешения у клиентской стороны, и задвать высоту блохо из ходя от этого! А если ЯВА будет отключено, то все полетит к чертям, так что тебе нужен вторй пример!

Доработай его подсбя + вставь скрипт, который тоже будет не лишним!

Вроде все правильно пояснил :)

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

Link to comment
Share on other sites

  • 0

Вот макет страницы (условный):

block.gif- вот тот самый блок, как видите расстояние снизу фиксированно (сверху тоже).

X,Y - задано в пикселях

Высота всей страницы должна точно вписываться в высоту браузера.

Link to comment
Share on other sites

  • 0

отлично!

а как тогда правильно, то есть какой подход выбрать?

с интересом выслушаю (на самом деле!) :)

Есть еще табличный вариант

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;

}
#list{
background-color:#0033CC;
position:relative;
width:100%;
height:100%;
}

</style>
</head>

<body><table width="100%" height="100%" border="1">
<tr height="50px">
<td > </td>
<td width="80%"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<div id="list"> content</list>
</td>
<td> </td>
</tr>
<tr height="50px">
<td> </td>
<td>  </td>
<td> </td>
</tr>
</table>

</body>
</html>

Но тут проблема в том, что внутренний див опять же в IE6 на всю среднюю ячейку таблицы не растягиватся. И высота строк таблицы неверно устанавливается (в IE6)

Link to comment
Share on other sites

  • 0

2 Kat

http://www.cssplay.co.uk/layouts/fixit.html

без экспрешинов

или смотри мой пример

<html>
<head>
<style type="text/css">
body {
margin: 0;
border: 0;
padding: 0;
height: 100%;
max-height: 100%;
background-color: red;
overflow: hidden;
}

* html body {
padding: 10px 0 0 0;
}

#content {
position: fixed;
top: 10px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: white;
}

* html #content {
height: 100%;
width: 100%;
}

</style>
</head>

<body>

<div id="content">
content
</div>
</body>
</html>

Link to comment
Share on other sites

  • 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Проблема века</title>
</head>

<body>
<table cellspacing=0 cellpadding=5 width="90%" height="100%" border=1>
<tr height=100>
<td></td><td>X = 100 (голова)</td><td></td>
</tr>
<tr>
<td></td><td>Внутренности: кишки, почки, печень, сердце, л?гкие.</td><td></td>
</tr>
<tr height=100>
<td></td><td>Y = 100 (ноги)</td><td></td>
</tr>
</table>
</body>
</html>

А так нравиццо ? :)

Link to comment
Share on other sites

  • 0
Tokolist, что-то не пашет твой пример :) , под какой доктайп он заточен?

он заточен под квиркс моде :)

пример не соответствует точно ТЗ. просто мне лень перерабатывать... :(

главное понять принцип, который отображен по ссылке и в примере.

А так нравиццо ? :(

ха. таблицами и девятиклассник сможет :)

Link to comment
Share on other sites

  • 0
судя по рисунку достаточно и необходимо ограничить высоту таблицей, а верх и низ, либо дивами, либо бланк рисунками, либо строками таблицы, что тут сильно сложного?

да вроде можно верх и низ тоже в пикселах задать, а среднюю tr как 100%. вроед работает, правда не знаю, во всех ли браузерах

Link to comment
Share on other sites

  • 0
ха. таблицами и девятиклассник сможет ;)

Однако указанные выше примеры не работали ...

пример не соответствует точно ТЗ. просто мне лень перерабатывать... :)

главное понять принцип, который отображен по ссылке и в примере.

я не имел ввиду, что твой пример плохой, просто он таблицами, а все в последнее время начали глобально переходить на дивы, а с ними такое сделать посложней...

но это, в принципе, не важно. короче, у тебя нормальный пример. точка.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy