-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample_fixed.html
79 lines (61 loc) · 2.36 KB
/
example_fixed.html
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
<!--
Copyright 2013, Sal Razzaq.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fixed - 960px</title>
<link rel="stylesheet" href="elob_layout.css" type="text/css" />
</head>
<body>
<div id="elob_container">
<div id="elob_banner" style="background-color: yellow;">
<div style=" padding:10px;">
<!-- Application name and logo go here -->
<div>Application Logo, Name, User Context</div>
</div>
</div> <!-- header -->
<div id="elob_nav" style="background-color: silver;">
<div style=" padding:10px;">
<!-- Commands (links) go here -->
<div>Command 1</div>
<div>Command 2</div>
<div>Command 3</div>
<div>Command 4</div>
<div>Command 5</div>
<div>Command 6</div>
</div>
</div> <!-- nav -->
<div id="elob_content" style="width:700px">
<div style=" padding:5px;">
<!-- Dynamic content goes here -->
<div class="elob_fixedwidth">
<h2>Fixed Layout</h2>
<p>By enclosing the content in a div of CSS class <i>elob_fixedwidth</i> we are fixing the width of the page to 960px. The page width never grows beyond 960px. Try resizing your Browser window to see the effect.</p>
<p>Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data </p>
<form>
<div>Name: <input type="text"/></div>
<div>Address: <input type="text"/></div>
</form>
</div> <!-- fixed width -->
</div>
</div> <!-- content -->
<div id="elob_footer">
<div style=" padding:10px;">
<!-- Your copyright notice goes here -->
Copyright (c) XYZ 2013. All Rights Reserved.
</div>
</div> <!-- footer -->
</div> <!-- container -->
</body>
</html>