Computer Help and Spyware Removal Computer Help and Spyware Removal Computer Help and Spyware Removal Computer Help Forums Windows Startup Programs Database Spyware and Malware Removal Guides Computer Tutorials Uninstall Database File Database Computer Glossary Computer Resources
 

Welcome Guest ( Log In | Click here to Register a free account now! )



Register a free account to unlock additional features at BleepingComputer.com
Welcome to Bleeping Computer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

 
Reply to this topicStart new topic
> How To Make A Horizontally Centered Box With Xhtml/css
nosnhoj#3
post Jun 5 2006, 11:28 PM
Post #1


Forum Regular
***

Group: Members
Posts: 245
Joined: 27-May 05
From: 127.0.0.1
Member No.: 21,516
How to make a Horizontally Centered Box with XHTML/CSS



Guide Overview

The purpose of this guide is to show how a horizontally centered box can be achieved utilizing XHTML and CSS. The following example uses no tables and validates according to W3C standards. As is, this model is compatible with all modern browsers.

Instructions
  1. Open up Notepad or your preferred text editor.

  2. Copy and Paste the following code into your text editor of choice.


    CODE
    <!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>
    <title>Horizontally Centered Fluid Box Model</title>
    <style type="text/css">
    <!--
    body {
        margin: 100px 0px;
        padding: 0px; /* Set margin and padding for cross browser consistency. */
        text-align: center; /* Needed for IE5/Win */
        }
        
    #content {
        width: 75%;
        margin: 0px auto; /* Right and left margin set to "auto", to center the box horizontally */
        text-align: left; /* Needed to counteract IE5/Win alignment problem  */
        padding: 15px;
        border: 1px solid #000;
        background-color: #eee;
        }
    -->
    </style>
    </head>
    <body>
    <div id="content">
      <h1>Horizontally centered fluid box model</h1>
      <p>Works in all modern browsers, and is also handy for nesting divs that need to fluctuate when resized. Resize the browser window to see it in action.</p>
    </div>
    </body>
    </html>


  3. Click File ---> Save as...
    In Notepad, change the Save as type to All Files. Give your file a name with the extension .html and save it to the directory of your choice.

  4. Now, open the new .html file in your browser to see how it looks.
Breaking down the CSS


body {
margin: 100px 0px;
padding: 0px; /* Set margin and padding for cross browser consistency. */
text-align: center; /* Needed for IE5/Win */
}

#content {
width: 75%;
margin: 0px auto; /* Right and left margin set to "auto", to center the box horizontally */
text-align: left; /* Needed to counteract IE5/Win alignment problem */
padding: 15px;
border: 1px solid #000;
background-color: #eee;
}
  1. For this to work properly, a margin and padding value must be entered in the body CSS element. This example has a value of 100px for top and bottom margin, and 0px for left and right margin, and a value of 0px of padding. Both can be set to your needs..

  2. For this model to work with Internet Explorer 5 for Windows, the value of text-align: centered must be entered in the body CSS element. To get the content of the box aligned back to the left, the value of text-align: left should be added to the #content CSS element.

  3. In the #content CSS element, adjust the width: 75% shown in the example, to suit your needs.

  4. The following attributes shown in the example, are optional, and can be adjusted as desired. They were added for visual aid purposes.

    padding: 15px;
    border: 1px solid #000;
    background-color: #eee;


--------------------
When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.
Go to the top of the page
 
+Quote Post
« Next Oldest · Programming and Web Design Mini-Guides · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 7th September 2008 - 05:41 PM


Advertise   |   About Us   |   Terms of Use   |   Privacy Policy   |   Contact Us   |   Site Map   |   Chat   |   Tutorials   |   Uninstall List
Discussion Forums   |   The Computer Glossary   |   Resources   |   RSS Feeds   |   Startups   |   The File Database   |   Malware Removal Guides

© 2003-2008 All Rights Reserved Bleeping Computer LLC.

Powered By IP.Board © 2008  IPS, Inc.