Бен, это Данила! Ай нид ХЭЛП!

piryaz · July 17, 2009

Попробую объяснить что мне нужно:

Нужен макет в 3 колонки. Левая - навигашка, правая - новости, середина - контент. Сверху хедер, снизу футер. Резиновый. Фишка в следующем. Все три колонки всегда(!!!) должны быть дотянуты до футера (important! вне зависимости от размеров контента колонок, хоть 5 строчек там будет), а футер всегда внизу.

Очень прошу помочь. Если расскажите как сюда картинку не URL вставить - кину жипег.

Просьба не пинать. Чайнег

SelenIT · July 17, 2009

1) Высота хедера и футера известна?

2) Таблицы не предлагать?

piryaz · July 17, 2009

)) Таблицы не предлагать. Высота хедера и футера известна

SelenIT · July 17, 2009

А ширина колонок/всего макета резиновая?

UPD: вообще по таким вводным скорее всего нужно смотреть на что-то вроде этого примера.

Edited July 17, 2009 by SelenIT

piryaz · July 17, 2009

левая 280, правая 212 центр - резина

Да. Твой пример очень похож на правду...

Щас уже мозг немного потек. Завтра посмотрю, спасибо большое)

сходу вопрос по коду: что такое line left, line content и line right. Что они делают

Edited July 17, 2009 by piryaz

SelenIT · July 18, 2009

что такое line left, line content и line right. Что они делают

Рисуют/имитируют нижний бордер колонок. Сами колонки тянутся вниз на 32767px, и лишнее обрезается контейнером — так достигается одинаковая высота.

piryaz · July 18, 2009

Оп! В IE-6 не работает((( Может чего дописать надо?

psywalker · July 18, 2009

Мне щас негде проверять, но возьми поменяй свойство min-height:100%; У #middle НА {height:100%;} - ТОлько сделай это в отдельных стилях Для ИЕ6

piryaz · July 18, 2009

Вопрос в следующем еще. Где-то на просторах сети видел, что можно запретить использование некоторых версий IE. Может 6,0 вообще отключить, тогда мин хейт будет работать везде... Как это сделать?

2-е. Убил хедер в представленном выше коде и сделал резиновый центр. У меня футер за экран уехал. Почему??

И что такое _height ?

Вот код:

<!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>float_lcr</title>
<style type="text/css">
* {margin:0;padding:0;}
html,body {height:100%; _height:auto;}
body {background-color:#fff;}

#footer {
	background-color:#f5f6f7;
	border:#00f 1px solid;
	margin:2px auto 0;
	overflow:hidden;
	position:relative;
	width:100%;
	height:50px;
}
#middle {
	margin:0px auto 0;
	overflow:hidden;
	width:100%;
	min-height:100%;
}
#middle,.content,.left,.right {position:relative;zoom:1;}
.content,.left,.right {
	float:left;
	margin-top:0px;
	margin-bottom:-32767px;
	padding-bottom:32766px;
	overflow-x:hidden;
}
.content {
	background-color:#f5f6f7;
	border:#00f 1px solid;
	margin-right:-100%;
	left:204px;
	width:100%;
}
.left {background-color:#ddd;border:#f00 1px solid;left:0;width:200px;}
.right {background-color:#eee;border:#080 1px solid;float:right;right:0;width:200px;}

.linecontent,.lineleft,.lineright {
	position:absolute;
	bottom:0px;
	overflow:hidden;
}
.lineleft {border-bottom:#f00 1px solid;left:0;width:200px;}
.linecontent {
	border-bottom:#00f 1px solid;
	left:204px;
	width:100%;
}
.lineright {border-bottom:#080 1px solid;right:0;width:200px;}

p {margin:7px;}
.expand a{color:#960;display:block;clear:both;text-decoration:underline;width:180px;}
.expand a:hover{color:green;height:700px;}
</style>
</head>
<body>
<div id="middle">
  <div class="content"><p class="expand"><a href="#">Делаем колонку длиннее</a></p><p>Content</p></div>

  <div class="left"><p class="expand"><a href="#">Делаем колонку длиннее</a></p><p>Left</p></div>
  <div class="right"><p class="expand"><a href="#">Делаем колонку длиннее</a></p><p>Right</p></div>
  <div class="lineleft"></div><div class="linecontent"></div><div class="lineright"></div>
</div>
<div id="footer"><p>Footer</p></div>
</body>
</html>

Edited July 18, 2009 by piryaz

psywalker · July 18, 2009

Вопрос в следующем еще. Где-то на просторах сети видел, что можно запретить использование некоторых версий IE. Может 6,0 вообще отключить, тогда мин хейт будет работать везде... Как это сделать?

А логика где? Если он тебе ненужен, тогда зачем его убивать? Лучше уж пусть в нём хоть как то работает, чем вообще никак

2-е. Убил хедер в представленном выше коде и сделал резиновый центр. У меня футер за экран уехал. Почему??

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

И что такое _height ?

Сам хаками не пользуюсь, но предпологаю, что это Хак для ИЕ6, тоесть свойство, которое поймёт только этот браузер

piryaz · July 18, 2009

Бордеры у блоков тоже добавляют немного ширины к блокам

Прости, каких именно блоков? Не вполне понял... Ткни в код

Только я про футер говорил. Ну и ты, наверное, тоже)

Edited July 18, 2009 by piryaz

psywalker · July 18, 2009

Например этих

.left {background-color:#ddd;border:#f00 1px solid;left:0;width:200px;}

.right {background-color:#eee;border:#080 1px solid;float:right;right:0;width:200px;}

Edited July 18, 2009 by psywalker

piryaz · July 18, 2009

Например этих
.left {background-color:#ddd;border:#f00 1px solid;left:0;width:200px;}
.right {background-color:#eee;border:#080 1px solid;float:right;right:0;width:200px;}

Да, но уехал он существенно круче тех пикселей, которые ты указал, отнюдь не на 1. А именно на высоту самого футера, т.е. на 50рх.

Щас я на экране вижу свои колонки, а футер под "пуском"))

Edited July 18, 2009 by piryaz

psywalker · July 18, 2009

а ну ка заменика вот эти свойства:

#footer {

background-color:red;

height:50px;

margin:2px auto 0;

overflow:hidden;

position:relative;

top:-52px;

width:100%;

z-index:888;

}

Edited July 18, 2009 by psywalker

piryaz · July 19, 2009

Смотри. Все вроде как окей, но если контента сильно до фига, ну как тут http://cdac.ru/Content/fz.html, например.

То футер на каком-то этапе отрезает кусок...

psywalker! Прочел твою подпись - обрыдался. Очень жизненно)))

Плюсом: часть контента уезжает под правую колонку((( Что-то нарушил видимо, когда делал резинку центру.

Edited July 19, 2009 by piryaz

Sign In

Бен, это Данила! Ай нид ХЭЛП!

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information