-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlayout.htm
More file actions
128 lines (126 loc) · 5.68 KB
/
Copy pathlayout.htm
File metadata and controls
128 lines (126 loc) · 5.68 KB
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Positioning One: Layout</title>
<link rel="stylesheet" type="text/css" media="screen, print" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen, print" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<!--[if lte IE 7>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen-ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://example.com/" rel="home">Positioning is Awesome</a></h1>
<p class="tagline">
And don’t you forget it.
</p>
<ul class="accessibility">
<li><a href="#navigation">Jump to Navigation</a></li>
<li><a href="#content">Jump to Content</a></li>
</ul>
</div>
<div id="content">
<h2>CSS Positioning to Build Layouts</h2>
<p>
Layouts built using CSS positioning are pretty much
illusions. We'll use this sample page to create a few
different layouts.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent viverra vulputate felis. Vestibulum bibendum auctor
felis, vel condimentum magna hendrerit et. Morbi at purus et
elit euismod interdum ut at ante. Morbi id nisi dolor.
Nullam imperdiet, risus ac sagittis sollicitudin, augue ante
porta felis, ut pharetra lectus nisi ac nibh. Duis quis
mauris nec urna lacinia dignissim. Nunc varius elementum
neque a lobortis. Proin lobortis gravida massa mattis
commodo. Nulla ac venenatis erat. Maecenas non faucibus
purus. Donec et quam id metus consequat lacinia. Aliquam
quis justo id velit auctor sollicitudin ac in nulla. Duis
vestibulum diam eget nisl accumsan at faucibus massa
condimentum. Nunc egestas facilisis libero, ut consequat
eros pulvinar vel. Etiam sit amet eros tortor, id aliquam
tellus. Vivamus varius justo eget augue semper vitae
bibendum lorem convallis. Nullam non leo lacus, sit amet
lobortis est. Proin in dui eros, vel venenatis orci. Nam
eros velit, lobortis at semper vitae, euismod sit amet mi.
</p>
<p>
Duis tempor blandit eros, eu consequat metus tempus sed. Nam
convallis suscipit condimentum. Nullam non justo orci. Duis
ultrices quam eget erat mattis ut tempus lorem pulvinar.
Suspendisse volutpat suscipit nunc eu aliquam. Praesent urna
ligula, feugiat et viverra vel, aliquet in nisl. Etiam
congue mauris diam. Aenean arcu orci, tempor et mattis
euismod, ultricies at ante. Phasellus at odio ligula. Sed
vitae nulla varius nunc condimentum tristique.
</p>
<p>
Sed velit nisl, molestie sed blandit nec, congue et velit.
Nunc in felis ut elit pellentesque egestas. Quisque eu justo
ac mi tempus fermentum in at tortor. Suspendisse semper
facilisis elit vel aliquam. Nullam pellentesque orci a odio
hendrerit molestie. Proin congue felis quis felis mattis eu
tempus mi interdum. Donec tristique felis non ipsum
vestibulum a gravida magna sagittis. Quisque tempor, sapien
in consectetur dictum, mi erat ultrices odio, at convallis
metus libero nec nibh. In vel dolor eu mi sollicitudin
elementum eu sit amet mi. Sed leo nibh, molestie id
adipiscing eget, dignissim et odio. Suspendisse faucibus
risus nec sapien malesuada non ultricies sapien sodales.
Etiam nisi nisi, pharetra a tristique eget, posuere vitae
dolor. Quisque posuere nulla feugiat eros pretium tempus.
</p>
<p>
Sed placerat ante ac elit porta rhoncus. In sodales pharetra
orci, hendrerit dignissim nisl scelerisque sit amet. Quisque
ac mauris at nunc blandit bibendum a at enim. Morbi rhoncus
lacinia dolor, ac pharetra massa mattis tincidunt. Etiam sit
amet mi nec nisi vulputate tempor lobortis eget felis. Ut
eros sapien, lacinia ac egestas et, facilisis porttitor
nisl. Mauris et dolor ipsum, ut tristique ipsum. Fusce
ornare volutpat nulla commodo scelerisque. Praesent
facilisis, quam a euismod lobortis, arcu ipsum porta est,
quis suscipit metus enim at diam. Nullam consectetur
venenatis purus, sed imperdiet eros vulputate nec. Etiam
sollicitudin erat et felis dictum vel placerat lectus
lacinia. Morbi luctus commodo arcu, sit amet tincidunt
ligula ornare vitae. Aliquam ut odio dui, et ornare risus.
</p>
<p>
In sit amet libero vel enim rutrum lacinia quis ut arcu.
Etiam ac mi vel nibh pretium feugiat. Morbi nec eros neque.
Maecenas dignissim velit cursus sem vulputate pellentesque.
Nulla sagittis blandit odio ac condimentum. Fusce commodo,
tellus quis placerat sagittis, justo velit sodales ipsum,
sit amet imperdiet ante sem in nisi. Morbi facilisis metus
non neque pretium scelerisque. Etiam libero ipsum, tincidunt
ut venenatis sit amet, porta ornare mauris. Duis a quam non
lacus sollicitudin ultrices id eu turpis. Nunc nec ipsum
diam.
</p>
</div>
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
<div id="footer">
<p class="credits">
This site has been developed for educational purposes. Which
means it’s not a site at all, really.
</p>
<ul class="validators">
<li><a href="http://validator.w3.org/check?uri=referer" title="Validate this page's XHTML">XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this page's CSS">CSS</a></li>
</ul>
</div>
</div>
</body>
</html>