Home > CSS > Master Page Template (1)

Master Page Template (1)


Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html>
<head>
    <title></title>

    <script type="text/javascript">
      function doResize()
      {
           document.getElementById("box-contents").style.height=(document.documentElement.clientHeight-60)+"px";
      }
      window.onresize = doResize;
    </script>

    <style type="text/css">
        body
        {
            background-color: black;
            margin: 0px;
            padding: 0px;
            color: White;
            font: 16px arial;
        }
        #content
        {
            margin: auto;
            width: 780px;
            height: 100%;
            padding: 0 0;
        }
        div.rounded-box
        {
            position: relative;
            background-color: red;
            margin: 3px;
            width: 780px;
            padding: 0 0;
        }
        /*********************
GLOBAL ATTRIBUTES
*********************/div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
        {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: black;
            overflow: hidden;
        }
        div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside
        {
            position: relative;
            font-size: 150px;
            font-family: arial;
            color: red;
            line-height: 40px;
        }
        /*********************
SPECIFIC ATTRIBUTES
*********************/div.top-left-corner
        {
            top: 0px;
            left: 0px;
        }
        div.bottom-left-corner
        {
            bottom: 0px;
            left: 0px;
        }
        div.top-right-corner
        {
            top: 0px;
            right: 0px;
        }
        div.bottom-right-corner
        {
            bottom: 0px;
            right: 0px;
        }
        div.top-left-inside
        {
            left: -8px;
        }
        div.bottom-left-inside
        {
            left: -8px;
            top: -17px;
        }
        div.top-right-inside
        {
            left: -25px;
        }
        div.bottom-right-inside
        {
            left: -25px;
            top: -17px;
        }
        div.box-contents
        {
            position: relative;
            padding: 8px;
            color: white;
        }
    </style>
</head>
<body onload="doResize();">
    <div id="content">
        <span>Header</span>
        <div class="rounded-box">
            <div class="top-left-corner">
                <div class="top-left-inside">
                    •</div>
            </div>
            <div class="bottom-left-corner">
                <div class="bottom-left-inside">
                    •</div>
            </div>
            <div class="top-right-corner">
                <div class="top-right-inside">
                    •</div>
            </div>
            <div class="bottom-right-corner">
                <div class="bottom-right-inside">
                    •</div>
            </div>
            <div class="box-contents" id="box-contents">
                Contents go here, but it must be at least two lines to look any good.
                <br>
                Contents go here, but it must be at least two lines to look any good.
                <br>
                Contents go here, but it must be at least two lines to look any good.
                <br>
            </div>
            <!-- end div.box-contents -->
        </div>
        <!-- end div.rounded-box -->
        <span>Footer</span>
    </div>
</body>
</html>

Good Luck

Advertisements
Categories: CSS
  1. sergeos
    January 3, 2009 at 7:17 pm

    Answer please, why programmers make border around content? Is it specialy for compatible for low-resolution monitor (such as 640×480)?

    I’d like Liquid Layouts, also because my monitor is 1650×1050 and border are large then content 😦

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: