Upload your pictures folder to your server again.
Copy & Paste this code into a new, blank HTML document. This layout is fixed-width & centered on screen. I added some borders for demo purposes. You may delete them.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>New City Explorer</title>
<!--[if lte IE 8]>
<script type="text/javascript" src="javascript/html5.js"></script>
<![endif]-->
<style type="text/css">
/**add vertical scrollbar channel to short pages**/
html {overflow-y:scroll}
body {
margin:0;
padding:0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 90%;
color: #000;
background-color: silver;
}
#container {
width: 925px; /**adjust width as needed**/
margin:0 auto; /**with width, this is centered on screen**/
padding: 12px;
font-size: 16px;
background:#FFF;
overflow:hidden; /**to contain floats**/
border: 1px dotted red; /*for demo purposes, you may delete this**/
}
#Logo {
background-image: url(pictures/Logo_2.png);
background-repeat: no-repeat;
height: 80px;
width: 300px; /**adjust width to match your image**/
float: left;
}
header hgroup {
margin: 0 0 0 65px;
padding: 12px;
line-height: 17px;
}
ul {
padding:0;
margin:0;
}
nav {margin:0 auto; padding:0; width: 100%}
nav ul {
list-style: none;
margin-bottom: 15px;
font-weight: bold;
font-size:20px;
}
nav ul li {
float: left;
-webkit-transition-duration:.1s;
-webkit-transition-property:margin-top;
-webkit-transition-timing-function:ease-in-out;
-o-transition-duration:.1s;
-o-transition-property:margin-top;
-o-transition-timing-function:ease-in-out;
-moz-transition-duration:.1s;
-moz-transition-property:margin-top;
-moz-transition-timing-function:ease-in-out;
transition-duration:.1s;
transition-property:margin-top;
transition-timing-function:ease-in-out;
color: #3719F8;
background-color: #FFF;
padding-right: 4px;
margin-left: 16px;
}
nav ul a {
display: block;
width:140px;
padding: 10px;
text-align:center;
text-decoration: none;
color: #3719F8;
border: 2px solid #3719F8;
margin: 5px 0px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
-moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
background-color: #0000FF;
color: #FFFFFF;
}
/**clear nav floats**/
nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
section {margin-top: 25px;}
section h1 {
margin:0;
color: #000;
font-size:30px;
text-align:center;
margin-top: 45px;
font-weight:bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#vision {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:14px;
margin-top: 0;
font-weight:bold;
background:url(images/lrg_hero.jpg) no-repeat;
text-align: center;
overflow:hidden; /**to contain floats**/
}
figure {
margin-top: 0;
width: 244px;
float: left;
background-color: #DADADA;
padding: 10px;
margin: 15px;
margin-left: 23px;
border: 1px solid #999;
}
figcaption {
text-align: center;
color:#FFF;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
margin: 0;
padding: 8px 0 8px 0;
}
figcaption a{
display:block;
text-decoration: none;
padding: 4px;
color: #FFF;
font-weight: bold;
}
figcaption a:hover {background-color: #00F;}
footer {
padding: 10px 0;
clear: both;
color: #fff;
border: 1px dotted green; /**for demo purposes, you may delete**/
}
footer p {
color:#000;
margin:0 0 5px 0;
}
#phone {
font-weight:bold;
color: #000;
}
#facebookTwitter {
float: left;
width: auto;
margin-right: 25px;
}
</style>
</head>
<body>
<div id="container">
<header>
<div id="Logo">Insert Your logo image here</div>
<hgroup>
<h1>New City Explorer</h1>
<h2>Top 10 things to do in a city</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section>
<header><h1>Where will you fly to?</h1></header>
</section>
<section id="vision">
<figure> <a href="london.html">
<img src="Pictures/London_main.JPG" width="244" height="188" alt="London Main" /></a>
<figcaption><a href="london.html">London</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/brussels">
<img src="Pictures/Brussels_main.jpg" width="244" height="188" alt="Brussels main"></a>
<figcaption><a href="#">Brussels</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/chicago">
<img src="Pictures/Chicago_main.jpg" width="244" height="188" alt="Chicago Main"></a>
<figcaption><a href="#">Chicago</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/edinburgh">
<img src="Pictures/Edinburgh_main.jpg" width="244" height="188" alt="Edinburgh"></a>
<figcaption><a href="#">Edinburgh</a></figcaption>
</figure>
<figure><a href="www.newcityexplorer.com/sanfransisco">
<img src="Pictures/SF_main.jpg" width="244" height="188" alt="SF Main"></a>
<figcaption><a href="#">San Fransisco</a></figcaption>
</figure>
<figure><a href="#">
<img src="Pictures/SF_main.jpg" width="244" height="188" alt="Other"></a>
<figcaption><a href="#">Other City</a></figcaption>
</figure>
</section>
<footer>
<div id="facebookTwitter"><img src="images/icon_facebook.png" width="24" height="25" alt="Facebook"><img src="images/icon_twitter.png" width="24" height="25" alt="Twitter">
</div>
<p>© 2012 footer text goes here....</p>
</footer>
<!--end #container--></div>
</body>
</html>
Nancy O.
