Персонаж : как его одеть

[klierik]

Здравтствуйте.

Верстаю персонажа. вроде б ничего сложного и все очень поросто:

css

/**************** Man charaster ****************/
.mchar {
	width: 125px;
	height: 285px;
	border: 1px solid #690000;
}
/*** man image ***/
.mimg {
	position: relative;
	z-index: 1;
	margin-top: -285px;
	float: left;
}
/*** char items ***/
.mchar .items {
	width: 125px;
	height: 285px;
	position: relative;
	float: left;
	z-index: 2;
}
.mchar .items div {
	height: 0px;
	width: 0px;
	float: left;
}
.mchar .items div img {
	width: 125px;
	height: 282px;
	position: relative;
}
/* items category z-index */
.mchar gun {
	z-index: 9;
}

xhtml 1.0

	<!-- man charaster -->
	<div class="mchar">

		<!-- items images -->		
		<div class="items">

			<!-- colt lhand -->
			<div><img class="gun" src="images/colt left hand.gif" alt="" /></div>
			<!-- colt rhand -->
			<div><img class="gun" src="images/colt right hand.gif" alt="" /></div>


		</div>

		<!-- man image -->
		<div class="mimg">
			<img src="images/MM2.gif" width="125" height="285" alt="man" />
		</div>

	</div>

ну и собственно во всех нормальных браузерах (даже ИЕ7)

дело обстоит так ка надо!

а вот ИЕ6 накладывает тлько 1й рисунок поверх изображения. все последующие он вставляет выше и опускает вниз низлежщие рисунки.

скажите, пожалуйста, можно ли как-то от этого избавиться?

[Dimitry Wolotko]

Покажите как должно выглядить, пожалуйста.

[klierik]

вот пример.

в руке 2 пистолета. ето отдельные рисунки.

первый ложиться нормально, второй уже опускает все вниз:

все рисунки(как и сам персонаж) имеют одинаковыю высоту и ширину

за счет всего просто накладываються один на один красиво!

[Dimitry Wolotko]

Ну и для полноты картины давайте полные адреса картинок, попробую покапаться - любопытно.

[klierik]

ok вот к примеру парочка:

сам персонаж

http://lsd.com.ua/develope/resize/html/images/MM2.gif

парочка кольтов:

http://lsd.com.ua/develope/resize/html/ima...ight%20hand.gif

http://lsd.com.ua/develope/resize/html/ima...left%20hand.gif

tnx u

[YETI]

Помоему тут абсолютное нужно позиционирование делать

[yopopt]

  klierik said:

...ну и собственно во всех нормальных браузерах (даже ИЕ7)

дело обстоит так ка надо!

а вот ИЕ6 накладывает тлько 1й рисунок поверх изображения. все последующие он вставляет выше и опускает вниз низлежщие рисунки.

скажите, пожалуйста, можно ли как-то от этого избавиться?

Нда...

float:left значит... И position:relative тут-же...

  klierik said:

.mchar .items div {

height: 0px;

width: 0px;

float: left;

}

Css здесь достаточно прост:

.mchar {
 border: 1px solid #690000;
}
.mchar, .mchar .items div, .mchar .items div img {
 width: 125px;
 height: 285px;
 position: absolute;
}
/*** man image ***/
.mimg {
 z-index: 1;
}
/*** char items ***/
.mchar .items div{
 top:0;
 z-index: 2;
}

.mchar .items div img {
 height: 282px;
}

P.S. Перед тем как писать код постарайтесь представить как он должен работать.

[klierik]

весьма..весьма благодарен за код.

я, правда, пока не понял как он работает...

буду разбираться.

еше раз спасибо.

[BogusUA]

пашит так что указывается z-index =)

поправте мну если не прав =)