Ok, here is the HTML and CSS for the above screenshots:
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>Digital Sanity Professional Conmputer Services</title>
<link rel="stylesheet" href="sanity-style.css" type="text/css" />
<!--[if IE 6]>
<style type="text/css">
#header-text {
padding-top: 0px;
}
</style>
<![endif]-->
</head>
<body>
<div class="pagebody">
<div class="header">
<div id="contact-info">Cell Phone: 717.873.3678<br />
E-mail: <a href="mailto:dustin@digitalsanityservices.com">dustin@digitalsanityservices.com</a><br />
SMS: <a href="mailto:digitalsanity@vtext.com">digitalsanity@vtext.com</a>
</div>
<p id="header-text"><span style="font-weight: bold;">Digital
Sanity Professional
Computer Services</span>
<span style="font-style: italic; margin-left: 225px;">We'll
Keep You Sane in this Digital World!</span></p>
</div>
<div>
<div class="menu">
<ul id="menu-list">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Service
List</a></li>
</ul>
</div>
<div class="content">
<h1>HOME</h1>
<div style="text-align: center;" class="photo"><img style="width: 250px; height: 214px; margin-top: 5px;" alt="The Sky is the Limit" src="index_files/sky_limit-250.jpg" />
<p style="font-style: italic; font-size: small; font-weight: bold; margin-top: 2px;">The
sky is the limit</p>
</div>
<p>We are Digital Sanity Professional Computer Services,
servicing the
Central PA region and beyond with the knowledge and skills to help
customers fulfill their digital needs. We began in 2008 with the goal
of helping our clients reach their full technological potential.
Whether it's your system, network, or any other form of electronic
hardware, we've got you covered!</p>
<p>Is your computer running slower than normal? Maybe you’d like
to get
rid of that annoying error message that you can’t even pronounce?
Whatever the problem is, we’ve got you covered. We handle Windows, Mac,
Linux, you name it, we support it! We also do desktops and laptops.
Before you go and spend your hard earned money on a new computer, call
us to see if we can make the one you have run like the one you want. </p>
<p>We also do networking for homes and small businesses. We
understand
how confusing basic networking can be, and how important it is to
secure your network to keep out unwanted intruders. We can set up your
wired or wireless network with ease, and you can feel secure knowing
that you control which people you allow on your network. </p>
<p>We also provide extensive digitizing services. We can convert
8-tracks, LP’s, and tapes to CD or MP3 format, compatible with most
popular brands of electronic music players. This can involve
restoration of the media or a straight record to digital. We also
provide photograph and slide scanning. Lastly, since your documents can
never be too secure, we’ll scan any important document to a digital
format which can be copied, backed-up and distributed as you please. We
also convert to and from any video or audio format. </p>
<p>We also type resumes, with or without a cover letter, design
logos,
file copyright papers, and type up papers. Check out our service list
for a full listing with prices. We also offer professional sound
engineering services with pricing on a case-by-case basis. </p>
<p>We do residential and commercial work, and we can take your
computer at our location or at yours.</p>
<p>Call, text, or e-mail me for a free estimate. There’s no job
to easy or too complicated.</p>
</div>
</div>
</div>
</body>
</html> CSS:
Code:
/* Generated by KompoZer */
body {
margin: 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: medium;
background-color: #33ccff;
background-image: url(index_files/wallpaper.gif);
background-repeat: repeat-y;
}
.header {
border-bottom: 1px solid black;
display: block;
background-repeat: no-repeat;
background-color: white;
padding-bottom: 0px;
margin-bottom: 0px;
background-position: left top;
height: 100px;
background-image: url(index_files/header.gif);
}
.pagebody {
border-width: 1px;
display: block;
}
.footer {
display: block;
}
.menu {
display: block;
float: left;
text-align: right;
padding-right: 10px;
width: 178px;
padding-top: 10px;
}
.content {
border-style: solid;
border-color: #33ccff;
display: block;
margin-left: 190px;
padding-left: 10px;
text-align: justify;
margin-right: 5px;
}
#contact-info {
display: block;
margin-left: 395px;
font-size: small;
padding-top: 15px;
}
h1 {
border-bottom: 1px solid black;
}
.photo {
float: right;
background-color: #cccccc;
width: 260px;
height: 240px;
display: block;
margin-left: 10px;
}
#header-text {
display: block;
margin-left: 240px;
font-size: smaller;
padding-top: 5px;
width: 770px;
}
.menu-item {
background-image: url(index_files/button.gif);
background-repeat: no-repeat;
text-align: center;
font-size: small;
padding-bottom: 20px;
}
#menu-list {
list-style-type: none;
}
.menu-item a {
text-decoration: none;
color: #ff6600;
}
.menu-item a:hover {
color: #cc0000;
font-weight: bold;
font-style: oblique;
} Of course, the locations of images referenced above will be different for you but at least you can get an idea of what I did. Of course, if anyone wants to critic and improve on the above, please do so.
Peace...
Login 
Web Design & Development 
