Наложение div-ов с прозрачными картинка друг на друга

Tigrish · June 29, 2009

Билась над этой проблемой всю ночь, но работать корректно оно не хочет.

Есть 3 дива: 1 с нижней большой картинкой, второй с прозрачной картинкой-закладкой поверх 1 и 3 див с текстом и фоном прозрачным, который тоже поверх большой картинки. Они нормально друг на друга накладываются, НО при этом под большой картинкой появляется отступ равный по высоте двум нижним дивам (хотя сами дивы висят на месте).

Отсуп есть во всех браузерах, включая IE6.

Вот код:

HTML:

...

<img src='img/news/img.png>' width='730' height='315' style='border: 1px solid #606060;' />

</div>

</td>

...

CSS:

#actual5, #big_main_foto, #text_in_grey_scale { position: relative; }

#big_main_foto { z-index: 1; top: -101px; }

#actual5 { z-index: 2; left: 0px;}

#text_in_grey_scale { z-index: 3; bottom: 60px; left: 0px; height: 60px; background: url("/img/actual_greyscale.png"); }

Причем большая картинка (id='big_main_foto') имеет серую рамочку, которая идет вокруг этого отступа.

Есть еще одна неприятная мелочь. В ИЕ6 #actual5 не хочет позиционироваться к левому краю, а упорно стоит ровно посередине.

Картинку скриншота можно глянуть здесь. Оранжевая закладка это #actual5. (В ИЕ6 она находиться точно на лбу у девушки Confused )Текст можно надо поднять на картинки, но для этого надо увеличить значение его позиции bottom: до 150 (примерно), а это высота всего отступа, которого не должно быть.

Кто может помочь разобраться?! Буду очень благодарна.

3ABAPKA · June 30, 2009

пробуй так

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}


#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
padding: 4px 0;
}


</style>


</head>
<body>
<div id="maincontainer"><!-- сюда можно девочку вставить лучше фоном -->

<div id="topsection"><!-- можно использовать для оранжевой полоски лучше фоном--></div>

<div id="contentwrapper">
<div id="contentcolumn">
							   <!-- сюда можно вставить черный отступ с белыми буквами -->
</div>
</div>

<div id="leftcolumn"><!-- можно еще для чего-нить использовать --></div>

<div id="rightcolumn"><!-- можно еще для чего-нить использовать --></div>

<div id="footer"><!-- можно можно использовать как отступ --></div>

</div>
</body>
</html>

Вообще должно работать, надо только чуть-чуть доработать

Tigrish · June 30, 2009

Вот это код под копи-паст. Там очень хорошо виден отступ внизу. Никак не могу понять откуда он берется.

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>  </title>
<style type="text/css">

body { color: yellow;}

img {margin: 0, padding: 0;}

#actual5, #big_main_foto,  #text_in_grey_scale { position: relative; /* Относительное позиционирование */  } 
#big_main_foto { top: -100px;  }
#big_main_foto 	{ z-index: 1; }
#actual5 		{ z-index: 2; left: 0px; top: 0;}
#text_in_grey_scale  { z-index: 3; color: #FFFFFF; top: -180px; left: 0px; height: 60px; background: url("http://www.oetv.lv/img/actual_greyscale.png"); padding: 15px 0 0 20px; text-align: left; font-size: 20px; font-weight: bold;	} 


</style>


</head>
<body bgcolor='#000000' >
<table width="730" border="1" cellspacing="0" align='center' cellpadding="0" >

				<tr><td valign='top' bgcolor='white'> 
					 		<img id='actual5' src='http://www.oetv.lv/img/actual5.png' width='171' height='99' border='0' /> 


							<a href='' style=' color: #FFFFFF;' id='big_main_foto'>
								<img src='http://www.oetv.lv/img/news/f_17524143.gif' width='730' height='315'  style='border: 1px solid #606060;' /> 
							</a>	
							<div id='text_in_grey_scale' width='100%' > tekst </div> 
				</td></tr>
</table>				


</body>
</html>

Razor · June 30, 2009

может из-за position: relative; ? Тогда ведь место, занимаемое блоком в начальной позиции также и остается занятым, хотя блок в другом месте

Yaroslavovich · April 12, 2011

Новый вопрос - новая тема

Edited April 13, 2011 by Great Rash

Sign In

Наложение div-ов с прозрачными картинка друг на друга

Question

Tigrish

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

3ABAPKA

Link to comment

Share on other sites

Tigrish

Link to comment

Share on other sites

Razor

Link to comment

Share on other sites

Yaroslavovich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information