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
|
<!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 with Auto Margins</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 10px 50px 10px;
text-align: center;
}
#content {
width: 500px;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
margin: 0px 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 with Auto Margins:</b> This sample page, using ideas from
http://bluerobot.com/web/css/center1.html, shows a simple, centered-content
fluid layout where the width of the content is fixed, and where the content is centered by setting
margins to "auto". Note in this case the body has no left/right margin set (as in the other
centered content example).</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 {
margin: 50px 0px;
font-size: 12px;
text-align: center;
}
#content {
width: 500px;
margin: 0px auto;
overflow: auto;
padding: 0px;
text-align: left;
}
p, pre {
margin: 0px;
padding: 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!
</p>
</div>
</body>
</html>
|
