position:fixed и ie6

mozart · June 19, 2009

Доброго времени суток!

Задача следующая: зафиксировать панельку сверху тут. Фикс (

body > #SupportPanel {position:fixed;}

) в сумме с

#SupportPanel {position:absolute;}

и

<!--[if IE 6]>
<style type="text/css">
html {
	overflow:hidden;
	}

body {
	height:100%;
	overflow:auto;
	}
</style>
<![endif]-->

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

как раньше..

можеть быть кто знает где я допустил ошибку или какой другой способ зафиксировать панельку в осле? (толкового java е нашел (()

Буду очень благодарен за помощь!

P.S. Хостинг бесплатный, поэтому не взещите, тормаз еще тот, и не всегда с первого раза загружает все что надо..

psywalker · June 19, 2009

Разберёшься тада сам, мне лениво отбирать то, что касается твоего вопроса!

Вот эмуляция Фиксида

<!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>Untitled Document</title>
<style type="text/css">
div.fix{ background: left top no-repeat; width: 200px; height: 200px; position: absolute; left: 20px; top: 30px;}
html, body{
	width:100%;
	height:100%;
	overflow:hidden;
}
.over{ position: relative; width: 99%; height: 100%; overflow: auto;}
.one{ position: absolute; bottom: 0; right:0; background: #900;}
</style>
</head>

<body>
 <div class="one">fdfddf</div>
 <div class="fix">1</div>
 <div class="over"><p></p></div>
</body>
</html>

А вот отдельные варианты:

1-й вариант

<!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>Position Fixed</title>
<style type="text/css">
#wrapper {
  width: 642px;
  margin: 0 auto;
  padding-right: 243px;
}
#container {
  position: relative;
  z-index: 10;
  background: #00F;
}
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #960;
}
.fixed {
  position: relative;
  width: 240px;
  margin: 0 auto;
  top: 10px;
  left: 323px;
  background: #F00;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#fixed {
  position: absolute;
  top: expression(parseInt(document.documentElement.scrollTop, 0) + "px");
  left: 50%;
  margin-left: -321px;
}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">

  <div id="container">
основное содержание страницы
  </div>

  <div id="fixed">
	<div class="fixed">
блок, который надо зафиксировать
	</div>
  </div>

</div>
</body>
</html>

2-й вариант

<!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>form</title>
<style type="text/css">

*{ margin:0; padding:0;}
img { border: none; vertical-align: middle;}
body { font: 12px Verdana, Geneva, sans-serif; color: #000; background: #C33;}
p { margin: 7px 0;} 

form { width: 580px; background: #FCF; overflow: hidden; padding: 10px 4px;}
form span { display: block; padding-left: 100px;}
input[type="text"] { width: 440px; padding: 6px 5px; padding-left: 5px;}
textarea{ width: 450px;}
input[type="button"]{ float: right; padding: 3px 10px; margin-right: 10px;}
input[type="radio"] { vertical-align: baseline;}
select{ vertical-align: middle; width: 183px; padding: 5px;}
label { width: 100px; float: left;}
div { padding-left: 100px; margin: 3px 0 10px;}
div label { float: none; 7vertical-align:middle; margin-right: 10px;}



body{
padding:5em 0 0 0;
}
h1{
position:fixed;
_position:absolute;
top:0;
_top:expression(eval(document.documentElement.scrollTop));
left:0;
margin:0;
padding:0;
background:lime;
}


</style>
</head>

<body>

<h1>dfasff sd fasffsdf</h1>


   <form action="#">
	 <p><label for="text">Тема</label><input type="text" value="Название темы" /></p>
	 <p><label for="text">ВВ-коды</label><select><option>размер</option><option>размер2</option></select>
		<a href="#"><img src="form-over-img.jpg" alt="" /></a> <span>Подсказка: выше расположены кнопки быстрого форматирования</span>
	 </p>
	 <p><label for="text">Сообщение</label><textarea name="text" id="text" cols="30" rows="10"></textarea></p>

	 <div>Тип топика: <input type="radio" /><label> Обычный</label>
				   <input type="radio" /> <label>Обычный</label>
				   <input type="radio" /><label>Обычный</label>
				   <input type="radio" /><label>Обычный</label>

	 </div>
	 <input type="button" value="предпросмотр" /><input type="button" value="отправить" />
   </form>

</body>
</html>

Edited June 19, 2009 by psywalker

gordi · June 21, 2009

Задача следующая: зафиксировать панельку сверху тут.

Посмотрите страницу по вашему линку при уменьшении размеров окна браузера.

С появлением горизонтальной прокрутки, двигая ее, обратите внимание на следующее:

зафиксированный горизонтальный блок остается на месте,

а область контента расположенная ниже, перемещается.

Забудьте о стилевом правиле {position:fixed;}

Сделайте его эммуляцию на основе {position:absolute;}

Как это сделать читаем и смотрим здесь.

psywalker · June 21, 2009

gordi

Отлично дружище, ты всегда был на высоте, я учился на некоторых твоих приёмах, но единственное, что мне не нравится в твоих решениях, страшная замороченность со множеством элементов и хаков, но сами идеи и их цели вызывают радость...

p.s. - одна вот эта жесть что стоит http://fixed.name/examples/lcf.htm

p.s.s. - Кстати всегда хотел узнать, а кто такой Мистер Ласто?

Edited June 21, 2009 by psywalker

gordi · June 22, 2009

gordi
Отлично дружище, ты всегда был на высоте, я учился на некоторых твоих приёмах, но единственное, что мне не нравится в твоих решениях, страшная замороченность со множеством элементов и хаков, но сами идеи и их цели вызывают радость...

Думаю, как раз на оборот

Всегда стремился к минимуму этого добра

gordi
p.s. - одна вот эта жесть что стоит http://fixed.name/examples/lcf.htm

А что здесь не так?

gordi
p.s.s. - Кстати всегда хотел узнать, а кто такой Мистер Ласто?

Lasto

psywalker · June 22, 2009

gordi

1)

Думаю, как раз на оборот smile.gif
Всегда стремился к минимуму этого добра smile.gif

Да не скажи, я помню твои творения дивов вложенных в друг друга, по 10 слоёв, для тянущихся колонок, что аж можно запутаться..

2)

p.s. - одна вот эта жесть что стоит http://fixed.name/examples/lcf.htm biggrin.gif
А что здесь не так?

Большой код на мой взгляд...

3) Насчёт Ласто спасибо, буду знать!

gordi · June 22, 2009

1)
Да не скажи, я помню твои творения дивов вложенных в друг друга, по 10 слоёв, для тянущихся колонок, что аж можно запутаться..

Когда это было

Сейчас стандартаная трех колоночная разметка

содержит максимум 5 контейнеров, при иллюзии равной высоты колонок.

2)
Большой код на мой взгляд...

Это демо, сделаете меньше буду только рад

3) Насчёт Ласто спасибо, буду знать!

psywalker · June 22, 2009

gordi

Да не скажи, я помню твои творения дивов вложенных в друг друга, по 10 слоёв, для тянущихся колонок, что аж можно запутаться..
Когда это было smile.gif
Сейчас стандартаная трех колоночная разметка
содержит максимум 5 контейнеров, при иллюзии равной высоты колонок.

А можно мне пример, в котором будет находиться: Шапка, Три колонки(в центре), Футер прижатый к полу конечно. Нужно, что-бы колонки в центре растягивались на всю высоту, причём всё это с минимальным кодом, очень интересненько позырить

gordi · June 22, 2009

А можно мне пример, в котором будет находиться: Шапка, Три колонки(в центре), Футер прижатый к полу конечно. Нужно, что-бы колонки в центре растягивались на всю высоту, причём всё это с минимальным кодом, очень интересненько позырить

Приблизительно так

psywalker · June 22, 2009

gordi

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

gordi · June 22, 2009

gordi
ну блин, вот про это я и говорил,

Ну если это вам показалось сложным, хотя ничего сложного там нет,

все четко структурировано и по html-коду и стилям,

то не знаю

Делайте таблицами

psywalker · June 22, 2009

gordi

Ну если это вам показалось сложным, хотя ничего сложного там нет,
все четко структурировано и по html-коду и стилям,
то не знаю smile.gif
Делайте таблицами smile.gif

Это для тебя не сложно, потому что ты ночами сидел, размышлял, думал, писал код, ты его уже наизусть знаешь и тебе кажется, что ничего сложного, а я например зашёл и охренел от обилия кода, даже не знал, с чего начать разбираться, Как можно понять, Три отделения шапки, Три Футера, и т. д. - жесть!

Вот смотри, почему бы просто не начать так:

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

<body>
	<div class="hdr">HEADER</div>

	<div class="wrap">
		<div class="left">LEFT</div>
		<div class="cnt">CONTENT</div>
		<div class="right">RIGHT</div>
	</div>

	<div class="ftr">FOOTER</div>
</body>
</html>

ВСЁ! - этого достаточно, и уже с этим материалом работать, зачем всякие параграфы, множества лишних дивов и т. д. Для начала легче и правильно учиться на лёгких примерах, а не на той жести по ссылке, нахрена нужны 5 шапок, 4 футера и т. д. Это что касается HTML, а теперь переходим к CSS, такая же Жесть! Опять-же зачем так запутанно группировать все объявления, зачем писать много лишних свойств и значений? Почему-бы просто не сделать так Например:

<style type="text/css">
	html {}
	body {}

	div.hdr {}

	div.wrap{}
		div.left{}
		div.cnt {}
		div.right {}

	div.ftr {}
</style>

И ВСЁ! Просто и понятно, для каждого селектора свои объявления, и разобраться будет 5 секунд..

p.s. - щас зашёл опять посмотреть, вот ради прикола сравни мою запись с этой:

<div class="header">
  <div class="wrap">
	<div class="center"><p>Header Center</p></div>
	<div class="left"><p>Header Left</p></div>

	<div class="right"><p>Header Right</p></div>
  </div>
</div>

<div class="middle">
  <div class="wrap">
	<div class="center">
	  <p>Middle Content</p>
	  <p class="expand"><a href="#">Делаем колонку длиннее</a></p>

	  <div class="box_500"><p>width:500px;</p></div>
	</div>
	<div class="left">
	  <p class="expand"><a href="#">Делаем колонку длиннее</a></p>
	  <p>Middle Left</p>
	</div>
	<div class="right">

	  <p class="expand"><a href="#">Делаем колонку длиннее</a></p>
	  <p>Middle Right</p>
	</div>
  </div>
</div>

<div class="submiddle">
  <div class="wrap">
	<div class="center"><p>Доп. блок Center</p></div>

	<div class="left"><p>Доп. блок Left</p></div>
	<div class="right"><p>Доп. блок Right</p></div>
  </div>
</div>

<div class="footer">
  <div class="wrap">
	<div class="center"><p>Footer Center</p></div>
	<div class="left"><p>Footer Left</p></div>

	<div class="right"><p>Footer Right</p></div>
  </div>
</div>

Edited June 22, 2009 by psywalker

gordi · June 22, 2009

gordi
Это для тебя не сложно, ...

Теперь в своем коде сделайте так,

чтобы область контента выводилась по html-коду

раньше боковых колонок - SEO куда от него денешься

Реализуйте равную выосту колонок.

Дайте каждой колонке центральной части свой border,

индивидуальную фоновую заливку.

Все без использования графики, чисто стили и html.

И посмотрим, что получится у вас

psywalker · June 22, 2009

gordi

Теперь в своем коде сделайте так,
чтобы область контента выводилась по html-коду
раньше боковых колонок - SEO куда от него денешься smile.gif
Реализуйте равную выосту колонок.
Дайте каждой колонке центральной части свой border,
индивидуальную фоновую заливку.
Все без использования графики, чисто стили и html.
И посмотрим, что получится у вас smile.gif

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

Вот классно было-бы, если бы ты написал код, который был-бы действительно минимальным, семантичным и красивым...

Вот щас за 10 минут накидал вариант, хотя-бы с него можно уже было начать, а потом оптимизировать, сделать конфетку..

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
	html { height: 100%;}
	body { height: 100%; width: 90%; margin: 0 auto;}

	div.hdr { height: 10%; background:  #900; }

	div.wrap { 
		min-height: 80%;
		background: #FFC; 
		overflow: hidden; 
		position: relative;
	}
	div.left, div.cnt, div.right { position: absolute; top: 0; bottom: 0; width: 30%;}	

		div.left { background: #0F0;}
		div.cnt { 
			width: 40%; 
			margin-left: 30%;
			background: #F00;
		}
		div.right { margin-left: 70%; background: #30C;}

	div.ftr { height: 10%; background: #9F0;}
</style>
</head>

<body>
	<div class="hdr">HEADER</div>

	<div class="wrap">
		<div class="cnt">CONTENT</div>
		<div class="left">LEFT</div>
		<div class="right">RIGHT</div>
	</div>

	<div class="ftr">FOOTER</div>
</body>
</html>

Уж куда лучше и намного меньше код, чем у тебя)))

Edited June 22, 2009 by psywalker

gordi · June 22, 2009

gordi
Уж куда лучше и намного меньше код, чем у тебя)))

Ради бога

Я же не настаиваю, что всегда и везде надо делать так, как предложил

Сделаешь, воспользуюсь с удовольствием.

psywalker · June 22, 2009

Ради бога smile.gif
Я же не настаиваю, что всегда и везде надо делать так, как предложил smile.gif
Сделаешь, воспользуюсь с удовольствием.

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

gordi · June 22, 2009

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

Кто же спорит

gordi · June 22, 2009

Вот твой пример в минимальной моей редакции:

Линк

На нем четко видно, какие трудности подстерегают при

использование абсолютного позиционирования,

для создания колонок равной высоты.

Про проблемы IE6 даже неговорю.

psywalker · June 22, 2009

gordi

Вот твой пример в минимальной моей редакции:
Линк
На нем четко видно, какие трудности подстерегают при
использование абсолютного позиционирования,
для создания колонок равной высоты.
Про проблемы IE6 даже неговорю.

Да нее, это я понял, способ у меня говно - это явно! Но я вообще в принципе имел ввиду

gordi · June 22, 2009

Да нее, это я понял, способ у меня говно - это явно! Но я вообще в принципе имел ввиду

Принципы оно дело хорошое.

Но подводные камни, они на каждом шагу

psywalker · June 22, 2009

Принципы оно дело хорошое.
Но подводные камни, они на каждом шагу smile.gif

даа, это точно!

Sign In

position:fixed и ie6

Question

Link to comment

Share on other sites

20 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

Join the conversation

Обсуждения

Important Information