Проблема с относительным позиционированием в IE7 - Форум успешных вебмастеров

Женя · 22.04.2009, 23:53

Здравствуйте!!
Верстаю сайтик на div, делаю это в первые, столнулась с проблемой.
задача состоит в том, чтобы на картинке разместить блок (в будущем это выпадающее меню) и чтобы при изменении щирины экрана этот блок всегда находился в одном и том же месте по отношению к картинке (при уменьшении.увеличении тоже). В дальнейшем название меню планируется менять, так, что контейнеры с фиксированной шириной не подходят. Как я понимаю картинку нужно поместить в относительно позиционированыый блок, к котором уже абсолютно отпозиционирован блок. По крайней мере такое работает везде, кроме IE7.
Заранее спасибо.

zlaya ssuka · 23.04.2009, 00:02

Цитата:

Сообщение от Женя

Как я понимаю картинку нужно поместить в относительно позиционированыый блок, к котором уже абсолютно отпозиционирован блок.

По моему это везде работает криво. А зачем относительно позиционировать картинку? почему просто не пихнуть ее в нормал флоу?

Женя · 23.04.2009, 00:25

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
  <LINK href="css/Untitled-2.css" rel="stylesheet"
        type="text/css">

</head>

<body>

<div align="center" style=" max-width: 800px; min-height: 800px;"><img src="image/meb_personal.png""/>
<div id="v2">
  <b class="v1">
  </b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
  <div class="text">
     <h1>Мебель</h1>
  </div>
  <b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>
</div>
</body>
</html>

в css

Код:

* {margin: 0; padding: 0}
body {
  font: 14px/17px "Trebuchet MS", tahoma, arial;
	text-align: justify;
	background: #FFCCFF;
}
a {color: #0094D6}
p {
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 13px;
}
#v1, #v2, #v3 {
 width: 20%;
 height: 2%;
 margin-top: -20%;
 margin-left: -5%;
 min-width: 200px;
}

h1 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	padding: 9px 0 14px;
}
#v1 h1 {color: #F40000;}
#v2 h1 {color: #DFDF00;}
#v3 h1 {color: #00AA00;}
.text {
	border: 1px solid #B0BCC2;
	border-width: 0 1px;
	padding: 5px 10px;
	background: #FFFFFF;
}

.v1, .v2, .v3, .v4, .v5 {
	height: 1px;
	font-size: 1px;
	display: block;
	overflow: hidden;
	border: 1px solid  #B8C3C8;
	border-width: 0 1px;
	background: #FFFFFF;

}
.v1 {margin: 0 5px; background: #B8C3C8; /*border: #000000 1px solid;*/}
.v2 {margin: 0 3px; border-width: 0 1px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}

one · 23.04.2009, 11:12

Фиксируй размеры блоков. Делай родительский див фиксированным и в нем фе же уже все остальное...