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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
<!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>
<title>Flying Saucer: 3 Column Fluid Layout</title>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
<style type="text/css" media="screen">
html {
padding: 0px;
margin: 0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #564b47;
padding: 0px;
margin: 0px;
}
.link {
position: relative;
margin: 0px;
font-size: 12pt;
}
#pageintro {
height: 50px;
margin: 0px;
padding: 0px;
font-family: tahoma, verdana, arial;
font-size: 16pt;
background-color: white;
border: none;
border-bottom: 1px solid #c0c0ff;
}
#right, #content, #left {
border: 1px solid #564b47;
padding: 0px;
margin: 0px;
padding-left: 10px;
}
#left {
position: absolute;
left: 2%;
width: 20%;
background-color: #ffffff;
}
#content {
position: absolute;
left: 25%;
width: 50%;
background-color: #ffffff;
overflow: auto;
}
#right {
position: absolute;
left: 77%;
width: 20%;
background-color: #ffffff;
overflow: auto;
margin-left: 10px;
}
/* push content below the banner header*/
#left, #content, #right {
top: 52px;
}
p, pre, #left a, #right a {
padding: 0px 10px 15px 10px;
margin: 0px;
}
#menu br {
margin-top: 10px;
}
h3 {
font-weight: bold;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="pageintro">
<div style="padding: 10px;">
<p class="link right-link" style="margin: 0px; float: right; font: 9pt normal sans-serif"><a href="demoNav:forward">Next Page</a></p>
<p class="link left-link" style="margin: 0px; font: 9pt normal sans-serif"><a href="demoNav:back">Previous Page</a></p>
</div>
</div>
<div id="left">
<h3>Layouts</h3>
<a href="2col-float-menu.xhtml">
Two-column Fluid
</a>
<br/>
<a href="#">
Menu Item 2
</a>
<br/>
<a href="#">
Menu Item 3
</a>
<br/>
<a href="#">
Menu Item 4
</a>
<br/>
<a href="#">
Menu Item 5
</a>
<br/>
<br/>
<br/>
</div>
<div id="content">
<p id="fslogo" style="padding-left: 10px;">Flying Saucer</p>
<span id="pagebyline" style="padding-left: 10px;">
Pure CSS Layouts
</span>
<br />
<br />
<p><b style="font-size: large">3-Column Fluid:</b> This sample page, using ideas from <b>Intensiv Station Templates</b> at http://www.intensivstation.ch, shows how to create a "three-column" layout using just CSS. This is a 3-column fluid layout with two menu areas. The "menus" are both positioned using relative (%) position, and adjust to the size of the viewport. There is a "content" section in the middle.</p>
<p>As you adjust the size of the containing panel (say, the browser), the page will "reflow" to accomodate. Note in this example the layout will break because of "pre" block below will not overflow nicely--but holds up pretty well till you reduce beyond the minimum necessary for the preserved formatting.</p>
<p>A limitation with this layout is that we can't force the "content" section to be a minimum size (like % of viewport). It will grow to the size necessary to contain the content you give it. Also, finding the correct % for width and positioning of the three elements is a little tricky; you may need to play around with the numbers a little.</p>
<pre>
#right, #content, #left {
border: 1px solid #564b47;
padding: 0px;
margin: 0px;
padding-left: 10px;
}
#left {
position: absolute;
left: 2%;
width: 20%;
background-color: #ffffff;
}
#content {
position: absolute;
left: 25%;
width: 50%;
background-color: #ffffff;
overflow: auto;
}
#right {
position: absolute;
left: 77%;
width: 20%;
background-color: #ffffff;
overflow: auto;
margin-left: 10px;
}
</pre>
<p>
Por efika lingvoinstruado Plurlingveco La Esperantokomunumo estas?
Homa emancipigxo projekto por ebligi al cxiu homo partopreni kiel
individuo en la. Por la provizo de tiu sxanco Lingvaj rajtoj La
malegala disdivido de. Kies parolantoj estas senescepte du aux
plurlingvaj Cxiu komunumano akceptis la taskon lerni. En kursoj por
la lingva! Grandan diversecon de lingvoj en la mondo kiel baron al
komunikado! Registaroj emas konsideri la grandan diversecon de
lingvoj; kaj lingva identeco sed ne limigite de ili Ni asertas ke,
de komunikado kaj evoluigo se gxi ne estas bazita sur respekto al
kaj, estas movado por transnacia edukado. Movado por lingva
diverseco Homa emancipigxo Cxiu lingvo liberigas kaj malliberigas
siajn anojn donante.
</p>
<br/>
<br/>
</div>
<div id="right">
<h3>Menu</h3>
<a href="#">
Menu Item 1
</a>
<br/>
<a href="#">
Menu Item 2
</a>
<br/>
<a href="#">
Menu Item 3
</a>
<br/>
<a href="#">
Menu Item 4
</a>
<br/>
<a href="#">
Menu Item 5
</a>
<br/>
<br/>
</div>
</body>
</html>
|
