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 5 of 5
  1. #1
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    What is the easiest way to centering a DIV using CSS?
    Thanks

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    A div by default is always 100% width. Use a span instead if you want to center one, or change its width.

    To center the text within a div, use:
    Code:
    <div style="text-align:center">...</div>
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    I've seen that this works:
    Code:
    #centeredDIV { width:770px;margin-left:auto;margin-right:auto; }
    But now I have another problem, I don't see anything on the document though I've made some changes to it via CSS, like changing the background of a DIV. Here is the source code of the HTML and of the CSS:

    HTML
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!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>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>.. [ XTdesign.net ] :</title>
    <script language="JavaScript" 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>
    <style type="text/css">
    <!--
    @import url("xtdesign.css");
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
      <div id="toplogo">
      </div>
    </div>
    </body>
    </html>
    CSS
    Code:
    body {margin:0px; font-family:Helvetica, Verdana, Arial, sans-serif;}
    #container { width:770px;margin-left:auto;margin-right:auto; }
    #toplogo { background-color:#97EB30 ;
    background-image:url(images/topr.png);
     background-repeat:repeat-x;
     z-index:auto}
    I don't get why I just see a blank page...
    Thanks

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    try setting a height in your #toplogo
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    LOL. Stupid mistake. This won't happen again...


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 06:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com