-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml5-ch1-7.html
More file actions
113 lines (110 loc) · 4.67 KB
/
html5-ch1-7.html
File metadata and controls
113 lines (110 loc) · 4.67 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
<!-- Listing 1-7a. The new HTML5 listing (HTML5-Ch1-7.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page for semantic tags </title>
<meta charset="utf-8">
<link rel=”stylesheet” type=”text/css” href="HTML5-style-2.css">
<style>
<!-- Listing 1-7b. The Revised CSS Sheet for Figure 1-7 (html5-style-2.css)
(The key items are picked out in bold type.) -->
/*equalise for various browsers and change #header to header*/
div body header #content { margin:0; padding:0; border:0;
}
body { background:#FFF url(images/green-grad.jpg) repeat-x; margin:auto;
}
/*add display attributes for the semantic tags*/
header, footer, section, article, nav { display:block;
}
/* set general anchor styles and include the zoom fix for IE6*/
li.btn a { display: block; color: white; font-weight: bold; text-decoration: none; zoom:1;
}
/* specify mouse state styles */
/* mouseout (default) */
li.btn a { background:#559a55; color: white; border: 5px outset #559a55; padding-bottom:3px;
}
/* mouseover */
li.btn a:hover { background: red; color:white; border: 5px outset red;
}
/*mouse active*/
li.btn a:active { background:maroon; border: 5px inset maroon;
}
br.clear { clear:both;
}
#midcol img { margin-left:10px;
}
/*change #footer to footer */
footer { clear:both; color:maroon; text-align:center;
}
/*remove the # from #header*/
header {width:920px; height:180px; padding:0; border:10px white solid; background: url(images/header3.jpg); margin:10px auto;
}
h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px;
width:480px;
}
#rosette { position:relative; left:750px; top:5px;
}
#content { background-color:transparent; border-left:10px white solid;border-right:10px white solid; border-bottom:10px white solid; width: 904px; margin-top:10px; margin-left:auto; margin-right:auto; padding:8px; font-size:medium; color:maroon;
}
h2 { font-size:x-large; color:white; margin:0 0 10px 0;
}
h3 { font-size:large; color:white; margin:0 0 6px 0;
}
#leftcol { float:left; width: 310px; vertical-align:top;
}
#rightcol { width: 135px; float:right; height: 252px; margin-right:10px;
}
#midcol { margin-left:315px; margin-right:145px; margin-top:10px; -
vertical-align:top;
}
/*set nav block position and width and remove the #menu item*/
nav ul { margin:10px 0 10px 0; width:135px; float:right;
}
/*Set un-ordered list style within the menu block only. This removes bullets*/
nav li { list-style-type:none;
}
/* set general side button styles */
li.btn { margin-bottom: 3px; text-align: center; width:130px;
}
</style>
<!--conditional Javascript added-->
<!--[if lte IE 8]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header><!--<div id="hdr"> changed to <header>-->
<h1>Devon's Rural Retreats</h1>
</header>
<!--close top section - content area starts -->
<div id="content">
<h2>Award winning accommodation, self catering or bed and breakfast</h2>
<div id="leftcol">
<h3>Cottages, converted barns, caravans</h3>
<img alt="Cottage interior" title="Cottage interior" height="225"
src="images/cotdining300.jpg" width="300"><br>The superb interior
of one of our cottages
</div>
<nav><!--use the semantic tag <nav>-->
<ul><!--start of menu list-->
<li class="btn"><a href="accommodation.html" title="Accommodation">Accommodation</a></li>
<li class="btn"><a href="maps.html" title="Location Maps">Maps</a></li>
<li class="btn"><a href="faqs.html" title="Frequently Asked Questions">Information</a></li>
<li class="btn"><a href="attractions.html" title="Local attractions">Attractions</a></li>
<li class="btn"><a href="contact.html" title="Contact us">Contact Us</a></li>
<li class="btn"><a href="index.html" title="Return to Home Page">Home Page</a></li>
</ul><!--end of menu list-->
</nav><!--</div> removed and replaced with </nav> -->
<div id="midcol">
<h3>Situated in the UK's beautiful Devon countryside</h3>
<img title="Devon countryside" alt="Devon countryside" src="images/devon398.jpg" height="229" width="398">
</div>
<br class="clear">
</div><!--content section closed-->
<!--<div id=footer"> changed to <footer>-->
<footer>
<p>Footer goes here</p>
</footer>
</body>
</html>