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

pizzZ · November 30, 2010

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

<!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

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

Great Rash · December 1, 2010

Ничего не понятно.

pizzZ · December 1, 2010

В 6 ie блок b остается на месте

deadrash · December 1, 2010

Я понял и даже сталкивался, но решение таки не нашол.

psywalker · December 1, 2010

Подумай, где тут косяк?

a - posytion:relative;

b - posytion:absolute; bottom:0;

А вообще я уверен на 100%, что задача дурацкая и решается простым паддингом-боттом у блока А

pizzZ · December 1, 2010

position конечно же правильно. Вчера мозг был уставший. в коде тоже правильно.

psywalker said:
А вообще я уверен на 100%, что задача дурацкая и решается простым паддингом-топ у блока А

А как ее так решить? Если высота блока а плавающая, и зависит от контента в вложенных ul. Высоту которых мы не можем установить заранее

psywalker · December 1, 2010

pizzZ said:
А как ее так решить? Если высота блока а плавающая, и зависит от контента в вложенных ul. Высоту которых мы не можем установить заранее

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

pizzZ · December 1, 2010

То есть ее можно решить, приведите пожалуйста пример как.

З.ы. не работает только в ie6

Edited December 1, 2010 by pizzZ

psywalker · December 1, 2010

pizzZ said:
З.ы. не работает только в ie6

Даже так можно

<!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 { position: relative; border: 1px solid #000;}
	#b { width: 100%; position: absolute; bottom: 0; height: 20px; background: red;}
		ul {}
			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>

pizzZ · December 1, 2010

psywalker said:

Даже так можно

<!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 { position: relative; border: 1px solid #000;}
	#b { width: 100%; position: absolute; bottom: 0; height: 20px; background: red;}
		ul {}
			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>

К сожелению не работает, та же самая проблема

<!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">
	#a { position: relative; border: 1px solid #000;}
	#b { width: 100%; position: absolute; bottom: 0; height: 20px; background: red;}
		ul {}
			ul li { margin: 2px 0; height: 30px; background: blue;}
			#c { height: 50px;}
</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="java script: document.getElementById('tt').style.height='100px'; return false;">+100</a>
</body>
</html>

psywalker · December 1, 2010

А ты так пиши

<!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 { position: relative; border: 1px solid #000; padding-bottom: 20px;}
	#b { 
		width: 100%; 
		position: absolute; 
		bottom: 0px; 
		left: 0; 
		height: 20px;
		background: red;
	}
	* html #b { bottom: 20px;}
	#tt { }
		ul { }
			ul li { margin: 2px 0; height: 20px; background: blue;}
			#c {}
</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';
var height = document.getElementById('a').offsetHeight;
document.getElementById('b').style.top = height-20+'px';
 return false;
 ">+100</a>
</body>
</html>

pizzZ · December 1, 2010

а если без js, это возможно?

кстати в ie7 тоже так же работает как и в 6

psywalker · December 1, 2010

pizzZ said:
а если без js, это возможно?
кстати в ie7 тоже так же работает как и в 6

А что значит без ЖС? Ведь изначально всё без ЖС работает.

pizzZ · December 1, 2010

psywalker said:
А что значит без ЖС? Ведь изначально всё без ЖС работает.

Вот без этого желательно

var height = document.getElementById('a').offsetHeight;
document.getElementById('b').style.top = height-20+'px';

p.s. Спасибо тебе что помогаешь, на этом форуме, все вопросы оставленные мной решил именно ты

psywalker · December 1, 2010

pizzZ said:
Вот без этого желательно
var height = document.getElementById('a').offsetHeight;
document.getElementById('b').style.top = height-20+'px';

Вот боюсь, что без этого пахать не будет.

Quote
p.s. Спасибо тебе что помогаешь, на этом форуме, все вопросы оставленные мной решил именно ты

Вот именно, поэтому надо побольше читать, и практиковаться, чтобы если что, самому справится с задачей

pizzZ · December 1, 2010

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

psywalker · December 1, 2010

pizzZ said:
У меня каждый день возникают вопросы, и я лишь в последнюю очередь использую этот форум

Пральна.

mishka · December 1, 2010

дай ка архивчег.

psywalker · December 1, 2010

mishka2 said:
дай ка архивчег.

Да зачем тебе архивчик, бери мой вариант сверху и чини)

mishka · December 1, 2010

избавиться от абсолюта никак?

psywalker · December 1, 2010

mishka2 said:
избавиться от абсолюта никак?

Ты мне?

mishka · December 1, 2010

не, ТС ))

psywalker · December 1, 2010

mishka2 said:
не, ТС ))

Ваще вариант))

rus · December 1, 2010

на float разве не решить это?

то есть без позиционирования вообще.

mishka · December 1, 2010

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

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

pizzZ · December 1, 2010

Говорят надо абсолют

Задачу можно решить и другим способом. Просто сделать дополнительный ли в самый конец, он и будет заменой "блока B".

Это решение предложил я. Но говорят надо не меняя html сделать на css

Sign In

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

Question

Link to comment

Share on other sites

44 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information