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
|
<!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: Centered Fluid Content</title>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
<style type="text/css" media="screen">
body {
font-size: 12px;
font-family: Verdana, Arial, Tahoma, SunSans-Regular;
margin: 50px 140px 20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}
p, pre {
margin: 0px;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
<p class="link right-link" style="margin: 10px; float: right; font: 9pt normal sans-serif"><a href="demoNav:forward">Next Page</a></p>
<p class="link left-link" style="margin: 10px; font: 9pt normal sans-serif"><a href="demoNav:back">Previous Page</a></p>
<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">Centered Fluid Content:</b> This sample page, using ideas from
<b>Intensiv Station Templates</b> at http://www.intensivstation.ch, shows a simple, centered-content
fluid layout; there are fixed margins on either side, and the width of the center is set to 100%
of what remains.</p>
<p>Note in this example the layout will break because of the "pre" block below--but holds up
pretty well till you reduce beyond the minimum necessary for the preserved formatting.</p>
<pre>
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana;
color: #564b47;
margin: 20px 140px 20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}
</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!
</p>
</div>
</body>
</html>
|
