Div

Noks · March 9, 2009

у меня вопрос, можно ли задавать координаты размещения слоя от какой либо картинки, а то они у меня на болшем расширение сьезжаютв бок(у меня 1024x768 :lol: )

Victor Ananiev · March 9, 2009

vltkfnm див с раазмерами картинки и дать ему postion:relative; f а том засунуть туда второй див с position:absolute;

Int · March 10, 2009

Я нашёл выход используя span с position: absolute и display: block, в результате он позиционируется относительно своего начального положения. А проблема была в точности такая же.

Noks · March 10, 2009

Спасибо :lol:

Int · March 11, 2009

Вот ведь парадокс, в другом месте того же сайта делаю такой же span, но он ведёт себя совсем по-другому и крутится около угла страницы o_O

И там, кстати, не от начального положения, а от положения объекта, в который он заключен чтоль... Щас ещё потыкаюсь, может пойму закономерность.

Понял :lol: Надо этот span воткнуть в div с position:relative.

Edited March 11, 2009 by Int

Noks · March 12, 2009

чет у меня все без результатно

вот мой html

<html>
<head>
<title>Don't panic</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/buttons.css" >

</head>
<body>
<div style="position: absolute; display:block; width: 549px; height: 474px; z-index: 2; left: 244px; top: 285px" id="history">
     			        <b><u>Lorem ipsum</u></b> dolor sit amet, conse ctetuer adipiscing elit 
					my, 
					sed diam nonum my nibh euismod tincidunt ut laoreet dolore 
					magna aliquam lobortis volutpat. Ut wisi enim ad minim veniam, 
					quis nostrud exerci tation lobortis ullamcorper suscipit lobortis 
					nisl ut aliquip ex ea commodo consequat. 
<img border="0" src="gallery/7.jpg" width="137" height="181" align="left" hspace=7 vspace=7 alt="220 Meduzz">Duis autem vel eum 
					iriure lobortis dolor in hendrerit in vulputate velit esse molestie 
					consequat, vel illum dolore eu feugiat nulla facilisis at 
					vero eros et accumsan et iusto odio dignissim qui blandit 
					praesent luptatum zzril delenit augue duis dolore te feugait 
					nulla facilisi.			
					<br/>    <u><b>Sed ut perspiciatis</b></u>, unde omnis iste natus 
					error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque 
					ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
					sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut 
					odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem 
					sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia
					dolor sit, amet, consectetur, adipisci aspernatur aut 
					odit aut fugit, sed quia velit, sed quia non numquam
					eius modi tempor incidunt,  ut labore et dolore magna
					aliqua quaerat magni tempor dolores eos, qui ratione volup voluptatem.                      
                
<img border="0" src="gallery/3.jpg" width="180" height="140" align="right" hspace=7 vspace=7 alt="220 Meduzz">
					<br/>    <b><u>Ut enim ad </u></b>minima veniam, quis nostrum exercitationem 
					ullam corporis suscipit laboriosam, nisi ut aliquid ex 
					ealabo commodi consequatur? Quis autem vel eum iure 
					reprehend erit, qui in ea voluptate velit esse, quam nihil 
					molestiae con sequatur, vel illum, qui dolorem eum fugiat, 
					quo voluptas nulla pariatur? At vero eos et accusamus et 
					iusto odio dignissimos ducimus, qui blanditiis praesentium 
					voluptatum deleniti atque corrupti, quos dolores et quas

</div>

<div style="position: absolute; width: 181px; height: 100px; z-index: 2; left: 6px; top: 529px" id="thepunk1">

				<span class="someclass"><font size="2">    
				<a href="thepunk/thepunk1.php">
				В 80-х появились "АукцЫон", 
				"Сектор Газа" и кумир наших панков "Гражданская Оборона" во 
				главе с Егором (Игорем) Летовым, и это не говоря уже о множестве 
				команд, оставшихся известными лишь ...</a></font></span></div>

<div style="position: absolute; width: 181px; height: 100px; z-index: 2; left: 6px; top: 665px" id="thepunk2">
				<span class="someclass"><font size="2">    
				<a href="thepunk/thepunk2.php">
				В 80-х появились "АукцЫон", 
				"Сектор Газа" и кумир наших панков "Гражданская Оборона" во 
				главе с Егором (Игорем) Летовым, и это не говоря уже о множестве 
				команд, оставшихся известными лишь ...</a></font></span></div>

<div style="position: absolute; width: 127px; height: 23px; z-index: 1; left: 545px; top: 909px" id="foto">
	<img border="0" src="images/spot.gif" width="8" height="8"> 
	<a href="gallery.php">Репетиции</a><p>
	<img border="0" src="images/spot.gif" width="8" height="8"> 
	<a href="gallery.php">Концерты</a></p>
	<img border="0" src="images/spot.gif" width="8" height="8"> 
	<a href="gallery.php">Другие</a></div>


<div style="position: absolute; width: 972px; height: 64px; z-index: 1; left: 18px; top: 1199px" id="banners">
	<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" 
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="468" height="60">
		<param name="movie" value="flash/banner.swf">
		<param name="quality" value="High">
		<embed src="flash/banner.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" name="obj2" width="468" height="60"></object>
       
	<a href="http://www.karrock.com/"><img border="0" height="60" width="468" 
	src="flash/karrock.jpg" alt="KARROCK - информационно-развлекательный портал!"></a>
	</div>


<!-- ImageReady Slices (rez don't panic.psd) -->
<table id="Table_01" width="1003" height="1250" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td rowspan="2" width="209">
			<img src="images/don%27t-panic_01.jpg" width="209" height="218" alt=""></td>
		<td colspan="5">
			<img src="images/don%27t-panic_02.jpg" width="640" height="201" alt=""></td>
		<td rowspan="8" width="154">
			<img src="images/don%27t-panic_03.jpg" width="154" height="634" alt=""></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="201" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2" width="459">
			<img src="images/don%27t-panic_04.jpg" width="444" height="34" alt=""></td>
		<td rowspan="2" width="16">
			<a href="" class="home" title="Вы на главной!" alt="Вы на главной!"></a></td>
		<td rowspan="2" width="37">
			<a href="map.html" class="map" title="Карта сайта"></td>
		<td rowspan="2" width="36">
			<a href="izbran.php" class="izbran" title="Добавить в избранное"></td>
		<td rowspan="2" width="92">
			<img src="images/don%27t-panic_08.jpg" width="90" height="34" alt=""></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="17"></td>
	</tr>
	<tr>
		<td rowspan="2" width="209">

<img border="0" src="images/don't-panic_09.jpg" width="209" height="49" title="Вы на главной!" alt="Вы на главной!"></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="17"></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="10">
			<img src="images/don%27t-panic_10.jpg" width="640" height="1015"></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="32"></td>
	</tr>
	<tr>
		<td width="209">
			<p><a href="songs.html" class="songs" title="Тексты песен"></a></p></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="49"></td>
	</tr>
	<tr>
		<td width="209">
			<p><a href="posters.php" class="posters" title="Афиши"></a></p></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="48"></td>
	</tr>
	<tr>
		<td width="209">
			<p><a href="news.php" class="news"  title="Новости группы"></a></p></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="49"></td>
	</tr>
	<tr>
		<td rowspan="3" width="209">
						<img src="images/don%27t-panic_14.jpg" width="209" height="378" alt=""></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="221" alt=""></td>
	</tr>
	<tr>
		<td width="154">
			<a href="http://www.tarakany.ru" class="tarakani" title="Официальный сайт группы Тараканы!"></a></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="139" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2" width="154">
			<a href="http://www.smeh.bands.ru" class="smeh" title="Официальный сайт группы Смех"></a></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2" width="209">
			<a href="mp3.php" class="mp3" title="MP3"></a></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="111" alt=""></td>
	</tr>
	<tr>
		<td width="154">
			<a href="http://www.artery.ucoz.ru" class="artery" title="Официальный сайт ARTtery"></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="140" alt=""></td>
	</tr>
	<tr>
		<td width="209">
			<img src="images/don%27t-panic_19.jpg" width="209" height="208" alt=""></td>
		<td width="154">
			<img src="images/don%27t-panic_20.jpg" width="154" height="208" alt=""></td>
		<td width="1">
			<img src="images/spacer.gif" width="1" height="208" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

</body>
</html>

при разрешене больше чем 1024х768 таблица с картинками центруется а слои остаются на местя(и выглядит все так что слоиуходят в бок)

Edited March 12, 2009 by Noks

Victor Ananiev · March 12, 2009

а так:

css:
#relat
{
 height:pic height;
 width:pic with;
 position:relative;
 background:url('img path') center center no-repeat;
}
#inner
{
 position:absolute;
 left:xpx;
 top:ypx;
}

html:
<div id="relat">
 <div id="inner"></div>
</div>

Noks · March 12, 2009

спасибо! щас попробую

Noks · March 13, 2009

а так:

css:
#relat
{
 height:pic height;
 width:pic with;
 position:relative;
 background:url('img path') center center no-repeat;
}
#inner
{
 position:absolute;
 left:xpx;
 top:ypx;
}

html:
<div id="relat">
 <div id="inner"></div>
</div>

чет у меня не получтся :lol:

Int · March 13, 2009

<div style="position:relative;">
	<span style="z-index:2;display:block;position:absolute;top:-250px;left:20px;">
		<span OnClick="HidePlayer()">[ X ]</span>
	</span>
</div>

Вот такая штука у меня работает

Noks · March 13, 2009

Спасиб, сейчас попробую

Sign In

Div

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information