Положение Div в другом Div - HTML и CSS

bondik · 22.10.2013, 16:11

Добрый день!
Как оцентровать Div (.joistik) по центру снизу другого Div (leftcol)?

CSS

Код:

  #content-control {     /* Рабочая область */  
	 width: 1024px; /* Ширина макета */


  #leftcol {     /* Левая колонка колонка*/  
        background: #E0D555;
        width: 250px; 
        height: 300px;
        float: left;
		
  .joistik {
    
   width:200px;
   height:200px;
   background:#eee;
   border:1px solid #ccc;
    
    }
 
   .joistmamipulator {
   
    width:40px;
    height:40px;
    position:relative;
    border-radius:20px; 
    background:#000; 
    cursor:pointer;

}

Html

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Панель управления</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="js/gamePad.js"></script>
	<script src="js/touchSupport.js"></script>
 </head>
 <body>
    
    <div id="content-control">
		<div id="leftcol">
			<div id="joistik" class="joistik"> 
				<div class="joistmamipulator"></div>
			</div>
	   </div>
			
				
   </div>
</body>
</html>

gamePad.js

Код:

x=0;
y=0;
cx=0;
cy=0;


function inposition()
{
	$("#joistik .joistmamipulator").animate({left: cx+"px", top: cy+"px"});
}
$(document).ready(function(){

jswidth=$("#joistik").width();
jsheight=$("#joistik").height();
mnwidth=$("#joistik .joistmamipulator").width();
mnheight=$("#joistik .joistmamipulator").height();
cx=(jswidth/2)-(mnwidth/2);
cy=(jsheight/2)-(mnheight/2);
inposition();

	$("#joistik .joistmamipulator").mouseup(function(){ inposition();});
	$("#joistik .joistmamipulator").draggable({containment:[0+mnwidth/2,0+mnheight/2,jswidth-mnwidth/2,jsheight-mnheight/2]});
	$(document).mouseup(function(){inposition();});
	
})

setInterval(
function(){
var position=$("#joistik .joistmamipulator").position();
x=cx-position.left;	
y=cy-position.top;


//тут вот и будем делать все, что хотим
//например выведем в интупы значения джойстика
$("#ox").val(x);
$("#oy").val(y);
	},
1);

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выровнять div по вертикали в другом div-е	keen_	HTML и CSS	20	08.11.2012 19:07
Что нужно делать чтобы высота div зависила то дочурного div?	Duddu	HTML и CSS	2	25.04.2012 21:23
как выровнить div внутри другого div'a по вертикали по центру	Arassir	HTML и CSS	4	12.03.2011 20:01
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
растянуть div в другом div-e	slips	HTML и CSS	2	27.11.2009 15:43