Проблемка с clear ((

alexander.parphenuyk · September 30, 2009

Хочу создать такой макет...:

1.header с заданной высотой... ширина:100% (минимальная ширина:1004px)

2.Сайдбар(левый) фиксирован по ширине.... по высоте тенятся в зависимости от контента...

3.#content_center - блок фиксирован по ширине, тянется виз... (в зависимости от наполнения контентом)

4.#content_right - резиновый блок, тянется вниз и вправо... (в зависимости от наполнения контентом)

5.#content_foot - резиновый блок, тянется вниз и вправо... находится под блоками: #content_right и #content_center

6.footer с заданной высотой... ширина:100% (минимальная ширина:1004px)

Вот так это выглядит на рисунке:

——————

Архив с моей вёрсткой

Посмотреть можно тут

——————

Практически всё получилось кроме одного.... блок #content_foot становится под #content_right, а мне надо чтобы он становился сразу под

#content_right и #content_center , я хотел взять их в отдельный блок, снизу вставить блок с {clear:both;}, но тогда #content_foot

опускается ниже сайдбара, а это соовсем не то что надо (( Вот и получилось вот такое: Посмотреть можно тут

3ABAPKA · September 30, 2009

#content_foot {

clear:left;

width: 100%;

background-color:#e0c1a2;

}

psywalker · September 30, 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">
*{ margin: 0; padding: 0;}
	body { min-width: 700px; _width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");}
	div.head { height: 100px; background: #a7a7a7; }
	div.sidebar { float: left; width: 300px; background: #fee1d1;}
	div.case_content { overflow: hidden; _zoom:1; }
		div.case_content div#content_center { float: left; width: 300px; background: #adffe8;}
		div.case_content div#content_right { overflow: hidden; _zoom:1; background: #f3f3f3;}
		div.case_content div#content_foot { clear: both; background: #e0c1a2; height: 100px;}

	div.footer { height: 100px; background: #a7a7a7; }
</style>
</head>

<body>
	<div class="head">Header</div>

	<div class="sidebar">Сайдбар(левый) фиксирован по ширине.... по высоте тенятся в зависимости от контента...</div>
	<div class="case_content">
		<div id="content_center">блок фиксирован по ширине, тянется виз... (в зависимости от наполнения контентом)</div>
		<div id="content_right">резиновый блок, тянется вниз и вправо... (в зависимости от наполнения контентом)</div>
		<div id="content_foot">резиновый блок, тянется вниз и вправо.</div>
	</div>

	<div class="footer">Footer</div>
</body>
</html>

Edited September 30, 2009 by psywalker

alexander.parphenuyk · September 30, 2009

Можно пару вопросиков:

1. {_zoom:1} - что даёт это свойство?

2. В чём преимущество DTD XHTML 1.0 Strict перед DTD XHTML 1.0 Transitional ?

Просто как то сам если верстаю что-то, то переходной стиль использую..... А все как то больше строгий.... А в чём преимущество сам толком не понимаю.. (

psywalker · September 30, 2009

Можно пару вопросиков:
1. {_zoom:1} - что даёт это свойство?
2. В чём преимущество DTD XHTML 1.0 Strict перед DTD XHTML 1.0 Transitional ?
Просто как то сам если верстаю что-то, то переходной стиль использую..... А все как то больше строгий.... А в чём преимущество сам толком не понимаю.. (

1) Всё что в начале названия имеют _, предназначены для ИЕ6, это такой как бы хак для него, который видит только этот браузер. А вообще zoom:1; - это запатентованное средство Микрософт, создано для того, чтобы лечить всякие баги в браузерах ИЕ6-7

2) Этот Доктайп более строгий, соответственно код более чистый и правильный, так как ошибки тут не прощаются, я так привык уже

alexander.parphenuyk · September 30, 2009

понятненько..... пасиб.. буду разбираться..

psywalker · September 30, 2009

понятненько..... пасиб.. буду разбираться..

Да не за что, пиши если чё

alexander.parphenuyk · October 1, 2009

А вот почему мой вариант не работал? всё таки хочу разобраться... прописал так как посоветовал ЗАВАРКА, но В общем то оно не сильно помогло ( меня не устраивает то что #content_foot находится под сайдбаром( как от этого избавиться?

psywalker · October 1, 2009

А вот почему мой вариант не работал? всё таки хочу разобраться... прописал так как посоветовал ЗАВАРКА, но В общем то оно не сильно помогло ( меня не устраивает то что #content_foot находится под сайдбаром( как от этого избавиться?

аа, тоесть мой вариант ты вообще послал на хрен, да? Ну пральна в принципе, ни к чему всё это

3ABAPKA · October 1, 2009

#content_center {
	width:400px;
	float:left;
	background-color:#adffe8;
	clear: right;				//Это скорее всего лишнее
}
#content_right {
		float:left;				   //это думается лучше добавить
		background-color:#f3f3f3;
	margin-left: 400px;
	clear: none;			  //Это скорее всего лишнее
}

alexander.parphenuyk · October 1, 2009

аа, тоесть мой вариант ты вообще послал на хрен, да? Ну пральна в принципе, ни к чему всё это

Не, твой вариант замечательный, я его к себе в шаблоны добавил, пасиба... Просто хочу разобраться в чём дело у меня... осознать ошибку...

Просто мне главное понять как это работает...

2 3ABAPKA

некатит...

psywalker · October 1, 2009

Не, твой вариант замечательный, я его к себе в шаблоны добавил, пасиба... Просто хочу разобраться в чём дело у меня... осознать ошибку...
Просто мне главное понять как это работает...
2 3ABAPKA
некатит...

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

alexander.parphenuyk · October 1, 2009

футер к низу это не принципиально.....)) хотя желательно ))) У тебя суперский тэмплэйт

Просто хочу допереть как это работает

Edited October 1, 2009 by alexander.parphenuyk

alexander.parphenuyk · October 1, 2009

Я вот делаю резинавый шабло с помощью отрицательного маргина.. Бывает накидаю в него чегонить и вся вёрстка летит...

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

Как таким макаром сделать трёхкалоночный макет.... с двумя фиксмороваными сайдабарми по краям и резиновым центральным контентом...?

psywalker · October 1, 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" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
		body{ min-width: 700px;}
		div.right { float: right; width: 300px; background: red;}
		div.left { float: left;}
		div.content { overflow: hidden; _zoom:1;}
</style>
<title></title>
</head>

<body>
	<div class="right">RIGHT</div>
	<div class="left">LEFT</div>
	<div class="content">CONTENT</div>
</body>
</html>

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

Sign In

Проблемка с clear ((

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