Jump to content
  • 0

Блок остается на месте


pizzZ
 Share

Question

В общем что имеем:

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

<div id="a">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div id="b"></div>
</div>

В каждом ли еще по ul с свойством display:none

a - posytion:relative;

b - posytion:absolute; bottom:0;

Ну в общем стандартное меню. Теперь если задать ul-aм display:block во всех браузерах высота блока a увеличится, ну и соответственно блок b останется верен bottom:0 и уедет вслед за нижней границей. К сожалению ie6 так не делает, в нем не увеличивается блок a. А значит и блок b остается на месте...

Как бы победить ie используя только css :(

всем заранее спасибо

Link to comment
Share on other sites

Recommended Posts

  • 0

Не, ну так то конеш ни о чём, я то думал что абсолют нужен полюбас

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
#a { border: 1px solid #000;}
#b {
height: 20px;
background: red;
}

ul li { margin: 2px 0; height: 20px; background: blue;}

</style>
</head>

<body>
<div id="a">
<ul>
<li></li>
<li id="tt"></li>
<li><div id="c"></div></li>
</ul>
<div id="b"></div>
</div>
<a href="#" onclick="document.getElementById('tt').style.height='100px';return false;">+100</a>
</body>
</html>

Link to comment
Share on other sites

  • 0
причем тут флоат?

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

при том что можно вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#a { width: 100px; border: 1px solid #000;}
#b { width: 100px; float:left; height: 20px; background: red;}
ul {width: 100px; float:left; clear:both; list-style:none; padding:0; margin:0;}
ul li { margin: 2px 0; height: 30px; background: blue;}
#c { height: 50px;}
</style>
</head>

<body>
<div id="a">
<ul>
<li></li>
<li></li>
<li><div id="c"></div></li>
</ul>
<div id="b"></div>
</div>
</body>
</html>

но это уже оффтоп раз ТС нужно с позишн.

Link to comment
Share on other sites

  • 0

rus, ну я правда не понимаю зачем там флоат нужен.

Убери флоаты - получишь тот же результат.

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

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

Link to comment
Share on other sites

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

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

1. У меня нет верстки.

2. Проблему уже решили, убрав абсолют.

3. Вопрос интересен как сделать с абсолютом :(

З.Ы. Я первый сам предложил убрать абсолют и добавить LI для нижней границы. Это бы все решило. Но хотели именно с абсолютом, что для меня загадка...

Да, флоаты тут вообще не к месту, согласен.

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

Не меняя структуру, и оставив абсолют.

Сейчас это уже чисто спортивный интерес. Я вчера себе всю голову сломал как бы сделать :)

Link to comment
Share on other sites

  • 0
Но хотели именно с абсолютом, что для меня загадка...

а в чем загадка то? зачем лишняя пустая лишка? уж лучше пустой блок после списка.

Не меняя структуру, и оставив абсолют.

Магия какая-то :( поменять верстку не меняя верстки.

Но уже решили значит молодцы

Link to comment
Share on other sites

  • 0
Я в смысле зачем его здесь использовать, можно найти 100 способов как сделать по другому.

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

Что он на это ответит?

Link to comment
Share on other sites

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

Что он на это ответит?

cccr85 (19:58:15 1/12/2010)

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

cccr85 (19:58:27 1/12/2010)

а внатуре, зачем там абсолют?

cccr85 (20:06:44 1/12/2010)

ау

****** (20:07:24 1/12/2010)

ну вот так надо было

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