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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
|
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen"/>
<link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print"/>
<title>Flying Saucer: CSS Positioned Content Support</title>
<style type="text/css">
p.demo {
margin: 2px 40px 0px 0px;
padding: 5px;
}
div.demo {
border: 0px;
margin: 2px 0px 0px 0px;
padding: 5px;
}
.rel-exp b {
position: relative;
left: 10px;
top: -10px;
}
.abs-exp {
border: 1px solid blue;
margin: 2px 40px 0px 0px;
padding: 5px;
position: absolute;
width: 100px;
top: 300px;
right: -5px;
}
.fx-exp {
position: fixed;
width: 200px;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 5px;
background-color: yellow;
}
</style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">CSS
<span style="position: relative; top: -5px;">Positioned</span>
<span style="position: relative; top: 10px;">Text</span>
Support
</span>
<br/>
<p><b>Positioned content support includes</b>: One of CSS's big features is positioned content. Flying Saucer supports
static (normal), absolute, relative, and fixed content, as well as floats
with clears.</p>
<br/>
<p class="demo">This is static content. This is the default.</p>
<p class="demo rel-exp">The bold text <b>here</b> is offset by 10px using
relative positioning</p>
<p class="demo">To the right is some absolute content. It is positioned 300px down and 5px from the right.</p>
<p class="abs-exp">Absolute</p>
<p class="demo">text</p>
<img src="images/flyingsaucer.png" style="float: left; padding-right: 10px;" height="31" width="37"/>
<div class="demo">A floating saucer to the left! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tellus id risus pulvinar tristique. Duis euismod.
Quisque varius, metus et tempor aliquet, arcu mi euismod massa, sed porttitor dolor nibh sed ipsum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies dolor a odio. Nullam vitae
est nec dui porttitor pretium. Aliquam malesuada consectetur quam. Mauris ornare erat ac enim. Nulla facilisi. Nam
vel orci. Suspendisse egestas eros ut risus. Vestibulum aliquet porta nulla. Proin eget ipsum. Vivamus ligula.</div>
<div style="clear: both;" class="demo">All clear! No saucers in sight!</div>
<img src="images/flyingsaucer.png" style="float: right; padding-right: 10px;" height="31" width="37"/>
<div class="demo">A floating saucer to the right! Aliquam malesuada consectetur quam. Mauris ornare erat ac enim. Nulla facilisi. Nam
vel orci. Suspendisse egestas eros ut risus. Vestibulum aliquet porta nulla. Proin eget ipsum. Vivamus ligula. Morbi
ornare, ipsum dapibus tempor tempus, urna magna vestibulum purus, in gravida odio tellus non sapien. Vestibulum
tincidunt. Curabitur varius arcu. Curabitur quis nibh vitae nibh tincidunt blandit. Maecenas faucibus tristique
diam.</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tellus id risus pulvinar tristique. Duis euismod.
Quisque varius, metus et tempor aliquet, arcu mi euismod massa, sed porttitor dolor nibh sed ipsum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies dolor a odio. Nullam vitae
est nec dui porttitor pretium. Aliquam malesuada consectetur quam. Mauris ornare erat ac enim. Nulla facilisi. Nam
vel orci. Suspendisse egestas eros ut risus. Vestibulum aliquet porta nulla. Proin eget ipsum. Vivamus ligula. Morbi
ornare, ipsum dapibus tempor tempus, urna magna vestibulum purus, in gravida odio tellus non sapien. Vestibulum
tincidunt. Curabitur varius arcu. Curabitur quis nibh vitae nibh tincidunt blandit. Maecenas faucibus tristique
diam.
</p>
<p>
Maecenas tortor. Duis iaculis. Nulla facilisi. Donec rhoncus, tortor eget ornare luctus, orci eros tristique leo,
non interdum leo ante luctus ante. Aliquam scelerisque orci eu lacus imperdiet congue. Cras tellus purus, interdum
id, lobortis id, consectetur et, nibh. Ut et odio. Donec semper lacinia augue. Proin vel risus. Morbi ut sem ut nunc
malesuada tempor. Pellentesque sollicitudin augue at est. Sed vitae lorem nec massa mollis viverra. Nam lobortis.
Sed iaculis mollis nunc. Sed risus. Pellentesque sed metus. Duis bibendum laoreet lectus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vel tortor.
</p>
<p>
Quisque bibendum nunc non mi. Duis placerat. Fusce fringilla. Duis ullamcorper. Suspendisse posuere aliquet eros.
Pellentesque lacinia ultrices ligula. Suspendisse potenti. Donec iaculis, dolor eget interdum scelerisque, ipsum
nisl faucibus diam, in suscipit urna turpis sed nisi. Donec eget turpis eu libero rhoncus imperdiet. Ut pretium,
purus in blandit commodo, augue nisl elementum quam, eu luctus nulla ante eu neque. Donec ac nisl. Sed lobortis.
Phasellus magna.
</p>
<p>
Sed ligula nunc, placerat quis, fringilla id, gravida non, neque. Donec sagittis consequat purus. Maecenas a metus
in lacus ultricies laoreet. Quisque sed ligula id mi iaculis faucibus. Sed mattis, est ut luctus luctus, eros erat
interdum nibh, ac molestie nisl risus a lectus. Donec posuere commodo enim. Donec et augue. Ut a metus ut mi
malesuada mattis. In suscipit. Pellentesque interdum elit vitae turpis. Cras mi leo, scelerisque sit amet, vehicula
sit amet, sodales sit amet, turpis. Etiam sit amet mauris.
</p>
<p>
Ut malesuada sollicitudin neque. Donec justo. Donec vehicula. Duis hendrerit magna at justo. Integer scelerisque
dapibus diam. Nulla consequat. Duis purus felis, sollicitudin a, pretium at, sollicitudin a, velit. Pellentesque in
velit id ipsum feugiat bibendum. Mauris elit lectus, viverra quis, scelerisque consectetur, pharetra non, erat.
Integer congue diam nec quam.
</p>
<p>
Mauris sit amet neque nec mauris accumsan convallis. Phasellus felis. Nullam egestas elit id quam. Maecenas et magna
vel neque venenatis dapibus. Vestibulum condimentum tempus mi. Proin eget urna sit amet nunc euismod lobortis. Donec
ullamcorper, urna vel pellentesque dignissim, lorem arcu fringilla leo, non mollis est metus sed elit. Nunc quis
lectus eleifend neque interdum vehicula. Fusce commodo. Aliquam pellentesque sem non erat. Nulla risus tortor,
ultrices vitae, ultricies eu, ullamcorper in, dui.
</p>
<p>
Suspendisse faucibus sapien nec justo. Aliquam nec diam a ligula fermentum facilisis. Fusce tempus est non mi.
Phasellus tempor nulla vel leo. Suspendisse semper justo faucibus dui dignissim ultrices. Vestibulum mauris felis,
elementum nec, sollicitudin in, cursus nec, mauris. Vestibulum pharetra dignissim justo. Proin consequat nisl eget
neque. Nulla facilisi. Sed felis nibh, aliquam sed, auctor in, fermentum id, tortor.
</p>
<p>
Vivamus adipiscing sollicitudin ligula. Quisque at turpis. Maecenas luctus. Aliquam rhoncus nibh. Mauris hendrerit,
eros ac gravida dapibus, lacus arcu fermentum urna, sit amet suscipit magna augue vel ipsum. Cras gravida congue
sem. Duis sit amet magna. Cras varius euismod massa. Quisque massa. Pellentesque sapien mauris, pretium quis,
ultricies at, auctor et, ligula. Phasellus massa turpis, cursus at, tincidunt ut, feugiat sit amet, magna. Quisque
vestibulum fermentum nunc. Fusce ut eros nec sem rutrum adipiscing. Ut mi. Aliquam erat volutpat. Duis ac sem.
Integer rutrum nulla at diam.
</p>
<p>
Etiam scelerisque, nibh non interdum vehicula, enim enim lobortis mauris, in semper orci erat sed odio. Aliquam vel
sapien in tellus pharetra porta. Vivamus urna. Cras nec nibh. Morbi porttitor, sem non gravida ultricies, arcu
mauris iaculis augue, non hendrerit tortor eros vitae nibh. Curabitur ac mi ut erat venenatis aliquam. Sed lectus
erat, ultrices et, dapibus eu, pulvinar faucibus, nibh. Sed faucibus lacus vitae sapien. Aliquam imperdiet, ante nec
ultricies aliquet, mauris velit semper tellus, id pretium purus nibh nec enim. In euismod. Donec egestas lectus. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur magna erat, congue
vitae, adipiscing rhoncus, commodo id, elit. Vestibulum nec nisi ac dui commodo feugiat. Maecenas nec velit sit amet
metus aliquam ultricies. Quisque ut velit.
</p>
<p>
Nulla massa velit, adipiscing sit amet, vehicula a, gravida at, lacus. Sed cursus congue risus. Donec ut enim sit
amet purus feugiat cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Quisque condimentum hendrerit mi. Donec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Sed ipsum. Sed tristique aliquam erat. Donec nec metus. Donec bibendum. Nam congue leo in
lacus. Nunc luctus laoreet nisl. Cras sagittis luctus elit. Curabitur eu augue eget mauris ullamcorper lobortis.
Etiam porta purus non diam. Mauris lorem. Pellentesque consequat diam sed erat. Vestibulum commodo sem. Aliquam ut
nisi.
</p>
<p>
Phasellus eget mauris non quam pretium laoreet. Ut eros nunc, eleifend eget, hendrerit laoreet, volutpat quis,
lorem. Maecenas fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Mauris in nulla. Duis laoreet pretium tellus. Etiam lobortis, dui a viverra adipiscing, nunc diam
vestibulum dui, et tempor enim purus sit amet metus. Suspendisse semper, ipsum at sollicitudin viverra, augue lectus
laoreet nunc, eu interdum lectus sapien nec elit. Curabitur et nibh lacinia libero bibendum ultrices. Fusce iaculis
nibh in diam. Proin at lorem non felis euismod gravida. In hac habitasse platea dictumst. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nulla eu urna. Nunc eu lorem. Nunc urna lorem, vestibulum non, laoreet et, congue
at, mi. Pellentesque non orci. Nunc eu metus.
</p>
<p>
Ut commodo dolor sit amet mi. Fusce tincidunt. Fusce dignissim magna vitae nisi. Integer non enim eu leo porttitor
congue. Praesent sed orci. Aliquam egestas erat ut quam. Sed eleifend lacinia lacus. Nunc aliquet, mi non blandit
malesuada, sapien diam dapibus lectus, vel consectetur ante lacus a massa. Aliquam lectus magna, bibendum sed,
facilisis ut, consequat eu, est. Nam eleifend aliquam lorem. Integer auctor consectetur enim. Sed eleifend justo ut
diam. Maecenas enim massa, cursus ut, vehicula gravida, mollis feugiat, lorem.
</p>
<p>
Vestibulum quis purus in dui convallis semper. Curabitur risus. Aliquam ultrices eleifend libero. Curabitur a ante
quis justo viverra scelerisque. Nullam ut turpis. Proin fermentum vehicula mauris. Suspendisse egestas nisi sit amet
metus. Fusce sodales eros id augue. Duis dui. Suspendisse tristique erat. Cras sollicitudin adipiscing nibh. Ut
quam. Donec in lacus id lacus gravida adipiscing. Etiam molestie consectetur purus. Ut leo velit, pulvinar ac,
placerat sed, mattis in, dui. Nulla ornare pulvinar orci. Ut enim.
</p>
<p>
Nunc gravida justo eget massa laoreet sagittis. Nulla at sem non arcu fringilla pretium. Duis ut nisl. In hac
habitasse platea dictumst. Integer quis felis. Vivamus vulputate. In elementum, erat vel hendrerit ultricies, orci
lacus venenatis est, venenatis facilisis enim sapien vel elit. Mauris sed turpis quis nulla lacinia semper. Duis ut
tortor sed tellus commodo tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
volutpat velit vel dui. Aenean commodo neque ut diam. Duis ut dui. Vivamus nec sapien et nibh facilisis tristique.
</p>
<p>
Nunc malesuada aliquam eros. Aliquam justo turpis, sodales vel, vulputate eu, pretium non, ante. Nulla blandit
tincidunt orci. Nam tristique mollis dui. Fusce nec risus. In placerat tempus dui. Cras quis diam. Fusce aliquet
magna id ante. Morbi ultrices viverra leo. Cras risus tellus, ullamcorper vel, auctor at, egestas eu, risus.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin iaculis, est ac gravida
dapibus, urna justo fermentum libero, quis venenatis enim odio ornare mauris. Donec interdum purus sollicitudin
tortor. Ut elementum. Phasellus dictum, odio nec iaculis tincidunt, sapien odio vulputate dui, et pulvinar diam
libero ut arcu. Aenean a sapien. Vivamus eu nisl. Cras gravida, massa ornare sodales varius, tortor purus venenatis
urna, semper posuere mi felis nec eros. Nunc enim. Morbi accumsan massa sit amet massa. Vestibulum ut elit. Integer
at lectus ut nunc ornare egestas. Nam ultrices erat non sapien. Nam libero risus, aliquet vel, hendrerit sit amet,
tempus vitae, augue. Curabitur et nisi. Quisque rhoncus venenatis nisi. Donec at metus blandit elit interdum
faucibus. Sed porttitor.
</p>
<p>
Cras adipiscing lacus vel erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Vivamus quis nibh et arcu dictum tempor. Duis in purus. Praesent est ligula, placerat suscipit, commodo
quis, laoreet malesuada, leo. In et lectus. Aenean hendrerit. Suspendisse enim turpis, dignissim vitae, posuere nec,
tempus id, mauris. Morbi eu leo rutrum arcu varius hendrerit. Nulla magna. Proin a mi rhoncus elit posuere
tincidunt. Morbi molestie malesuada lorem. Aenean malesuada pulvinar ligula. Donec iaculis molestie turpis. Morbi
risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis risus eu lectus elementum
scelerisque. Nam molestie nisi vitae lorem.
</p>
<p>
Donec risus. Aliquam nec nibh. Cras leo lectus, interdum eu, facilisis non, faucibus mollis, orci. Fusce volutpat
dolor quis massa. Vestibulum ac libero ut ipsum commodo pellentesque. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Pellentesque eget dolor. Ut facilisis tortor id libero. Nulla sodales
rhoncus arcu. Duis eu nibh. Phasellus a magna posuere felis posuere egestas. Cras sem. Praesent eget erat quis quam
dignissim porttitor. Nam cursus. Sed facilisis. Donec turpis elit, adipiscing imperdiet, lacinia vitae, placerat
eget, enim.
</p>
<p>
Fusce dapibus. Pellentesque ante mauris, dapibus in, aliquam viverra, tristique id, tortor. Pellentesque fringilla
viverra tortor. Quisque metus. Etiam laoreet sapien ut dui. Suspendisse a enim tempus orci porttitor mollis. Integer
eget tellus quis turpis vulputate adipiscing. Vivamus accumsan felis. Proin sed elit eget sapien commodo molestie.
Integer at enim. Sed interdum elit non tortor. Praesent lobortis dui sit amet lacus. Ut sem diam, euismod et, luctus
in, pretium eget, augue. In hac habitasse platea dictumst. Pellentesque sodales sodales nulla. Pellentesque sit amet
augue.
</p>
<p>
Vivamus et augue. Proin neque risus, consequat eget, dapibus in, ultricies nec, odio. Aenean rutrum semper mi. Etiam
gravida orci id mi. Phasellus diam turpis, lobortis quis, semper tristique, sollicitudin sit amet, sem. Curabitur
tincidunt, arcu non laoreet ultricies, eros lectus porta est, ullamcorper consectetur dui urna id elit. Curabitur
metus libero, sagittis in, pharetra in, ultricies quis, arcu. Nunc euismod, velit eu facilisis fermentum, metus
mauris cursus ante, rhoncus condimentum lacus augue ac tellus. Praesent ultrices lectus id libero rhoncus egestas.
Vivamus dignissim, quam eget blandit congue, velit elit tincidunt felis, in gravida libero ipsum in quam. Sed porta
augue vitae nulla. Morbi quam neque, sollicitudin quis, rutrum id, tristique vitae, turpis. Morbi tristique purus
eget lorem aliquam volutpat. Integer feugiat nulla ac nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="fx-exp">This is fixed content. It should be fixed even when the screen scrolls.</p>
</body>
</html>
|
