| 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 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; } |
| Sumber : http://www.webtoolkit.info/css-centered-layout.html | Download Article |
Tidak ada komentar:
Posting Komentar