SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering problem

    i tried to follow Paul's FAQ : How to centre horizontally and vertically?

    i got it working in firefox and opera, but not in IE.

    http://www.karinnelegault.com/new3/en/

    any help would be greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    is this what you want or have I got the wrong end of the stick
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Web Design Studio of Karinne Legault</title>
    <meta name="Description" content="Web design by -- Karinne Legault" />
    <meta name="keywords" content="web design, web site, web creation, karinne legault, karinne, outaouais, canada" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style>
    /*
    karinnelegault.com master styles
    kl@karinnelegault.com
    Updated: Oct 25, 2004
    */
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body {
     margin: 0;
     padding: 0;
     font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
     font-size: 12px;
     color: #000;
     text-align: center;
     background:#fff url(http://www.karinnelegault.com/new3/images/layout/bg.jpg) repeat-x 50% 35%;
     min-width:650px;
     min-height:500px;
    }
    #horizon{
     position:absolute;
     top:50%;
     left:0;
     width:100%;
    }
    #centerall {
     margin-top:-250px;
     position: relative;
     margin-left: auto;
     margin-right:auto;
     background-color: #f6f8f9;
     width: 650px;
     height: 500px;
     border: 1px solid #dae2e9;
    }
    </style>
    </head>
    <body>
    <div id="horizon"> 
      <div id="centerall">centre</div>
    </div>
    </body>
    </html>
    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I forgot to mention that your layout can be fixed by adding this
    Code:
    #centervert {
      left:0;
     height: 200px;
    }
    But if you look at my version above then the page doesn't slide off the left side of the window when resized smaller.

    Hope that helps.

    Paul

  4. #4
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! I actually just change the top: 50% to top: 40% in the #horizon.

    Thanks a bunch Paul.


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
  •