Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Mar 2008
    Posts
    3
    Member #
    16576
    Ok,
    I have searched for a few days, about 1 hour per day trying to find a code that I can use to create my websites with multiple nested DIV layers, and then when totally finished with the design, implement some type of code that gets the main layer to center.

    So far, all I have been able to find are thousands of codes like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Center DIV/Container/Layer IE : flumpCakes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    font: 80% verdana, arial, helvetica, sans-serif;
    text-align: center; /* for IE */
    }
    #container {
    margin: 0 auto; /* align for good browsers */
    text-align: left; /* counter the body center */

    border: 2px solid #000;
    width: 80%;
    }
    p {
    margin: 0.3em 0.3em 0.5em 0.3em;
    }
    code {
    font-size: 115%;
    }
    #apDiv1 {
    position:absolute;
    left:123px;
    top:27px;
    width:522px;
    height:44px;
    z-index:1;
    }
    </style>
    <script type="text/javascript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    <body>
    <div id="container">
    <p>&nbsp;</p>
    <p align="center">centered text</p>
    <p>&nbsp;</p>
    </div>
    </body>
    </html>

    or scripts that do basically the same thing. I need to be able to create a web page with nested div's then tell the browser to center the main one. It seems that it should be two mouse clicks in dreamweaver, but it obviously is not, maybe i'm just stupid? Can someone less stupid help me out with this. lol.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I wrote a quick CSS tutorial on centering with CSS, perhaps it can give you an idea,

    http://www.andrewbuchan.co.uk/centering-with-css/

  4. #3
    Junior Member
    Join Date
    Mar 2008
    Posts
    3
    Member #
    16576
    this is the bulk of what i've found on the internet. While it's helpful for using it with text, i need to be able to put nested DIV layers into that top container and have the main one centered. That's what I cannot find.

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    This works for me, although I am a newbie, but I have made several sites using this format. Then if you want left aligned text within that container,just nest a div with left aligned text. Just make sure your closing #container tag is at the end of all your divs that you want inside.



    #container {

    text-align: center;
    padding: 5px;
    width: 750px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    }

  6. #5
    Junior Member
    Join Date
    Mar 2008
    Posts
    3
    Member #
    16576
    Your method works, but only for text, not for a main layer with an image, and then another layer on top of it with information. The information on top must stay nested in place otherwise content that should go in a content box over the background image ends up somewhere random. Heres my source code. I want to create some more DIV layers inside it, then center the main layer that they are all nested in:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #container {
    position:absolute;
    left:150px;
    top:2px;
    width:962px;
    height:942px;
    z-index:1;
    overflow: auto;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body onload="MM_preloadImages('images/homeroll_08.jpg','images/servicesroll_09.jpg','images/portfolioroll_10.jpg','images/ownersblogroll_11.jpg','images/tipsrollover_15.jpg','images/help_16.jpg','images/contact_17.jpg')">
    <div id="container"><img src="images/indexlayout_01.jpg" width="259" height="163" /><img src="images/indexlayout_02.jpg" width="108" height="163" /><img src="images/indexlayout_03.jpg" width="142" height="163" /><img src="images/indexlayout_04.jpg" width="125" height="163" /><img src="images/indexlayout_05.jpg" width="156" height="163" /><img src="images/indexlayout_06.jpg" width="160" height="163" /><br />
    <img src="images/indexlayout_07.jpg" width="259" height="56" /><a href="http://www.shockforcestudio.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Button','','images/homeroll_08.jpg',1)"><img src="images/indexlayout_08.jpg" alt="Return to ShockForce Studio's Main Page." name="Home Button" width="108" height="56" border="0" id="Home Button" /></a><a href="http://www.shockforcestudio.com/services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Services Button','','images/servicesroll_09.jpg',1)"><img src="images/indexlayout_09.jpg" alt="View a list of our services including printing, graphic design and web design." name="Our Services Button" width="142" height="56" border="0" id="Our Services Button" /></a><a href="http://www.shockforcestudio.com/portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio Button','','images/portfolioroll_10.jpg',1)"><img src="images/indexlayout_10.jpg" alt="View a portfolio of our printing, graphic design, and web design projects." name="Portfolio Button" width="125" height="56" border="0" id="Portfolio Button" /></a><a href="http://www.shockforcestudio.com/blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Owners Blog Button','','images/ownersblogroll_11.jpg',1)"><img src="images/indexlayout_11.jpg" alt="View Daniel White's graphic design blog." name="Owners Blog Button" width="156" height="56" border="0" id="Owners Blog Button" /></a><img src="images/indexlayout_12.jpg" width="160" height="56" /><br />
    <img src="images/indexlayout_13.jpg" width="295" height="42" /><a href="http://www.shockforcestudio.com/tips.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Tips and Tricks Button','','images/tipsrollover_14.jpg',0)"><img src="images/indexlayout_14.jpg" alt="View our ezine with information on the graphic design and printing industry." name="Tips and Tricks Button" width="155" height="42" border="0" id="Tips and Tricks Button" /></a><a href="http://www.shockforcestudio.com/resources.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Resources button','','images/tipsrollover_15.jpg',1)"><img src="images/indexlayout_15.jpg" alt="Interested in something other than web design, graphic design, or printing? Click here to view our partner sites offering promotional items, t-shirts, signs, and more." name="Resources button" width="120" height="42" border="0" id="Resources button" /></a><a href="http://www.shockforcestudio.com/helpdesk/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/help_16.jpg',1)"><img src="images/indexlayout_16.jpg" alt="If you are having web design or printing problems with an order you placed click here." name="Image16" width="120" height="42" border="0" id="Image16" /></a><a href="http://www.shockforcestudio.com/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Button','','images/contact_17.jpg',1)"><img src="images/indexlayout_17.jpg" alt="Contact us about our 279 websites, graphic design, or printing. Also use this form if you have general inquiries." name="Contact Button" width="100" height="42" border="0" id="Contact Button" /></a><img src="images/indexlayout_18.jpg" width="160" height="42" /><br />
    <img src="images/indexlayout_19.jpg" width="950" height="666" /><br />
    </div>
    </body>
    </html>

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    The example I gave will center in the window. Everything you put inside of it will will relate to that container div, or "main layer" as you are calling it. Nothing should be shifting around inside, over the background image, unless the images you are putting on top are exceeding your container widths, then things will end up shifting. Shifting, I'm guessing that's what you mean by being "somewhere random".
    The absolute positioning container you have will not center in any window size. It looks like you have tweaked it to center in a certain resolution.

    To get started:

    #container {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    }

    This is all you need to make this a "main layer" centered, with divs inside. Just tweak it from there. Watch your image widths you are placing inside.

    Orrrrr..... Maybe I just don't understand your question! If so, I'm sorry.



  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    By the way, I am assuming you are using a background image for the "main layer"?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com