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

Azgaroth · 24 Юни 2006

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

Код:

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

burkoff · 24 Юни 2006

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

Код:

.positionDiv {position:absolute; left:445; top:90; width:390; }

надявам се знаеte, че и този ред ще се преобрази така

Код:

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

Azgaroth · 24 Юни 2006

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

mute · 24 Юни 2006

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

Azgaroth · 24 Юни 2006

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

Код:

<html>
<head>
<title>01_news with layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script type="text/javascript">

</script>

<link href="file:///C|/Documents and Settings/Dragon/My Documents/WEB/css.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">

<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> </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> </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('id01_news_with_layers_21', 'images/01_news-with-layers_21-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_21', 'images/01_news-with-layers_21.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_21', 'images/01_news-with-layers_21-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_21', 'images/01_news-with-layers_21-over.jpg'); 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('id01_news_with_layers_23', 'images/01_news-with-layers_23-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_23', 'images/01_news-with-layers_23.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_23', 'images/01_news-with-layers_23-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_23', 'images/01_news-with-layers_23-over.jpg'); 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('id01_news_with_layers_25', 'images/01_news-with-layers_25-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_25', 'images/01_news-with-layers_25.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_25', 'images/01_news-with-layers_25-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_25', 'images/01_news-with-layers_25-over.jpg'); 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('id01_news_with_layers_26', 'images/01_news-with-layers_26-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_26', 'images/01_news-with-layers_26.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_26', 'images/01_news-with-layers_26-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_26', 'images/01_news-with-layers_26-over.jpg'); 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('id01_news_with_layers_28', 'images/01_news-with-layers_28-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_28', 'images/01_news-with-layers_28.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_28', 'images/01_news-with-layers_28-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_28', 'images/01_news-with-layers_28-over.jpg'); 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('id01_news_with_layers_29', 'images/01_news-with-layers_29-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_29', 'images/01_news-with-layers_29.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_29', 'images/01_news-with-layers_29-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_29', 'images/01_news-with-layers_29-over.jpg'); 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('id01_news_with_layers_30', 'images/01_news-with-layers_30-over.jpg'); return true;"
				onmouseout="changeImages('id01_news_with_layers_30', 'images/01_news-with-layers_30.jpg'); return true;"
				onmousedown="changeImages('id01_news_with_layers_30', 'images/01_news-with-layers_30-over.jpg'); return true;"
				onmouseup="changeImages('id01_news_with_layers_30', 'images/01_news-with-layers_30-over.jpg'); 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"> </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:0px; border-style:solid; border-width:0px; background:inherit " src="iframe.html" allowtransparency="true" frameborder="0"></iframe>
</a></div>

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

mute · 24 Юни 2006

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

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

Azgaroth · 24 Юни 2006

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

mute · 24 Юни 2006

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

Код:

body {
	background-color: #000000;

го замени с това

Код:

html, body {
	background-color: #000000;
	margin:auto;
	width:792px;
}

мисля че ще стане ( поне при мен стана )

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

Azgaroth · 24 Юни 2006

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

mute · 24 Юни 2006

еми ще ти кажа какво направих

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

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

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

п.с. благодарение на теб научих нещо ново

досега не се бях сетил за този метод които ще ми се окаже доста полезен за вбъдище

Azgaroth · 24 Юни 2006

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

burkoff · 25 Юни 2006

ц .ццц
добре де аз никаде не видях да си споменал в твоя код

Код:

<style>
---
</style>

това което ти дадох

Код:

.positionDiv {position:absolute; left:445; top:90; width:390; }

в <div> го има но от каде да го прочете тоя клас

значи освен тжоите неща трябва да добавиш и моите и ще стане нещо такова

Код:

<style>
---
.positionDiv {position:absolute; left:445; top:90; width:390; }
</style>

докато теставаш моя вариан махни това от ДИВА id="Layer1"

burkoff · 25 Юни 2006

как се изневих

ето как без да променям твоя кода (не сам гледал за грешки ) така го въртях че свят му се зави

така работи:

Код:

<style>

твоите неща...

.positionDiv {position:absolute; left:45; top:90; width:390; }
</style>
<body>

ТВОЯ КОД

<div class="positionDiv">
<a href="iframe1.html"> 
<iframe height="245" width="300" style="border:0px; border-style:solid; border-width:0px; background:inherit " src="iframe.html" allowtransparency="true" frameborder="0">
</iframe> 
</a>
</div>
</body>

mute · 25 Юни 2006

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

Код:

<style> твоите неща... .positionDiv {position:absolute; left:45; top:90; width:390; } </style> <body> ТВОЯ КОД <div class="positionDiv"> <a href="iframe1.html"> <iframe height="245" width="300" style="border:0px; border-style:solid; border-width:0px; background:inherit " src="iframe.html" allowtransparency="true" frameborder="0"> </iframe> </a> </div> </body>

и така отново се вужда на точното място само под 800х600

трябва да му е в дясно дивчето.
естествено ако се сложи html, body {width:790px} този проблем ще се оправи.
Абсолютнто позиционира не е за центрирани сайтове, макар че може да центрираш html body и тогава ефекта които искаш ще се получи

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

Azgaroth

Registered

burkoff

Registered

Azgaroth

Registered

mute

Registered

Azgaroth

Registered

mute

Registered

Azgaroth

Registered

mute

Registered

Azgaroth

Registered

mute

Registered

Azgaroth

Registered

burkoff

Registered

burkoff

Registered

mute

Registered