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

Azgaroth
Нов
Нов
Posts: 12
Joined: Fri Jun 02, 2006 12:02 pm

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

Post by Azgaroth » Sat Jun 24, 2006 8:41 am

Как мога да позиционирам един див на мястото на което искам да бъде. Правя го във Dreamweaver MX и го слагам над мястото което желая. Но при преглед на работата в браузър div-a се центрира.

Code: Select all

<div id="Layer1">
</a><a href="iframe1.html" target="_self">
  <iframe height="250" width="300" style="padding-left&#58;23px; padding-top&#58;12px; border&#58;0px; border-style&#58;solid; border-width&#58;0px; background&#58;inherit " src="iframe.html" allowtransparency="true" frameborder="0"></iframe>
  </div>

User avatar
burkoff
Нов
Нов
Posts: 176
Joined: Sat Apr 01, 2006 7:20 am
Location: студентско общежитие 2
Contact:

Post by burkoff » Sat Jun 24, 2006 8:55 am

я пробвате така с помоща на CSS

Code: Select all

.positionDiv &#123;position&#58;absolute; left&#58;445; top&#58;90; width&#58;390; &#125;
надявам се знаеte, че и този ред ще се преобрази така

Code: Select all

<div class="positionDiv" id="Layer1"> ....
....
</div>

Azgaroth
Нов
Нов
Posts: 12
Joined: Fri Jun 02, 2006 12:02 pm

Post by Azgaroth » Sat Jun 24, 2006 9:31 am

Пробвах но не се получи. div-a не престава да се централизира...

User avatar
mute
Шаман
Шаман
Posts: 3127
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 167
Location: between mind & heart
Contact:

Post by mute » Sat Jun 24, 2006 10:56 am

с
margin-left ; margin-right ?
даи целия код да видим :)

Azgaroth
Нов
Нов
Posts: 12
Joined: Fri Jun 02, 2006 12:02 pm

Post by Azgaroth » Sat Jun 24, 2006 11:35 am

Тук ще постна целия код на проекта за да не би грешката ми да се намира на друго място. Ще ме извинявате за спама дето правя.

Code: Select all

<html>
<head>
<title>01_news with layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!-- ImageReady Preload Script &#40;01_news with layers.psd&#41; -->
<script type="text/javascript">
<!--

function newImage&#40;arg&#41; &#123;
	if &#40;document.images&#41; &#123;
		rslt = new Image&#40;&#41;;
		rslt.src = arg;
		return rslt;
	&#125;
&#125;

function changeImages&#40;&#41; &#123;
	if &#40;document.images && &#40;preloadFlag == true&#41;&#41; &#123;
		for &#40;var i=0; i<changeImages.arguments.length; i+=2&#41; &#123;
			document&#91;changeImages.arguments&#91;i&#93;&#93;.src = changeImages.arguments&#91;i+1&#93;;
		&#125;
	&#125;
&#125;

var preloadFlag = false;
function preloadImages&#40;&#41; &#123;
	if &#40;document.images&#41; &#123;
		id01_news_with_layers_21_over = newImage&#40;"images/01_news-with-layers_21-over.jpg"&#41;;
		id01_news_with_layers_23_over = newImage&#40;"images/01_news-with-layers_23-over.jpg"&#41;;
		id01_news_with_layers_25_over = newImage&#40;"images/01_news-with-layers_25-over.jpg"&#41;;
		id01_news_with_layers_26_over = newImage&#40;"images/01_news-with-layers_26-over.jpg"&#41;;
		id01_news_with_layers_28_over = newImage&#40;"images/01_news-with-layers_28-over.jpg"&#41;;
		id01_news_with_layers_29_over = newImage&#40;"images/01_news-with-layers_29-over.jpg"&#41;;
		id01_news_with_layers_30_over = newImage&#40;"images/01_news-with-layers_30-over.jpg"&#41;;
		preloadFlag = true;
	&#125;
&#125;

// -->
</script>
<!-- End Preload Script -->
<link href="file&#58;///C|/Documents and Settings/Dragon/My Documents/WEB/css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#Layer1 &#123;
	position&#58;absolute;
	width&#58;331px;
	height&#58;238px;
	z-index&#58;1;
	left&#58; 447px;
	top&#58; 465px;
&#125;
#Layer2 &#123;
	position&#58;absolute;
	width&#58;314px;
	height&#58;243px;
	z-index&#58;1;
	left&#58; 443px;
	top&#58; 461px;
&#125;
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages&#40;&#41;;">
<!-- ImageReady Slices &#40;01_news with layers.psd&#41; -->
<table width="791" height="738" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
  <tr>
    <td colspan="4"><img src="images/01_news-with-layers_01.jpg" width="129" height="125" alt=""></td>
    <td colspan="7"><img src="images/01_news-with-layers_02.jpg" width="136" height="125" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_03.jpg" width="129" height="125" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_04.jpg" width="131" height="125" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_05.jpg" width="130" height="125" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_06.jpg" width="131" height="125" alt=""></td>
    <td><img src="images/01_news-with-layers_07.jpg" width="4" height="125" alt=""></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5"><img src="images/01_news-with-layers_08.jpg" width="132" height="154" alt=""></td>
    <td colspan="5"><img src="images/01_news-with-layers_09.jpg" width="131" height="154" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_10.jpg" width="132" height="154" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_11.jpg" width="132" height="154" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_12.jpg" width="131" height="154" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_13.jpg" width="132" height="154" alt=""></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5"><img src="images/01_news-with-layers_14.jpg" width="132" height="154" alt=""></td>
    <td colspan="5"><img src="images/01_news-with-layers_15.jpg" width="131" height="154" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_16.jpg" width="132" height="154" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_17.jpg" width="132" height="154" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_18.jpg" width="131" height="154" alt=""></td>
    <td colspan="4"><img src="images/01_news-with-layers_19.jpg" width="132" height="154" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="154" alt=""></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="11"><img src="images/01_news-with-layers_20.jpg" width="64" height="274" alt=""></td>
    <td colspan="4" rowspan="4"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_21', 'images/01_news-with-layers_21-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_21', 'images/01_news-with-layers_21.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_21', 'images/01_news-with-layers_21-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_21', 'images/01_news-with-layers_21-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_21" src="images/01_news-with-layers_21.jpg" width="84" height="24" border="0" alt=""></a></td>
    <td rowspan="6"><img src="images/01_news-with-layers_22.jpg" width="8" height="84" alt=""></td>
    <td colspan="4" rowspan="3"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_23', 'images/01_news-with-layers_23-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_23', 'images/01_news-with-layers_23.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_23', 'images/01_news-with-layers_23-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_23', 'images/01_news-with-layers_23-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_23" src="images/01_news-with-layers_23.jpg" width="109" height="23" border="0" alt=""></a></td>
    <td colspan="19"><img src="images/01_news-with-layers_24.jpg" width="525" height="3" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" alt=""></td>
  </tr>
  <tr>
    <td colspan="3" rowspan="4"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_25', 'images/01_news-with-layers_25-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_25', 'images/01_news-with-layers_25.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_25', 'images/01_news-with-layers_25-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_25', 'images/01_news-with-layers_25-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_25" src="images/01_news-with-layers_25.jpg" width="101" height="23" border="0" alt=""></a></td>
    <td colspan="4" rowspan="4"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_26', 'images/01_news-with-layers_26-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_26', 'images/01_news-with-layers_26.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_26', 'images/01_news-with-layers_26-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_26', 'images/01_news-with-layers_26-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_26" src="images/01_news-with-layers_26.jpg" width="72" height="23" border="0" alt=""></a></td>
    <td colspan="12"><img src="images/01_news-with-layers_27.jpg" width="352" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="3"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_28', 'images/01_news-with-layers_28-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_28', 'images/01_news-with-layers_28.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_28', 'images/01_news-with-layers_28-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_28', 'images/01_news-with-layers_28-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_28" src="images/01_news-with-layers_28.jpg" width="72" height="22" border="0" alt=""></a></td>
    <td colspan="3" rowspan="3"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_29', 'images/01_news-with-layers_29-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_29', 'images/01_news-with-layers_29.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_29', 'images/01_news-with-layers_29-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_29', 'images/01_news-with-layers_29-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_29" src="images/01_news-with-layers_29.jpg" width="105" height="22" border="0" alt=""></a></td>
    <td colspan="4" rowspan="3"><a href="#"
				onmouseover="changeImages&#40;'id01_news_with_layers_30', 'images/01_news-with-layers_30-over.jpg'&#41;; return true;"
				onmouseout="changeImages&#40;'id01_news_with_layers_30', 'images/01_news-with-layers_30.jpg'&#41;; return true;"
				onmousedown="changeImages&#40;'id01_news_with_layers_30', 'images/01_news-with-layers_30-over.jpg'&#41;; return true;"
				onmouseup="changeImages&#40;'id01_news_with_layers_30', 'images/01_news-with-layers_30-over.jpg'&#41;; return true;"> <img name="id01_news_with_layers_30" src="images/01_news-with-layers_30.jpg" width="108" height="22" border="0" alt=""></a></td>
    <td colspan="3" rowspan="3"><img src="images/01_news-with-layers_31.jpg" width="67" height="22" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="19" alt=""></td>
  </tr>
  <tr>
    <td colspan="4" rowspan="3"><img src="images/01_news-with-layers_32.jpg" width="109" height="61" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
  </tr>
  <tr>
    <td colspan="4" rowspan="2"><img src="images/01_news-with-layers_33.jpg" width="84" height="60" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="2" alt=""></td>
  </tr>
  <tr>
    <td colspan="6" rowspan="2"><img src="images/01_news-with-layers_34.jpg" width="149" height="61" alt=""></td>
    <th colspan="11" rowspan="6" background="images/01_news-with-layers_35.jpg">&nbsp;</th>
    <td colspan="2" rowspan="6"><img src="images/01_news-with-layers_36.jpg" width="66" height="248" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="58" alt=""></td>
  </tr>
  <tr>
    <td rowspan="5"><img src="images/01_news-with-layers_37.jpg" width="19" height="190" alt=""></td>
    <td colspan="5" rowspan="2"><img src="images/01_news-with-layers_38.jpg" width="101" height="62" alt=""></td>
    <td colspan="3"><img src="images/01_news-with-layers_39.jpg" width="81" height="3" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" alt=""></td>
  </tr>
  <tr>
    <td colspan="5"><img src="images/01_news-with-layers_40.jpg" width="175" height="59" alt=""></td>
    <td colspan="4" rowspan="2"><img src="images/01_news-with-layers_41.jpg" width="55" height="85" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="59" alt=""></td>
  </tr>
  <tr>
    <td colspan="10"><img src="images/01_news-with-layers_42.jpg" width="276" height="26" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
  </tr>
  <tr>
    <td colspan="5"><img src="images/01_news-with-layers_43.jpg" width="101" height="63" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_44.jpg" width="182" height="63" alt=""></td>
    <td colspan="3" rowspan="2"><img src="images/01_news-with-layers_45.jpg" width="48" height="102" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
  </tr>
  <tr>
    <td colspan="11"><img src="images/01_news-with-layers_46.jpg" width="283" height="39" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="39" alt=""></td>
  </tr>
  <tr>
    <td rowspan="3"><img src="images/01_news-with-layers_47.jpg" width="39" height="30" alt=""></td>
    <td colspan="8"><img src="images/01_news-with-layers_48.jpg" width="150" height="10" alt=""></td>
    <td colspan="3"><img src="images/01_news-with-layers_49.jpg" width="150" height="10" alt=""></td>
    <td colspan="7"><img src="images/01_news-with-layers_50.jpg" width="151" height="10" alt=""></td>
    <td colspan="5"><img src="images/01_news-with-layers_51.jpg" width="150" height="10" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_52.jpg" width="150" height="10" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" alt=""></td>
  </tr>
  <tr>
    <td colspan="8"><img src="images/01_news-with-layers_53.jpg" width="150" height="10" alt=""></td>
    <td colspan="3"><img src="images/01_news-with-layers_54.jpg" width="150" height="10" alt=""></td>
    <td colspan="7"><img src="images/01_news-with-layers_55.jpg" width="151" height="10" alt=""></td>
    <td colspan="5"><img src="images/01_news-with-layers_56.jpg" width="150" height="10" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_57.jpg" width="150" height="10" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" alt=""></td>
  </tr>
  <tr>
    <td colspan="8"><img src="images/01_news-with-layers_58.jpg" width="150" height="10" alt=""></td>
    <td colspan="3"><img src="images/01_news-with-layers_59.jpg" width="150" height="10" alt=""></td>
    <td colspan="7"><img src="images/01_news-with-layers_60.jpg" width="151" height="10" alt=""></td>
    <td colspan="5"><img src="images/01_news-with-layers_61.jpg" width="150" height="10" alt=""></td>
    <td colspan="6"><img src="images/01_news-with-layers_62.jpg" width="150" height="10" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" alt=""></td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="39" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="25" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="46" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="3" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="16" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="8" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="28" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="5" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="74" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="2" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="74" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="20" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="28" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="24" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="52" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="20" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="2" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="88" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="25" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="3" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="65" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="62" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td></td>
  </tr>
</table>
<div class="positionDiv" id="Layer1"><a href="iframe1.html">
  <iframe height="245" width="300" style="border&#58;0px; border-style&#58;solid; border-width&#58;0px; background&#58;inherit " src="iframe.html" allowtransparency="true" frameborder="0"></iframe>
</a></div>
<!-- End ImageReady Slices -->
</div>
</body>
</html>

User avatar
mute
Шаман
Шаман
Posts: 3127
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 167
Location: between mind & heart
Contact:

Post by mute » Sat Jun 24, 2006 11:50 am

сори трябваше да поискам напрво да покажеш сайта че така много обркан кода
ама щом полсваш
#Layer1 {
position:absolute;
width:331px;
height:238px;
z-index:1;
left: 447px;
top: 465px;}

би трябвало див-а да ти е
447пиксела на кяво от кевия Ръб на монитора и 465 пкс като промениш стоиностите какво става ?
и ако можеш даи да видим сайта

Azgaroth
Нов
Нов
Posts: 12
Joined: Fri Jun 02, 2006 12:02 pm

ето

Post by Azgaroth » Sat Jun 24, 2006 12:44 pm

http://azgaroth.hit.bg/TEMP/temp.html
Това прозорче отдолу искам да стой в дясно в направеното за него просторанство.

User avatar
mute
Шаман
Шаман
Posts: 3127
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 167
Location: between mind & heart
Contact:

Post by mute » Sat Jun 24, 2006 1:32 pm

незнам дали си забелязал но при разделителна способност 800х600 дива си е на мястото което искаш. В случая дива не се центрира а прости приема стоиностите които са му зададени left: 447px; top: 465px; и затова седи така в центара когато е при 800х600 заема точното място.
Предлагам ти вариант които не е най-добрия но пак мисля че ще ти свърши работа
значи това

Code: Select all

body &#123;
	background-color&#58; #000000;
го замени с това

Code: Select all

html, body &#123;
	background-color&#58; #000000;
	margin&#58;auto;
	width&#58;792px;
&#125;
мисля че ще стане ( поне при мен стана )

p.s Дизаина ти е много хубав обаче кода е зле понеже маи си го генерирал с ImageReady защо си го нарязал на толкова много картинки можеше наи горе снимката която е на групата да я направиш 1 а не на 20 парчета сега сайта ти ще зарежда доста по бавно.

Azgaroth
Нов
Нов
Posts: 12
Joined: Fri Jun 02, 2006 12:02 pm

Post by Azgaroth » Sat Jun 24, 2006 1:54 pm

Благодаря много стана. Абе това е много подтискащ проблем. Преди известно време ми се наложи отново да се боря с това гнусно подскачащо ефектче... Макар че не разбирам какво точно направи тази корекция съм ти благодарен. Сега остава за напред да ми върши все така хубава работа
:D

User avatar
mute
Шаман
Шаман
Posts: 3127
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 167
Location: between mind & heart
Contact:

Post by mute » Sat Jun 24, 2006 2:04 pm

еми ще ти кажа какво направих :)
понеже ти казах че страницата ти се вижда добре само при 800х600 рх
направих самото html и body да е 800 рх широко ( т.е. аз го направих 792 понеже основната ти таблица е толкова )

и така когато си му задал left:400 дива не е на 400 пиксела от ръба на монитора а на 400 пихсела от html които пак е центрирано с margin:auto

дано се ме разбрал ( то маи и аз сам не се разбирам )

п.с. благодарение на теб научих нещо ново :) досега не се бях сетил за този метод които ще ми се окаже доста полезен за вбъдище

Post Reply