Засунуть блок под блок (размеры резиновые)

iillyyaa2 · May 31, 2011

вся проблема заключается в том, что размеры все резиновые...

красный блок должен быть под остальными блоками (он содержит фон)

большой блок над ним будет иметь поле onclick

2 верхних поля должны быть отцентрированны и размер их больше чем красный блок

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

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

psywalker · May 31, 2011

под ие6 помню, ты вроде давал код как лечить... но всё равно чуть не так...

Один в один.

iillyyaa2 · May 31, 2011

красный блок 67х67 точек, это всё что статично.

сверху над ним должен быть блок для клика мышкой хотя может быть и сам блок кликабельным

psywalker · May 31, 2011

красный блок 67х67 точек, это всё что статично.
сверху над ним должен быть блок для клика мышкой хотя может быть и сам блок кликабельным

Ну так решение тебе уже привели, подсказок дали море, дальше думаю сам уже допилишь.

iillyyaa2 · May 31, 2011

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

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

psywalker · May 31, 2011

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

Зачем им абсолют? Ведь они выполняют свою задачу и без него? Растягивают общий контейнер и контент под ними?

iillyyaa2 · May 31, 2011

вот, я сделал, работает отлично.

только проблема, в 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">
<style>
div {
	display: block;
}
.float_left {
	float: left;
}
.clear_left {
	clear: left;
	float: none;
}
div.BoxFull {
	float: right;
	position: relative;
	margin: 5px;
	height:67px;
}
div.Box {
	position: relative;
	color: #ffffff;
	font-weight: bold;
	margin: -67px 0 0 0;
}
div.Box div.float_left {
	padding: 0 3px 3px 3px;
	float: left;
	background: #6A4D24;
}
.img {
	width:67px;
	height:67px;
	background: #FF0000;
	position: relative;
	cursor:pointer;
	//z-index: -1;
}
</style>

<div>
	<div class="BoxFull" align="center">
		<div class="img" onclick="alert(1);"></div>
		<div class="Box">
			<div class="float_left">что-то</div>
			<div class="float_left">123</div>
			<div class="clear_left"></div>
		</div>
	</div>
	<div style="clear: both;"></div>
ddddd
</div>

Edited May 31, 2011 by iillyyaa2

psywalker · May 31, 2011

Блин, ну ты даёшь короче. Решение, которое я привёл, ничем не хуже вроде и выполняет твою задачу, тем-более если у тебя размеры фикс)

iillyyaa2 · May 31, 2011

красный квадрат кликабельный

но он уходит под верхних 2 квадрата, и это поле не кликабельно становится

размер только красного квадрата фиксированный.

в любом случае в твой код нужно добавлять ещё 1 блок и что то поднимать margin-ом

вот лучше подскажи, почему в ie6 красный квадрат сверху ?? он перекрывает те коричневые блоки... а должен быть под ними.

psywalker · May 31, 2011

.img {
        width:67px;
        height:67px;
        background: #FF0000;
        position: relative;
		z-index: -1;
}

iillyyaa2 · May 31, 2011

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

из за этого боялся... но нету у меня фф2 надеюсь их не много

пришлось ещё margin на padding поменять, а то в ie6 не заливался почему то контейнер...

фух, спасибо

psywalker · May 31, 2011

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.
из за этого боялся... но нету у меня фф2 надеюсь их не много

Да, ФФ2 ещё пользуется огромное кол-во людей, целых 0.1% в месяц

iillyyaa2 · May 31, 2011

короче 4.0.1 фф тоже в самый низ запихивает, пришлось поставить

//z-index: -1;

Edited May 31, 2011 by iillyyaa2

psywalker · May 31, 2011

короче 4.0.1 фф тоже в самый низ запихивает, пришлось поставить
//z-index: -1;

Ужасно

* html вот так даже было бы лучше.

iillyyaa2 · May 31, 2011

короче 4.0.1 фф тоже в самый низ запихивает, пришлось поставить
//z-index: -1;
Ужасно
* html вот так даже было бы лучше.

напиши, как должен выглядеть стиль ? я не сильно шарю в том, на что нет док

особенно в том, что называется "хаком"

Sign In

Засунуть блок под блок (размеры резиновые)

Question

Link to comment

Share on other sites

39 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