www.webdeveloper.com
Results 1 to 4 of 4

Thread: Centering Everything

  1. #1
    Join Date
    Nov 2011
    Posts
    118

    Centering Everything

    How can I make my content of my page centered and not all to the left?


    Code:
    body {
        margin:0 0 20px;
        background-color:#fcfcfc;
     }
    #container {
        position:relative;
        
        min-height:472px;
        padding:80px 0 48px;
        margin:auto;
        background-color:#6b90bd;
        background-image:url(../images/headAndShoulders.jpg);
        background-repeat:no-repeat;
        box-shadow:10px 10px 10px #666;
     }
    .header {
        padding:0 0 0 334px;
        font-family:georgia,'times new roman',times,serif;
        font-style:italic;
        color:#333;
     }
    #nav {
        padding:0;
        margin:0 0 0 250px;
        list-style-type:none;
        overflow:hidden;
     }
    #nav li {
        float:left;
        margin:0 1px;
     }
    #nav a {
        display:block;
        line-height:22px;
        padding:0 4px;
        font-family:verdana,sans-serif;
        font-size:12px;
        background-color:#0b3c77;
        text-decoration:none; 
        color:#d8d7d2;
     }
    #nav a:hover {
        color:#9aa4bf;
     }
    #preamble {
        width:480px;
       
        margin:46px 0 0 334px;
        text-align:justify;
       
     }
    #preamble h3 {
        margin-top:18px;
        font-family:arial,sans-serif;
        font-size:18px;
        font-style:italic;
        color:#fff;
     } 
    #preamble .p1 {
        margin-bottom:10px;
        line-height:16px;
        font-family:verdana,geneva,arial,helvetica,sans-serif;
        font-size:14px;
        font-style:italic;
        color:#000;
     }
    #footer {
        position:absolute;
        width:900px;
        height:28px;
        padding-top:20px;
        bottom:0;
        left:0;
        background-image:url(../images/footer-bg.jpg);
        font-family:verdana,sans-serif;
        font-size:small;font-size:13px;
        font-weight:bold;
        text-align:center;
     }
    #footer a {
        color:#0b3c77;
        text-decoration:none; 
     }
    #footer a:hover {
        color:#00c;
        text-decoration:underline;
     }
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Charisma Communications - Home</title>
    
    <link rel="stylesheet" media="screen"  href="css/page.css">
    
    </head>
    <body>
    
    <div id="container" >
    
     <h1 class="header">Charisma Communications</h1>
     <h3 class="header">"...Moving People Beyond Their Limitations..."</h3>
    
    <ul id="nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="bio.html">Biography</a></li>
     <li><a href="presentations.html">Presentations</a></li>
     <li><a href="testimonials.html">Testimonials</a></li>
     <li><a href="videos.html">Videos/Pictures</a></li>
     <li><a href="events.html">Plan An Event</a></li>
     <li><a href="http://toesinmotion.wordpress.com/">My Blog</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>
    
    <div id="preamble">
    <h3>Welcome</h3>
    <p class="p1">
    Louis Gaudry's goal is to illustrate to people that no matter what your 
    circumstances are in life, you can overcome your personal challenges. 
    He's a comedian, an educator, and storyteller. He will get you laughing, 
    thinking, and feeling good about yourself! 
    </p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    
    
    
    </div>
    
    <div id="footer">
    Copyright &copy; 2013 Charisma Communications		       
    <a href="http://www.cjwebconsulting.com/">Website Designed By CJ Web Consulting</a>
    </div> 
        
    </div><!-- end #container -->
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,134
    Add a 'width' rule to #container. 'margin:auto' doesn't work by itself.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2011
    Posts
    118
    I had a width and took it out. So my page spreads and thats fine. But everything goes to the left.

  4. #4
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    218
    INFALLIBLE:

    1. Give you main elements widths and height, eg

    <div id="mydiv" style="width:200px; height:500px;">content</div>

    --only do the css in the head, or in a linked stylesheet, this is just to illustrate.

    2. Position the element left:50%; top:50%;
    and give it negative margins which are half the width and height, eg:
    <div id="mydiv" style="width:200px; height:500px; position:absolute; left:50%; top:50%; margin:-250px 0 0 -100px;" ">content</div>

    CSS margins are set in this order: order top right, bottom, left.

    It invariably works: the only limitation is not to dimension your element in percentages, the centering may be inconsistent if the window is resized.

    Cheers.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles