TalkPHP - View Single Post

ReSpawN · 11-09-2008, 03:19 PM

If you all still are wondering how to do this, this is the most logic, easy and compatible way to all resolutions, browsers and OS's.

HTML code

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

<title>Untitled Document</title>
</head>

<body>

    <div class="masterWrapper">
        
        <div class="masterContainer">
            
        </div>
    
    </div>

</body>
</html>

CSS code

Code:

@charset "utf-8";
    
    * {
    
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        
    }

    body {
        
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        font-size: 11px;
        font-family: Verdana, Geneva, sans-serif;
        color: #000000;
        
    }
    
        .masterWrapper {
        border: 1px red dashed;
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            
        }
        
            .masterWrapper .masterContainer {
            border: 1px red dashed;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                width: 250px;
                height: 250px;
                margin-left: -125px; /* /2 width */
                margin-top: -125px; /* /2 height */
                
            }

position: fixed; works, position: relative; works as well, but the best to use is absolute