Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to center DIV?

    Heres the WHOLE page of script, and near the end there are DIVs in a DIV.
    Code:
    <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.

  • #2
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Theres been a similar question: Aligning div Layout


    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.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •