Изображения в блоке

imariki · August 11, 2009

Всем добрый день!

У меня возникла проблема с тремя рисунками. Почему при добавлении нового рисунка в том же блоке неправильно вычисляет высоту с использованием position: relative? Вот пример:

<div id="container">
<div id="top">
<div class="top_2"></div>
<div class="top_3"></div>
<div class="top_4"></div>
</div>
</div>

В общем, если смотреть на страницу, то всё правильно показывает. Только не понятно почему когда есть position: relative, при добавлении второго рисунка, он берёт высоту относительно предыдущего рисунка. Если добавлять третий рисунок, тогда совсем не понятно как он там вычисляет высоту. Может, я совсем не так верстаю?

psywalker · August 11, 2009

Я так не вчитывался в код особо, но вроде бы всё правильно, так и должно быть, Релатив идёт также потоком, как и остальные блоки и также не выпадает из него. Может тебе попробовать position: absolute?

imariki · August 11, 2009

У меня фиксированный макет и он располагается по середине браузера. Если поменять разрешение экрана, то не подойдёт absolute.

psywalker · August 11, 2009

У меня фиксированный макет и он располагается по середине браузера. Если поменять разрешение экрана, то не подойдёт absolute.

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

imariki · August 11, 2009

- top.gif

- top_2.gif

- top_3.gif

- top_4.gif

Выглядет это так: http://imariki.times.lv/maket/maket.html

На примере нет ошибок, хотя если ещё дополнять картинками, дальше приходится примерно подбирать подходящую высоту.

Мне нужно сделать скругленые углы в самом низу этого блока, а по середине должен повторяться top3.gif до самого второго угла. Раньше пробовал позиционировать, но не получалось. Теперь хочется разобраться.

psywalker · August 11, 2009

http://forum.htmlbook.ru/index.php?s=&...st&p=109859

imariki · August 12, 2009

Значит, нужно делать полные изображения и потом при помощи позиционирования накладывать углы поверх или надо пользоваться таблицами?

psywalker · August 12, 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=windows-1251">
<title></title>
</head>

<style type="text/css">
*{ margin: 0; padding: 0;}
body,html { height: 100%;}

	div.box { 
		min-height: 100%; 
		background: red; 
		width: 700px; 
		margin: 0 auto;
		position: relative;
	}


	div.tl,
	div.tr,
	div.bl,
	div.br { position: absolute; width: 100px; height: 100px; background: blue;}

	div.tl { left: 0; top: 0;}
	div.tr { right: 0; top: 0;}
	div.bl { left: 0; bottom: 0;}
	div.br { right: 0; bottom: 0;}

	div.center {
			  position: absolute; 
			  width: 200px; 
			  height: 200px; 
			  top: 50%;
			  left: 50%; 
			  margin-left: -100px; 
			  margin-top: -100px; 
			  background: yellow;

		}

</style>
 <!--[if IE 6]>
 	<style type="text/css">
		div.box { height: 100%;} - /* это специально для ИЕ6 */
	</style>
 <![endif]-->
<body>
<div class="box">
	<div class="tl">Верхний левый угол</div>
	<div class="tr">Верхний правый угол</div>
	<div class="bl">Нижний левый угол</div>
	<div class="br">Нижний правый угол</div>

	<div class="center">Этот блок всегда будет по середине "div.box" независимо от его высоты!  </div>
</div>

</body>
</html>

Edited August 12, 2009 by psywalker

imariki · August 14, 2009

Класно получается! Спасибо! Значит, с остальными изображениями где повторяется фон также использовать как и в примере. Внизу слоя тоже самое сделал с тенью, очень хорошо выглядет! Ещё вопрос, у меня тень находится под слоём, после добавления следующего слоя приходится добавлять margin: 4px;. Это вроде бы нормально потому что, у тени отрицательный bottom? Главное, что высоту не приходится подбирать примерно.

Edited August 14, 2009 by imariki

psywalker · August 14, 2009

Класно получается! smile.gif Спасибо! Значит, с остальными изображениями где повторяется фон также использовать как и в примере. wink.gif Внизу слоя тоже самое сделал с тенью, очень хорошо выглядет! smile.gif Ещё вопрос, у меня тень находится под слоём, после добавления следующего слоя приходится добавлять margin: 4px;. Это вроде бы нормально потому что, у тени отрицательный bottom? Главное, что высоту не приходится подбирать примерно. smile.gif

Не за что, а вот насчёт вопроса про тень не понял немного, смотри вобщем по ситуации

Sign In

Изображения в блоке

Question

imariki

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

imariki

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

imariki

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

imariki

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

imariki

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information