|
Matthias@180
|
1 |
<html><head> |
|
Matthias@180
|
2 |
<title>Floating <div> Demo</title> |
|
Matthias@180
|
3 |
<link type="text/css" rel="stylesheet" href="demo.css"/> |
|
Matthias@180
|
4 |
</head><body> |
|
Matthias@177
|
5 |
<ul> |
|
Matthias@180
|
6 |
<li>Floating <div> Demo</li> |
|
Matthias@178
|
7 |
<li><a href="table.html">Table Demo</a></li> |
|
Matthias@194
|
8 |
<li><a href="list.html">Ordered List Demo</a></li> |
|
Matthias@202
|
9 |
<li><a href="TextAreaDemo.html">TextAreaDemo.java</a></li> |
|
Matthias@177
|
10 |
</ul> |
|
Matthias@181
|
11 |
<div style="float:left; width:5em; font-family:big"> |
|
Matthias@176
|
12 |
This is a floating <div> on the left side. It has a width of 5em. |
|
Matthias@161
|
13 |
</div> |
|
Matthias@178
|
14 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus ligula nec |
|
Matthias@161
|
15 |
velit condimentum a dapibus tellus accumsan. Donec leo lacus, convallis a |
|
Matthias@161
|
16 |
consectetur eget, volutpat id metus. Suspendisse sodales scelerisque sapien, |
|
Matthias@161
|
17 |
tincidunt bibendum neque mollis a. Donec convallis sodales adipiscing. Nullam |
|
Matthias@161
|
18 |
sodales ipsum vel turpis venenatis non adipiscing odio feugiat. Donec vitae |
|
Matthias@161
|
19 |
placerat dolor. Nulla facilisi. Ut et dui facilisis tellus scelerisque faucibus. |
|
Matthias@161
|
20 |
Nam id neque turpis. Sed rhoncus nisl accumsan ligula ultrices sed volutpat |
|
Matthias@161
|
21 |
tortor imperdiet. Etiam nec mi nec nisl sagittis porta. Curabitur vel nisi |
|
Matthias@161
|
22 |
vulputate arcu convallis posuere vitae eu metus.</p> |
|
Matthias@256
|
23 |
<div style="float:right; width:50%; background-image: url(frame); margin-top: 20px; margin-left: 1em; padding: 20px 5px 5px; color:white; text-align: justify"> |
|
Matthias@173
|
24 |
<p>Integer ac dui ut massa malesuada ornare. Quisque lacinia, arcu ut rhoncus |
|
Matthias@162
|
25 |
ornare, nibh est pulvinar nibh, non vehicula orci tortor a tortor. Mauris ut |
|
Matthias@162
|
26 |
nisl mauris, vel mattis libero. Sed aliquet tortor nec nulla pretium rhoncus |
|
Matthias@162
|
27 |
ultrices leo convallis. Class aptent taciti sociosqu ad litora torquent per |
|
Matthias@162
|
28 |
conubia nostra, per inceptos himenaeos. Sed at interdum ipsum. Nam sit amet odio |
|
Matthias@162
|
29 |
vitae enim tempor vulputate. In feugiat neque ac orci euismod tincidunt. |
|
Matthias@162
|
30 |
Maecenas euismod elementum quam, quis tincidunt orci mollis ac. Pellentesque et |
|
Matthias@162
|
31 |
lobortis tellus. Nunc elementum pellentesque rhoncus. Pellentesque venenatis |
|
Matthias@162
|
32 |
aliquam magna. Suspendisse eu leo purus, non tempor libero. Proin urna enim, |
|
Matthias@162
|
33 |
tristique vitae pulvinar eu, hendrerit eu enim. Integer pretium imperdiet auctor. |
|
Matthias@162
|
34 |
Praesent turpis magna, hendrerit nec pellentesque at, pulvinar ac risus. |
|
Matthias@162
|
35 |
Curabitur at orci tortor. Nulla in magna in elit mattis semper.</p> |
|
Matthias@178
|
36 |
<div style="float:left; width:1.2em; padding-right: 5px"> |
|
Matthias@161
|
37 |
Hi! |
|
Matthias@161
|
38 |
</div> |
|
Matthias@173
|
39 |
<p>Cras arcu arcu, auctor nec porttitor eu, sagittis ut leo. Nam vel ipsum vel |
|
Matthias@162
|
40 |
metus posuere sagittis. Vestibulum congue fringilla nibh, a ullamcorper magna |
|
Matthias@162
|
41 |
blandit ut. Integer in nisl id risus viverra vestibulum a ac eros. Nam odio |
|
Matthias@162
|
42 |
justo, lobortis ultricies condimentum quis, vulputate sit amet metus. Cras vel |
|
Matthias@162
|
43 |
ipsum quis nisl scelerisque aliquet. Quisque dapibus ultricies mi eu elementum. |
|
Matthias@162
|
44 |
Sed sit amet ipsum enim, vitae luctus eros. Fusce viverra risus ut mi rutrum |
|
Matthias@162
|
45 |
posuere. Cras facilisis molestie nisl, id faucibus quam dapibus et. Suspendisse |
|
Matthias@162
|
46 |
nec ante sem, ac ullamcorper arcu. In hac habitasse platea dictumst. Cum sociis |
|
Matthias@162
|
47 |
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. |
|
Matthias@162
|
48 |
Integer commodo hendrerit ante scelerisque adipiscing. Cum sociis natoque |
|
Matthias@162
|
49 |
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce |
|
Matthias@162
|
50 |
lobortis, ligula et ultricies rutrum, purus nulla pellentesque odio, vel dictum |
|
Matthias@162
|
51 |
ligula erat in enim. Pellentesque tempus feugiat dui ut condimentum. In |
|
Matthias@162
|
52 |
vestibulum dolor et nulla volutpat imperdiet. Nulla faucibus, urna eu tincidunt |
|
Matthias@162
|
53 |
ornare, nisl sem interdum elit, in dignissim ante mauris eu turpis. Pellentesque |
|
Matthias@162
|
54 |
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> |
|
Matthias@162
|
55 |
</div> |
|
Matthias@178
|
56 |
<p>In dignissim turpis nec urna aliquam eu pharetra elit viverra. Praesent neque |
|
Matthias@161
|
57 |
eros, feugiat fringilla blandit non, iaculis in ligula. Fusce porttitor |
|
Matthias@161
|
58 |
tincidunt metus nec consectetur. Sed placerat, odio sed ullamcorper lacinia, |
|
Matthias@161
|
59 |
massa risus bibendum turpis, et rutrum neque nulla ut elit. Etiam at magna vel |
|
Matthias@161
|
60 |
est aliquet ornare. Sed tempus, turpis eget imperdiet sollicitudin, dolor orci |
|
Matthias@161
|
61 |
suscipit quam, a elementum diam tellus in nisi. Donec eleifend erat et nunc |
|
Matthias@163
|
62 |
egestas non suscipit libero molestie. Phasellus lacinia bibendum tempus. |
|
Matthias@176
|
63 |
<button name="niceValueSlider" style="margin: 3px"/> Sed |
|
Matthias@161
|
64 |
felis odio, posuere eget aliquet quis, suscipit in lectus. Nam ultricies augue |
|
Matthias@161
|
65 |
vel est venenatis cursus ut et tortor. Nunc risus ante, tristique id fermentum |
|
Matthias@161
|
66 |
in, varius a nulla.</p> |
|
Matthias@178
|
67 |
<p>Mauris ullamcorper porttitor enim, eu vehicula urna faucibus et. Nulla tristique |
|
Matthias@162
|
68 |
tempor fringilla. Donec ut mauris at ligula pellentesque lacinia. Nulla id |
|
Matthias@162
|
69 |
tortor at lectus lobortis lobortis a sed risus. Cum sociis natoque penatibus et |
|
Matthias@162
|
70 |
magnis dis parturient montes, nascetur ridiculus mus. Sed convallis augue at sem |
|
Matthias@162
|
71 |
vestibulum sit amet lobortis magna feugiat. Mauris in magna vitae odio aliquet |
|
Matthias@162
|
72 |
varius a quis enim. Pellentesque posuere pulvinar neque vitae pretium. Aliquam a |
|
Matthias@162
|
73 |
condimentum libero. Cras non leo ornare ipsum luctus molestie. Integer non dui |
|
Matthias@162
|
74 |
felis, sodales cursus orci. Nulla sit amet dui odio. Mauris vestibulum, ligula |
|
Matthias@162
|
75 |
in convallis sodales, enim est egestas dui, tempor faucibus ligula sapien quis |
|
Matthias@162
|
76 |
leo. Aenean nec pellentesque lorem.</p> |
|
Matthias@176
|
77 |
<div style="float:right; width:3.6em; font-family:big"> |
|
Matthias@163
|
78 |
It's me <img src="smiley" alt=":)" style="vertical-align:middle"/> |
|
Matthias@162
|
79 |
</div> |
|
Matthias@178
|
80 |
<p>Mauris justo tortor, elementum at semper ut, auctor at diam. Aliquam leo tellus, |
|
Matthias@162
|
81 |
fermentum sed euismod sed, condimentum id odio. Aenean auctor malesuada diam, |
|
Matthias@162
|
82 |
non iaculis lacus adipiscing eu. Pellentesque ac faucibus mi. Vivamus cursus |
|
Matthias@162
|
83 |
semper est, et cursus libero consequat a. Mauris et eros nec nisl commodo |
|
Matthias@162
|
84 |
pulvinar ut laoreet massa. Sed quis nulla a eros tincidunt sagittis. Ut euismod |
|
Matthias@162
|
85 |
libero at lectus venenatis commodo. Suspendisse risus dolor, ornare eget mollis |
|
Matthias@162
|
86 |
et, tempor vitae purus. Phasellus eleifend magna at erat dapibus eget laoreet |
|
Matthias@162
|
87 |
purus tempus. Maecenas nec nulla mollis quam consectetur interdum ut vitae leo. |
|
Matthias@162
|
88 |
Phasellus laoreet, nibh quis vehicula commodo, dolor purus pharetra turpis, at |
|
Matthias@162
|
89 |
condimentum nulla arcu vitae diam. Mauris imperdiet ultricies purus nec rhoncus.</p> |
|
Matthias@178
|
90 |
<p>In id odio felis. Vivamus auctor ornare nisi sed eleifend. Nunc quam orci, |
|
Matthias@164
|
91 |
vestibulum vel varius at, mollis euismod lorem. Nulla interdum porttitor ante, |
|
Matthias@164
|
92 |
eu volutpat tellus laoreet in. Aenean magna erat, commodo in pulvinar vitae, |
|
Matthias@164
|
93 |
fermentum ac nulla. Suspendisse ac erat neque, eu dapibus purus. Maecenas at |
|
Matthias@164
|
94 |
nunc vel nisi consequat porta. Suspendisse lobortis, ipsum ac faucibus tincidunt, |
|
Matthias@164
|
95 |
risus urna pulvinar tortor, eget ullamcorper orci dolor et metus. Duis rutrum |
|
Matthias@164
|
96 |
diam a nunc porttitor nec luctus risus lacinia. Duis iaculis, arcu vel adipiscing |
|
Matthias@164
|
97 |
congue, dui metus molestie orci, eget malesuada est nisi eu est.</p> |
|
Matthias@161
|
98 |
</body></html> |