Позиционирование

AiVeR · March 8, 2009

Всем привет, есть такое задание. Есть прямоугольник, в нём данная фоновая картинка, прямоугольник в рамке данного цвета. Прямоугольник посередине страницы. Делим этот прямоугольник на 2 части и в каждую часть посередине ставим круг. Не получается сделать это.

Вот точто я смог сделать:

http://l2-infinity.com.ua/tempus/default.html

Заранее спасибо.

Vlad · March 8, 2009

А в чем вопрос?

AiVeR · March 8, 2009

Попробуй изменить размеры экрана. Будет выглядеть не так как надо.

Vlad · March 9, 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 content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css" media="all">
body, html {
height: 100%;
}
body {
  margin: 0;
  background: #000;
}
.bg {
	position: relative;
	top: 10%;
	height: 80%;
	width: 300px;
	background: url(bg.jpg);
	border: 4px double aqua;
  margin: 0 auto 0;
}
.krug1, .krug2 {
	position: absolute;
	background: url(krug.gif) no-repeat;
	width: 100px;
	height: 100px;
	left: 100px;
}
.krug1 {
  top: 25%;   
  margin-top: -50px;
}
.krug2 {
  bottom: 25%;
  margin-bottom: -50px;
}
</style>
</head>
<body>
<div class="bg">
  <div class="krug1"></div>
  <div class="krug2"></div>
</div>
</body>
</html>

AiVeR · March 9, 2009

Спасибо, сейчас буду разбирать код :lol:

У меня в ИЕ прямоугольник не по центру. И ещё одно:

когда сжимаю или стягиваю вниз и вверх, то оно налаживается друг на друга.

Заранее спасибо =)

Edited March 9, 2009 by AiVeR

Vlad · March 9, 2009

Добавь min-height

AiVeR · March 9, 2009

Не очень понял с мин min-height. И всё так же не центрально на ИЕ =(

Vlad · March 9, 2009

min-height устанавливает минимальную высоту блока. При достижении этого значения блок уменьшаться больше не будет.

Версия IE? Я проверял в IE6,8

AiVeR · March 9, 2009

Понял.

ИЕ у меня 7.

С высотой не получается =( Если не сложно, покажи на этом примере.

Edited March 9, 2009 by AiVeR

VooFoo · March 9, 2009

min-height устанавливает минимальную высоту блока. При достижении этого значения блок уменьшаться больше не будет.
Версия IE? Я проверял в IE6,8

Помоему IE min-height не понимает! :lol:

А хак с процентами не поможет!

Vlad · March 10, 2009

.bg {

min-height: 300px;

}

min-height не работает в IE6, старшие версии понимают это свойство.

VooFoo · March 10, 2009

.bg {
min-height: 300px;
}
min-height не работает в IE6, старшие версии понимают это свойство.

IE6 еще очень многие люди юзают, про нее забывать нельзя! :lol:

Boris.d · March 11, 2009

Я ставлю блоки на IE6,7 при входе на сайт.... И проблем нет

Советую делать то же самое

Edited March 11, 2009 by Boris.d

Victor Ananiev · March 11, 2009

а седьмой трогать ненадо, там багов меньше, и у многих 7 стоит, потому что на 8 не перешли а с 6 ушли)

AiVeR · March 14, 2009

А что центрирует прямоугольник?

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