<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cougar Inn Directions</title>
<link rel="stylesheet" type="text/css" href="case.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="case.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div id="header">
<h1>Welcome to the Cougar Hotel</h1>
</div>
<div id="navcon">
<div id="nav">
<ul>
<li style="border-Left: 1px solid #e9e9e9"><a href="cougarhome.html">Home</a></li>
<li><a href="#">About Cougar Inn </a>
<ul>
<li><a href="#">Accommodations</a></li>
<li><a href="#">Services/Amenities</a></li>
<li><a href="#">Meeting/Events</a></li>
</ul>
</li>
<li><a href="cougarreservation.html">Reservations</a></li>
<li><a href="cougardirections.html">Directions</a></li>
<li><a href="contactus.php">Contact Us</a>
<ul>
<li><a href="contactus.php#phone">Phone</a></li>
<li><a href="contactus.php#email">Email</a></li>
<li><a href="contactus.php#feedback">Feedback</a></li>
</ul>
</li>
</ul>
</div>
<!-- end navcon -->
</div>
<!-- end nav -->
<div id="pagewrapper">
<div class="pagecon">
<h2>This is class pagecon</h2>
<p>
<div id="slideshow">
<div>
<img src="hotel 1 s.jpg" alt="HomePic1">
</div>
<div>
<img src="hotel 4 s.jpg">
</div>
<div>
<img src="hotel 6 s.jpg">
</div>
</div>
<div class="bodycon">
<h1>Directions to</h1>
<iframe width="425" height="350"
src="https://maps.google.com/maps;output=embed"></iframe>
</div>
<!--end bodycon -->
<table border='1' class="tablecon">
<tbody>
<tr>
<td>
<p>
*From Hwy 37 get off at the Stadium exit and head<br>
east down Broadway to N College Ave. Turn right on College<br>
onto Bangle Street. We are right next to Columbia College.
</p>
</td>
<tr>
<td>
<p>
*From I-141 get off at the Hues St exit. Head south<br>
on Hues till you get to Bangle St. Turn right on Bangle<br>
and you will see the Bangle Inn next to the College.<p>
</td>
</tr>
</tbody>
</table>
</div>
<!--end class pagecont -->
</div>
<!-- end pagewrapper -->
</body>
</html>
The following CSS styles have been applied:
* {
margin: 0px;
padding: 0px;
}
#header {
background-image: url(./headimg.jpg);
height: 60px;
background-repeat: repeat;
}
#navcon {
background-image: url(./wood.jpg);
width: 100%;
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #083272;
}
#nav {
width: 450px;
height: 30px;
position: relative;
color: #080808;
font-family: arial, sans-serif;
margin: 0px auto;
font-size: .9em;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
border-right: 1px solid #e9e9e9;
padding: 5px;
display: block;
text-align: center;
color: #080808;
text-decoration: none;
}
#nav ul li a:hover {
background: #144678;
color: #fff;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: absolute;
z-index: 1;
}
#nav ul li:hover ul li a {
display: block;
background: #144678;
color: #fff;
width: 120px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background: #4879A5;
color: #fff;
}
body {
background: #B5C4D9;
}
#pagecont {
width: 980px;
margin: 0 auto;
position: relative;
}
.pagecon {
background-image: url(./mainbackimg.jpg);
margin: 15px;
padding: 15px;
border-style: solid;
position: relative;
min-height: 100%;
float: left;
}
.bodycon {
background: #5F86C0;
margin: 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
float: left;
}
.tablecon {
margin: 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
float: left;
}
#slideshow {
margin: 10px auto;
position: relative;
width: 350px;
height: 247px;
padding: 10px;
float: left;
border-style: solid;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
I'm trying to align the boxes so that the pictures are on the left. The "directions to" box should be next to the pictures box and aligned with it vertically. The table should be placed directly below the pictures box without too much space in between. I've been tweaking this layout for some time now and would appreciate any assistance.