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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
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;
}
|