我似乎无法将<h1>放在我的标题中？有没有人有任何想法？我也试图将我的searbar与右侧对齐，以便它与徽标和h1处于同一水平。提前谢谢大家！
.div1,
.div2,
.div3,
.div4 {
border: 1px solid;
}
.list {
display: inline;
}
.div1 {
height: 525px;
float: right;
width: 40%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.divsearch {
height: 200x;
float: right;
width: 10%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
}
.div2 {
height: 250px;
float: left;
width: 55%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.div3 {
height: 250px;
float: left;
width: 27.5%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
margin-right: 7px;
}
.div4 {
height: 250px;
float: ;
width: 25%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.div5 {
height: 250px;
float: left;
width: 40%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.div6 {
height: 250px;
float: right;
width: 55%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
margin-bottom: 10px;
}
.div7 {
height: 70px;
width: 99%;
color: white;
background-color: #333333;
border: 2px solid #AAAAAA;
overflow: hidden;
font-family: Humanst521, verdana, arial, sans-serif;
letter-spacing: 0.1em;
font-size: 12px;
margin-top: 10px;
padding: 10px 5px 10px;
}
.divsurvey {
height: 100%;
float: center;
width: 98%;
border-color: #AAAAAA;
color: #20202F;
background-color: white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
#sidebar {
float: left;
border: 10px;
padding-left: 1%;
padding-right: 1%;
border-left-style: solid;
border-left-color: #BBBBBB;
border-right-style: solid;
border-right-color: #BBBBBB;
}
.vgap1 {
width: 100%;
height: 10px;
border: 0px;
float: right;
}
.vgap2 {
width: 1%;
height: 10px;
border: 0px;
float: right;
}
.hgap1 {
width: 10%;
height: 10px;
}
#wrapper {
margin: 0 auto;
width: 100%;
min-width: 900px;
max-width: 1200px;
}
.buttonPosition {
text-align: center;
}
body {
background-color: #FFFFFF;
font-family: Humanst521;
background-image: url("bg.png")
}
header {
font-size: 150%;
padding: 10px;
background-color: #333333;
}
@font-face{
font-family:"Humanst521";
src:url('font/tt0288m_.ttf') format('truetype');
}
#map-canvas {
width: 300px;
height: 250px;
}
h1 {
text-align: center;
color: #FFFFFF;
font: 2em"Humanst521", Arial, Helvetica, Geneva, sans-serif;
}
#nav-div {
float: left;
width: 100%;
text-align: center;
border: 1.5px solid #FFFF26;
border-bottom: none;
}
#dropdown {
margin-right: auto;
margin-left: auto;
}
#slider {
opacity: 1;
transition: opacity 1s;
}
#slider.fadeOut {
opacity: 0;
}
.nav-item {
width: 20%;
margin-right: auto;
margin-left: auto;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
width: 100%;
display: none;
}
ul li a {
display: block;
background: #FFBF00;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: white;
border-bottom: 1px solid #FFFF26;
}
ul li a:hover {
background: #FF4000;
}
li:hover ul {
display: block;
position: absolute;
background: #FFBF00;
}
li:hover li {
float: none;
background: #FF8000;
border-bottom: none;
}
li:hover a {
background: #FF8000;
}
li:hover li a:hover {
background: #FF4000;
}
img {
float: left;
padding: 0px 15px 15px 0px;
/*--position: absolute;
transition: opacity .5s ease-in;
max-width:100%;
max-height:100%;
margin: auto;
display: block;
}
img + img
{
opacity: 0;
*/
}
p {
font-family: 'Humanst521', verdana, arial, sans-serif;
}
main {
background-color: #AAAAAA;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
overflow: hidden;
font-family: 'Humanst521', sans-serif;
}
th {
background-color: #FF8000;
color: white;
font-family: 'Humanst521', verdana, arial, sans-serif;
letter-spacing: 0.1em;
font-weight: strong;
}
td {
font-family: 'Humanst521', verdana, arial, sans-serif;
letter-spacing: 0.1em;
}<!DOCTYPE html>
<html lang=" en">
<head>
<title>Lorem Ipsum</title>
<meta charset=" utf-8">
<link rel="stylesheet" href="omega.css">
</head>
<div id="wrapper">
<header>
<img alt="logo" src="images/logo.png" width="200px" height="100px" style="margin:10px 0px">
<h1>Lorem Ipsum</h1>
<div id="divsearch" align="right">
<form action="http://www.google.ca/search?query=" method="query">
<input type="text" name="query" size="15" maxlength="70">
<input type="submit" name="Submit" value="Search">
</form>
</div>
</header>
<main>
<body>
<div id="sidebar">
<nav id="nav-div">
<ul id="dropdown">
<li class="nav-item"><a href="index.html">Home</a>
</li>
<li class="nav-item"><a href="#">Web Design</a>
<ul>
<li><a href="http://www.google.com">Google</a>
</li>
<li><a href="https://lethbridge.instructure.com/login/canvas">LC Canvas</a>
</li>
<li><a href="#">TBD</a>
</li>
</ul>
</li>
<li class="nav-item"><a href="#">Survey</a>
<ul>
<li><a href="survey.html">take the survey</a>
</li>
</ul>
</li>
<li class="nav-item"><a href="#">Directory</a>
<ul>
<li><a href="aboutme.html">about the developer</a>
</li>
</ul>
</li>
<li class="nav-item"><a href="#">Contact</a>
<ul>
<li><a href="mailto:nickpc15@gmail.com">eMail Me</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="vgap1">
</div>
<div class="div1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="div2">
<script type="text/javascript">
var slideimages = new Array() //array images
slideimages[0] = new Image() //First image objects
slideimages[1] = new Image() //2nd image objects
slideimages[2] = new Image()
slideimages[3] = new Image()
slideimages[4] = new Image()
slideimages[5] = new Image()
slideimages[6] = new Image()
slideimages[7] = new Image()
slideimages[8] = new Image()
slideimages[9] = new Image()
slideimages[0].src = "images/pic1.jpg" //First image obj. source,
slideimages[1].src = "images/pic2.jpg" //2nd image source,
slideimages[2].src = "images/pic3.jpg"
slideimages[3].src = "images/pic4.jpg"
slideimages[4].src = "images/pic5.jpg"
slideimages[5].src = "images/pic6.jpg"
slideimages[6].src = "images/pic7.jpg"
slideimages[7].src = "images/pic8.jpg"
slideimages[8].src = "images/pic9.jpg"
slideimages[9].src = "images/pic10.jpg"
</script>
</head>
<body>
<img src="images/pic1.jpg" id="slide" width=100% height=100% />
<script type="text/javascript">
var step = 0
function slidepic() {
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step < 9) {
step++;
} else {
step = 0;
}
setTimeout("slidepic()", 3000);
}
slidepic();
</script>
<!--<script type="text/javascript">
var current = 0,
slides = document.getElementsByTagName("img");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 3000);
</script>
<img src="images/pic1.jpg" alt="pic1" height="100%" width="100%">
<img src="images/pic2.jpg" alt="pic2" height="100%" width="100%">
<img src="images/pic3.jpg" alt="pic3" height="100%" width="100%">
<img src="images/pic4.jpg" alt="pic4" height="100%" width="100%">
<img src="images/pic5.jpg" alt="pic5" height="100%" width="100%">
<img src="images/pic6.jpg" alt="pic6" height="100%" width="100%">
<img src="images/pic6.jpg" alt="pic6" height="100%" width="100%">
<img src="images/pic7.jpg" alt="pic7" height="100%" width="100%">
<img src="images/pic8.jpg" alt="pic8" height="100%" width="100%">-->
</div>
<div class="div3">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="div4">
<script LANGUAGE="Javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(49.661997, -112.807087),
zoom: 8,
mapTypeID: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
</div>
<div class="vgap1">
</div>
<div class="div5">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.</p>
</div>
<div class="div6">
<table width="100%">
<tr>
<td colspan="12" align="center" bgcolor="#333333"><font color="FFFFFF"><b>Schedule</b></font>
</td>
</tr>
<tr bgcolor="#AAAAAA">
<td bgcolor="white"></td>
<td>8-9am</td>
<td>10-11am</td>
<td>12pm-13pm</td>
<td>14pm-15pm</td>
<td>16pm-17pm</td>
</tr>
<tr>
<th>Monday</th>
<td bgcolor="#D90000"></td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="7" color="AAAAAA" align="center">sleep</td>
</tr>
<tr>
<th>Wednesday</th>
<td>look at alarm</td>
<td colspan="2">sleep some more</td>
<td><font color="#FFBF00">bathroom</td>
</tr>
<tr rowspan="2">
<th>Thursday</th>
<td></td>
<td>CPU1001</td>
<td>Phys3100</td>
</tr>
<tr bgcolor="#aacc00">
<th>Friday</th>
<td>Eng2340</td>
<td>Office</td>
<td>Office</td>
</tr>
<tr bgcolor="#aacc00">
<th>Saturday</th>
<td>Eng2340</td>
<td>Office</td>
<td>Office</td>
</tr>
<tr bgcolor="#aacc00">
<th>Sunday</th>
<td>Eng2340</td>
<td>Office</td>
<td>Office</td>
</tr>
</table>
</div>
<div class="div7">
<table style="width:100%">
<a href="http://www.facebook.com">
<img border="0" alt="facebook" src="images/facebook-flat-vector-logo-400x400.png" width="50" height="50"></a>
<a href="http://www.twitter.com">
<img border="0" alt="twitter" src="images/Twitter-icon.png" width="50" height="50"></a>
<p align="right">Address:555 Evergreen Terrace, Copyright © 2015 | Privacy Policy | Legal Issues | <a href="mailto:nickpc15@gmail.com">Contact</a></strong></p>
</div>
</main>
<audio autoplay="autoplay" loop="loop" hidden="true">
<source src="images/Sleep Away.mp3" type="audio/mpeg">
</audio>
</body>
</html>
答案 0 :(得分：0)
现在习惯了这个css我有一些修改你的代码
.imgParentSec{position:relative;}
.imgSec{
position:absolute;
left:10px;
top:0;
}
我在img parent中创建了一个div，就像这样
<header class="imgParentSec">
<div class="imgSec"><img alt="logo" src="images/logo.png" width="200px" height="100px" style="margin:10px 0px"></div>
演示代码
.div1,.div2,.div3,.div4
{
border:1px solid;
}
.imgParentSec{position:relative;}
.imgSec{
position:absolute;
left:10px;
top:0;
}
.list{
display: inline;
}
.div1
{
height: 525px;
float: right;
width: 40%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.divsearch
{
height: 200x;
float: right;
width: 10%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
}
.div2
{
height:250px;
float:left;
width: 55%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.div3{
height:250px;
float:left;
width: 27.5%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
margin-right:7px;
}
.div4{
height:250px;
float:;
width: 25%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.div5
{
height: 250px;
float: left;
width: 40%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
.div6
{
height:250px;
float:right;
width: 55%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
margin-bottom:10px;
}
.div7
{
height:70px;
width:99%;
color:white;
background-color:#333333;
border:2px solid #AAAAAA;
overflow: hidden;
font-family:Humanst521, verdana, arial, sans-serif;
letter-spacing: 0.1em;
font-size: 12px;
margin-top:10px;
padding: 10px 5px 10px;
}
.divsurvey
{
height: 100%;
float: center;
width: 98%;
border-color:#AAAAAA;
color:#20202F;
background-color:white;
overflow: hidden;
padding: 10px 10px 10px 10px;
}
#sidebar
{
float:left;
border:10px;
padding-left:1%;
padding-right:1%;
border-left-style: solid;
border-left-color: #BBBBBB;
border-right-style: solid;
border-right-color: #BBBBBB;
}
.vgap1
{
width:100%;
height:10px;
border: 0px;
float: right;
}
.vgap2
{
width:1%;
height:10px;
border: 0px;
float: right;
}
.hgap1
{
width:10%;
height:10px;
}
#wrapper {
margin: 0 auto;
width: 100%;
min-width: 900px; max-width: 1200px;
}
.buttonPosition{ text-align: center; }
body
{
background-color:#FFFFFF;
font-family:Humanst521;
background-image: url("bg.png")
}
header
{
font-size: 150%;
padding: 10px;
background-color: #333333;
}
@font-face{
font-family: "Humanst521";
src: url('font/tt0288m_.ttf') format('truetype');
}
#map-canvas {
width: 300px;
height: 250px;
}
h1 {
text-align: center;
color:#FFFFFF;
font: 2em "Humanst521", Arial, Helvetica, Geneva, sans-serif;
}
#nav-div
{
float:left;
width:100%;
text-align: center;
border: 1.5px solid #FFFF26;
border-bottom: none;
}
#dropdown
{
margin-right:auto;
margin-left:auto;
}
#slider{
opacity:1;
transition: opacity 1s;
}
#slider.fadeOut
{
opacity:0;
}
.nav-item
{
width:20%;
margin-right:auto;
margin-left:auto;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul
{
width:100%;
display: none;
}
ul li a
{
display: block;
background: #FFBF00;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: white;
border-bottom: 1px solid #FFFF26;
}
ul li a:hover
{
background: #FF4000;
}
li:hover ul
{
display: block;
position: absolute;
background:#FFBF00;
}
li:hover li
{
float: none;
background:#FF8000;
border-bottom: none;
}
li:hover a
{
background: #FF8000;
}
li:hover li a:hover
{
background: #FF4000;
}
img {
float:left;
padding:0px 15px 15px 0px;
/*--position: absolute;
transition: opacity .5s ease-in;
max-width:100%;
max-height:100%;
margin: auto;
display: block;
}
img + img
{
opacity: 0;
*/
}
p{
font-family: 'Humanst521', verdana, arial, sans-serif;
}
main {
background-color: #AAAAAA;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
overflow: hidden;
font-family: 'Humanst521', sans-serif;
}
th{
background-color:#FF8000;
color: white;
font-family: 'Humanst521', verdana, arial, sans-serif;
letter-spacing: 0.1em;
font-weight: strong;
}
td
{
font-family: 'Humanst521', verdana, arial, sans-serif;
letter-spacing: 0.1em;
}<!DOCTYPE html>
<html lang=" en">
<head>
<title>Lorem Ipsum</title>
<meta charset=" utf-8">
<link rel="stylesheet" href="omega.css">
</head>
<div id="wrapper">
<header class="imgParentSec">
<div class="imgSec"><img alt="logo" src="images/logo.png" width="200px" height="100px" style="margin:10px 0px"></div>
<h1>Lorem Ipsum</h1>
<div id="divsearch" align="right">
<form action="http://www.google.ca/search?query=" method="query">
<input type="text" name="query" size="15" maxlength="70">
<input type="submit" name="Submit" value="Search">
</form>
</div>
</header>
<main>
<body>
<div id="sidebar">
<nav id="nav-div">
<ul id="dropdown">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="#">Web Design</a>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="https://lethbridge.instructure.com/login/canvas">LC Canvas</a></li>
<li><a href="#">TBD</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Survey</a>
<ul>
<li><a href="survey.html">take the survey</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Directory</a>
<ul>
<li><a href="aboutme.html">about the developer</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Contact</a>
<ul>
<li><a href="mailto:nickpc15@gmail.com">eMail Me</a></li>
</ul>
</li>
</ul>
</nav>
<div class="vgap1">
</div>
<div class="div1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="div2">
<script type="text/javascript">
var slideimages = new Array() //array images
slideimages[0] = new Image() //First image objects
slideimages[1] = new Image() //2nd image objects
slideimages[2] = new Image()
slideimages[3] = new Image()
slideimages[4] = new Image()
slideimages[5] = new Image()
slideimages[6] = new Image()
slideimages[7] = new Image()
slideimages[8] = new Image()
slideimages[9] = new Image()
slideimages[0].src = "images/pic1.jpg" //First image obj. source,
slideimages[1].src = "images/pic2.jpg" //2nd image source,
slideimages[2].src = "images/pic3.jpg"
slideimages[3].src = "images/pic4.jpg"
slideimages[4].src = "images/pic5.jpg"
slideimages[5].src = "images/pic6.jpg"
slideimages[6].src = "images/pic7.jpg"
slideimages[7].src = "images/pic8.jpg"
slideimages[8].src = "images/pic9.jpg"
slideimages[9].src = "images/pic10.jpg"
</script>
</head>
<body>
<img src="images/pic1.jpg" id="slide" width=100% height=100% />
<script type="text/javascript">
var step=0
function slidepic()
{
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<9)
{
step++;
}
else
{
step=0;
}
setTimeout("slidepic()",3000);
}
slidepic();
</script>
<!--<script type="text/javascript">
var current = 0,
slides = document.getElementsByTagName("img");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 3000);
</script>
<img src="images/pic1.jpg" alt="pic1" height="100%" width="100%">
<img src="images/pic2.jpg" alt="pic2" height="100%" width="100%">
<img src="images/pic3.jpg" alt="pic3" height="100%" width="100%">
<img src="images/pic4.jpg" alt="pic4" height="100%" width="100%">
<img src="images/pic5.jpg" alt="pic5" height="100%" width="100%">
<img src="images/pic6.jpg" alt="pic6" height="100%" width="100%">
<img src="images/pic6.jpg" alt="pic6" height="100%" width="100%">
<img src="images/pic7.jpg" alt="pic7" height="100%" width="100%">
<img src="images/pic8.jpg" alt="pic8" height="100%" width="100%">-->
</div>
<div class="div3">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="div4">
<script LANGUAGE="Javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapCanvas = document.getElementById('map-canvas');
var mapOptions =
{
center: new google.maps.LatLng(49.661997, -112.807087),
zoom: 8,
mapTypeID:google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
</div>
<div class="vgap1">
</div>
<div class="div5">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.</p>
</div>
<div class="div6">
<table width="100%">
<tr>
<td colspan="12" align="center" bgcolor="#333333"><font color="FFFFFF"><b>Schedule</b></font></td>
</tr>
<tr bgcolor="#AAAAAA">
<td bgcolor="white"></td>
<td>8-9am</td>
<td>10-11am</td>
<td>12pm-13pm</td>
<td>14pm-15pm</td>
<td>16pm-17pm</td>
</tr>
<tr>
<th>Monday</th>
<td bgcolor="#D90000"></td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="7" color="AAAAAA" align="center">sleep</td>
</tr>
<tr>
<th>Wednesday</th>
<td>look at alarm</td>
<td colspan="2">sleep some more</td>
<td><font color="#FFBF00">bathroom</td>
</tr>
<tr rowspan="2">
<th>Thursday</th>
<td></td>
<td>CPU1001</td>
<td>Phys3100</td>
</tr>
<tr bgcolor="#aacc00">
<th>Friday</th>
<td>Eng2340</td>
<td>Office</td>
<td>Office</td>
</tr>
<tr bgcolor="#aacc00">
<th>Saturday</th>
<td>Eng2340</td>
<td>Office</td>
<td>Office</td>
</tr>
<tr bgcolor="#aacc00">
<th>Sunday</th>
<td>Eng2340</td>
<td>Office</td>
<td>Office</td>
</tr>
</table>
</div>
<div class="div7">
<table style="width:100%">
<a href="http://www.facebook.com">
<img border="0" alt="facebook" src="images/facebook-flat-vector-logo-400x400.png" width="50" height="50"></a>
<a href="http://www.twitter.com">
<img border="0" alt="twitter" src="images/Twitter-icon.png" width="50" height="50"></a>
<p align="right">Address:555 Evergreen Terrace, Copyright © 2015 | Privacy Policy | Legal Issues | <a href="mailto:nickpc15@gmail.com">Contact</a></strong></p>
</div>
</main>
<audio autoplay="autoplay" loop="loop" hidden="true">
<source src="images/Sleep Away.mp3" type="audio/mpeg">
</audio>
</body>
</html>