...

View Full Version : How to center DIV?



amir103
02-04-2007, 06:09 PM
Heres the WHOLE page of script, and near the end there are DIVs in a DIV.
<html>
<head>
<script type="text/javascript">

/***********************************************
* Drop Down/ Overlapping Content- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}

</script>
<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

</head>

<body onload="return overlay(this, 'subcontent2', 'rightbottom')">



<!--Do not remove outer most DIV tag with id="subcontent2"-->

<DIV id="subcontent2" style="position:absolute; display:none; border: 0px solid black; background-color: #FFFFFF; width: 400px; height: 400px; padding: 8px">

<div id="slider1" class="contentslide">

<div class="contentdiv">
<img src="image1.jpg"/>
</div>

<div class="contentdiv">
<img src="image2.jpg"/>
</div>

<div class="contentdiv">
<img src="image3.jpg"/>
</div>
<div class="contentdiv">
<img src="image4jpg"/>
</div>

</div>

<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds

</script>

</DIV>

</body>
<html>
How can I make the main DIV stay in the dead center of the page. As you can see, i changed a 'pop up' overlapping script to come onload: when the page loads.

drippin
02-04-2007, 06:22 PM
Theres been a similar question: http://www.codingforums.com/showthread.php?t=106675


but to answer users specifically to your coding...

<DIV id="subcontent2" style="position:absolute; display:none; border: 0px solid black; background-color: #FFFFFF; width: 400px; height: 400px; padding: 8px; margin: 0 auto;">

should put the main div in the center of the page.

If your wondering whats changed, i've added margin: 0 auto; to the style of the div... this should move it to the center.

felgall
02-04-2007, 07:05 PM
You should also remove the position:absolute as it isn't needed and may result in the content being moved from where you want it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum