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

[inferno16]

Искам да попитам как да постигна следния ефект:
По долу съм дал код, в който имам див, който съдържа емотикони и стои скрит. Под него съм сложил 1 усмивчица, която играе ролята на бутон, който показва дива. Проблемът идва с това, че когато се покаже, дива бута цялата форма за коментари надолу, а аз искам самият див да мине нагоре като не закача формата.
Ето и частта от html кода която искам да направя с този ефект.

<div id="emoticons" style="display: none;" >
				Тук са ми емотиконите.
				</div>
				<div style="width:256px;"><center><img src="images/emoticons/smile.png" title="Покажи/скрий усмивките" onclick="$('#emoticons').toggle();" onmouseover="this.src='images/emoticons/smile1.png'" onmouseout="this.src='images/emoticons/smile.png'"/></center></div>

Ето и css-а който не е в html кода:
[css]#emoticons {
width:256px;
padding: 5px 5px 20px 5px;
background: #bbb;
border: 1px solid black;
display: block;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
margin-left:140px;
behavior: url(pie/PIE.htc);
}[/css]

 

[bytheway]

Даваш му position:absolute; и си готов.

Но преди това е добре да си разгледаш кода. Може би сега нямаш проблем с него, но в бъдеще определено ще ти стане по-трудно за обновяване.

Имам в предвид използването на външен CSS файл за стила. Избягвай използването на атрибута style доколкото е възможно.

Също така елемента <center> е твърде стар и използването му не е препоръчително. Можеш да центрираш съдържанието на дива с CSS.

Успех!

 

[M1tq96]

задай му позиция абсолютна и си готов ... :?:
[css]
#emoticons {

width:256px;

padding: 5px 5px 20px 5px;

background: #bbb;

border: 1px solid black;

display: block;

-webkit-border-radius: 200px;

-moz-border-radius: 200px;

border-radius: 200px;

margin-left:140px;

behavior: url(pie/PIE.htc);

position: absolute;

}[/css]

 

[inferno16]

Даваш му position:absolute; и си готов.

Но преди това е добре да си разгледаш кода. Може би сега нямаш проблем с него, но в бъдеще определено ще ти стане по-трудно за обновяване.

Имам в предвид използването на външен CSS файл за стила. Избягвай използването на атрибута style доколкото е възможно.

Също така елемента <center> е твърде стар и използването му не е препоръчително. Можеш да центрираш съдържанието на дива с CSS.

Успех!

Аз си ползвам външен файл просто ме домързя да пиша 3 реда за щирината на дива. Относно style="display: none;" това беше във външния файл и не работеше функцията за скриване и показване. А сега няма разлика.

Едит: Странно но се оправи благодаря +1 на bytheway

 

[kikity_94]

аз също имам такова нещо в проекта ми и съм го направил така
[css]
.emoticons {
display: none;
width: 190px;
height: 75px;
position: absolute;
margin-top: 1px;
margin-left: 439px;
border: 1px solid #959595;
background: #fff;
}
[/css]
Малко груб маргин, но пък си работи. Ако искаш можеш да си позиционираш дива и с top, left