JAKARTAPROJECT
JAKARTA TIPJSP TIPJSP Áú¹®&´äº¯DATABASE TIPJAVASCRIPT TIPWEBHACKING TIP±âŸ TIP
ÀÚ¹Ù½ºÅ©¸³Æ® ÆÁ
ÀÚ¹Ù½ºÅ©¸³Æ® ÆÁ
ÀÚ¹Ù½ºÅ©¸³Æ® ¹× CSS ÆÁ °Ô½ÃÆÇÀÔ´Ï´Ù
CSS centered layout
GoodBug http://www.jakartaproject.com
À̹ÌÁö ½½¶óÀÌ´õ º¸±â

CSS centered layout

Overview

Ever wanted to make centered (vertically, horizontally) webpage with hiding content for other (smaller) resolutions? Look at the demo page for an example.

First include the style sheet at the top of your code. Do it in <head> tag, then you can write your code.

 

Source code for index.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
     <title>My project</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.clayout.css" />

     <style>
         body {
             margin: 0px;
             padding: 0px;
             font-family: verdana;
             font-size: 12px;
         }

            div#layout { /* exploder 5.5+ */
                width: expression((document.body.clientWidth > 790 ? document.body.clientWidth : 790) + "px");
                height: expression((document.body.clientHeight > 490 ? document.body.clientHeight : 490) + "px");
            }

            div#container,
            div#container div.container-top,
            div#container div.container-bottom {
                width: 790px;
            }

            div#container,
            div#container div.container-right,
            div#container div.container-left {
                height: 490px;
            }

            /* colors */
            div#container {
                background: #FFFFFF;
            }

            div#container div.container-top {
                background: #FF0000;
            }

            div#container div.container-right {
                background: #00FF00;
            }

            div#container div.container-bottom {
                background: #0000FF;
            }

            div#container div.container-left {
                background: #FFFF00;
            }

            div#container div.container-top-right {
                background: #00FFFF;
            }

            div#container div.container-bottom-right {
                background: #FF00FF;
            }

            div#container div.container-bottom-left {
                background: #C0C0C0;
            }

            div#container div.container-top-left {
                background: #000000;
            }
        </style>

    </head>

    <body>

        <div id="layout">
            <div id="container">
                <div class="container-top"></div>
                <div class="container-right"></div>
                <div class="container-bottom"></div>
                <div class="container-left"></div>

                <div class="container-top-right"></div>
                <div class="container-bottom-right"></div>
                <div class="container-bottom-left"></div>
                <div class="container-top-left"></div>

                Content goes here...
            </div>
        </div>

    </body>
</html>

 

Source code for webtoolkit.clayout.css

 

body, html {
    height: 100%;
}

    div#layout { /* exploder 5.5+ */
        position: absolute;
        left: 0px;
        top: 0px;
        overflow: hidden;
        text-align: center;
    }

    * > div#layout { /* normal browsers */
        min-width: 790px;
        min-height: 490px;
        width: 100%;
        height: 100%;
    }

        div#container {
            position: relative;
            top: 50%;
            margin-top: -245px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }

        div#container div.container-top {
            position: absolute;
            left: 0px;
            top: -1000px;
            height: 1000px;
        }

        div#container div.container-right {
            position: absolute;
            right: -1000px;
            top: 0px;
            width: 1000px;
        }

        div#container div.container-bottom {
            position: absolute;
            left: 0px;
            bottom: -1000px;
            height: 1000px;
        }

        div#container div.container-left {
            position: absolute;
            left: -1000px;
            top: 0px;
            width: 1000px;
        }

        div#container div.container-top-right {
            position: absolute;
            right: -1000px;
            top: -1000px;
            width: 1000px;
            height: 1000px;
        }

        div#container div.container-bottom-right {
            position: absolute;
            right: -1000px;
            bottom: -1000px;
            width: 1000px;
            height: 1000px;
        }

        div#container div.container-bottom-left {
            position: absolute;
            left: -1000px;
            bottom: -1000px;
            width: 1000px;
            height: 1000px;
        }

        div#container div.container-top-left {
            position: absolute;
            left: -1000px;
            top: -1000px;
            width: 1000px;
            height: 1000px;
        }

 

http://www.webtoolkit.info/css-centered-layout.html

 

 

2008-01-21 03:25:22
220.70.88.***

 

ÁÁÀº»ý°¢ ^^

0Á¡ (0¸í)
µ¡±Û 1°³ | ÅÂ±× 1°³ | °ü·Ã±Ûº¸±â
ű×ÀÔ·Â
½±Ç¥(,)±¸ºÐÀ¸·Î Çѹø¿¡ ¿©·¯ ű׸¦ ÀÔ·ÂÇÒ¼ö ÀÖ½À´Ï´Ù
CSS (2)
idhacker
(0) (0)

Á¦°¡ ¿äÁò °ü½ÉÀÖ°Ô º¸´Â ºÎºÐÀε¥..^^ ¤£

211.238.161.*** 2008-01-21 03:25:22
À̸§ ºñ¹Ð¹øÈ£
ÀÚ¹Ù½ºÅ©¸³Æ® ÆÁ
ÀÚ¹Ù½ºÅ©¸³Æ® ¹× CSS ÆÁ °Ô½ÃÆÇÀÔ´Ï´Ù
! ¹øÈ£ Á¦¸ñ ±Û¾´ÀÌ ÀÏÀÚ Á¶È¸
220 img À̹ÌÁö ºÎµå·´°Ô ÁÙÀ̱â 1 GoodBug 2009-12-18 8,193
219 rss xml ÆĽÌÇÏ´Â ¸ðµâ ÀÔ´Ï´Ù. 1 °í°í½Ì 2009-11-27 7,641
218 Æ®¸® ÀÔ´Ï´Ù . 1 °í°í½Ì 2009-11-27 5,873
217 ¿¡·¯Ã³¸® 1 kaiser 2009-05-11 6,088
216 À¥ÆäÀÌÁö º¹»ç ¹æÁö ÇØÁö ÇÏ´Â ¹ý kaiser 2009-05-03 11,673
215 javascript ÇÑ±Û Â¥¸£±â 1 1 kaiser 2008-08-14 7,985
214 rolling ·Ñ¸µ ½ºÅ©¸³Æ® 1 2 GoodBug 2008-07-11 10,128
213 alert ¸Þ½ÃÁö¸¦ print ó·³ »ç¿ëÇϱâ 2 °í°í½Ì 2008-06-10 8,675
212 onload onload Æã¼ÇÀÌ Á¤ÀǵǾî ÀÖ´Â »óȲ¿¡¼­ onload¿¡ Ãß°¡Çϱâ 1 GoodBug 2008-04-11 8,440
211 javascript ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ß°¡À̵å 4 1 kaiser 2008-04-09 8,898
210 escape HTML escpae code 1 GoodBug 2008-04-02 6,499
209 optgroup SELECT ¸ñ·Ï ±×·ìº°·Î ¹­±â 1 1 GoodBug 2008-03-06 8,215
208 µ¿Àû Å×À̺í Å×ÀÌºí¿¡ µ¿Àû TR »ðÀÔ ¹× »èÁ¦ IE, FF °ø¿ë 1 GoodBug 2008-01-18 11,745
207 drag Javascript drag and drop 1 1 GoodBug 2008-01-16 8,171
206 sort Sortable HTML table 2 GoodBug 2008-01-16 7,402
205 scrollable table Scrollable HTML table 1 GoodBug 2008-01-16 7,087
CSS CSS centered layout 1 1 GoodBug 2008-01-16 6,685
203 utf8 Javascript UTF-8 1 GoodBug 2008-01-16 7,914
202 encode Javascript url decode, encode 2 GoodBug 2008-01-16 8,159
201 ¾Ïȣȭ Javascript MD5 2 GoodBug 2008-01-15 7,364
copyright 2005-2024 by Unicorn