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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    71
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Centering css content box

    Hello all,

    I have the following form wrapped in a content box. Here is the div code:
    Code:
    <div class="dialog type2 drip">
     <div class="content">
      <div class="wrapper">
      <div id="12" align="center">
       <div class="t"></div>
       <!-- Optional: Standard Module Format (hd/bd/ft) for providing semantic, meaningful content. Not required for visual effect. -->
       <div class="hd">
        <h1>Land of Wars</h1>
       </div>
       <div class="bd">
        <form name="login_form_2" method="post" action="login2.php">
        <p>Username: <input type="text" name="user" id="user"></p>
        <p>Password: <input type="password" name="pass" id="pass"></p>
       </div>
       </div>
       <div class="ft">
       <div align="center">
        <p><input type="submit" name="login_form2" class="groovybutton" id="login" value="Login"></form></p>
        <form name="register" method="post" action="reg.php">
        <p><input type="submit" name="register" class="groovybutton" id="register" value="Register"></p>
        </form>
        </div>
        </form>
       </div>
      </div>
     </div>
     <div class="b"><div></div></div>
    </div>
    I have tried to put align="center" in every div tag but no matter where they go it always stays to the left. Where would I go from here?

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    to center something in css it needs an explicit width and margin:auto;

    the code you posted is useless to help further.

    and align="center" is deprecated

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    71
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Ah, I see. Here is the css code that it works off of.
    Code:
    /* dialog variants - not needed for first blue (non-drip) style */
    
    .dialog.type2 .content,
    .dialog.type2 .t,
    .dialog.type2 .b,
    .dialog.type2 .b div {
     background-image:url(dialog2-dark-800x1200-alpha-drip.png);
     _background-image:url(dialog2-dark-alpha-drip.gif);
    }
    
    /* "drip" variant */
    
    .dialog.drip .b,
    .dialog.drip .b div {
     height:75px;
    }
    
    .dialog.drip {
     margin-left:65px;
    }
    
    .dialog.drip .t,
    .dialog.drip .b div,
    .dialog.drip .hd,
    .dialog.drip .bd,
    .dialog.drip .ft,
    .dialog.drip .wrapper {
     margin-left:-65px;
     width:65px;
    }
    
    .dialog.drip .wrapper {
     width:auto;
    }
    
    .dialog .wrapper .hd,
    .dialog .wrapper .bd,
    .dialog .wrapper .ft {
     margin-left:0px;
    }
    
    .dialog.drip .hd,
    .dialog.drip .bd,
    .dialog.drip .ft {
     zoom:1;
     width:auto;
     padding:0px 2px 0px 12px;
    }
    So where would it go? I see a couple margin variables.

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    wrap your original code in this DIV:

    Code:
    <div id="testing">
    
    <!-- your div/form code here -->
    
    </div>
    and add

    Code:
    #testing { margin:auto; width:600px; }
    600 px is a GUESS i have no idea what or how big your form container is

    assuming the form fits within 600px; this code will center it. Is that what you'e after?

  • Users who have thanked met for this post:

    blackrain87 (08-28-2010)

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    71
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thank you so much! That is exactly what I was looking for...

    on a side note, for aligning, is id used instead of class? What was the reason for using id?

  • #6
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    only that #ids take priority over classes, overwriting any other possible parent divs/css that may have had an effect on the test code

    class is fine

    you can infact apply this to

    Code:
    <div class="dialog type2 drip">
    any one of those classes, but as it's hard to diagnose without an actual page, i just added a "wrapper" in the form of "testing" to check that was in fact what you wanted to achieve.

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Looks like a severe case of div-itis as many of those are not needed. As stated, a width less than 100% must be given for a container to be centered, but the CSS property to use is this:

    margin: 0 auto;

    You can set a top/bottom margin, if you wish with that, and still have it centered horizontally. The vertical centering does not always work in all browsers using auto for the top/bottom margin position. If you add only a bottom margin, be sure to put it AFTER the centering CSS.

    Ids do not take priority over classes. If you have CSS to be used ONCE per page and only ONCE on every page, then there is no need for a CSS class. If you have a style that needs to be used more than ONCE per page, then you must use a CSS class selector.

    The order of precedence for CSS:

    1) External CSS file linked to on every page.

    2) Embedded CSS between the style tags placed between the head tags of a page.

    3) Inline CSS placed inside the tag itself will override all previous styling options.
    Last edited by Major Payne; 08-29-2010 at 10:41 AM.
    ☠ ☠RON☠ ☠

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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