SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question vertically centering css. help 4 newbie appreciated!

    i have searched on this site and on google and have found many resources. being a complete newbie and not having a strong understanding about css and html, i tried my best and i am still failing.

    if you go to, http://www.chantikindia.com/theodyssey/intropage.html i need to make that box centered at all times (both left and right, and top and bottom)...

    the css for the page is:
    http://www.chantikindia.com/theodyssey/intropage.css

    after going through a dozen sites and playing around with my css code and html, i'm still not getting it.

    could someone please look at my very basic css code, and html page, and tell me what has to be entered to achieve this?

    any help greatly appreciated. many thanks.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hey there,

    Here's a simple example:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Centred</title>
        <style type="text/css">
          * {
            margin: 0;
            padding: 0;
          }
    
          body, html {
            height: 100%;
            background: #000;
          }
    
          #page {
            width: 800px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -400px;
            background: #FFF;
          }
        </style>
      </head>
    
      <body>
    
        <div id="page">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis est tempor odio. Suspendisse eu dolor. Quisque id sapien at ante iaculis vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dignissim. Vivamus condimentum magna eget lectus. Nullam mauris erat, tempor a, volutpat eu, vestibulum nec, leo. Nullam accumsan vestibulum ante. Ut et lectus. Duis nunc urna, pharetra ac, blandit laoreet, fermentum vel, libero. Aliquam erat volutpat.</p>
        </div>
    
      </body>
    </html>


Bookmarks

Posting Permissions

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