Untitled

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>$
<title>layout</title>

<style>
*{margin:0; padding:0;}
#wrap{
    margin:0;
    padding:0;
}
#content{
    margin:0 auto;
    width:800px;
}

ul#nav{
    padding:0;
    margin:0;
    list-style:none;
    width:inherit;
    background:#999;
    border:2px solid black;
    display:inline-block;
    text-align:center;
}

ul#nav li{
    width:100px;
    float:left;
    background:#FFFFFF;
    position:relative;

}

ul#nav li a{
    display:block;
    padding:5px 10px;
    text-decoration:none;
    color:#000;
}
ul#nav li a:hover{
    background:#aaa;
    color:#FC0;
}

ul#nav li ul{
    position:absolute;
    top:inherit;
    left:0;
    display:none;
    list-style:none;
    width:;
    border-bottom:2px solid black;
    border-left:2px solid black;
    border-right:2px solid black;
    z-index:12;
}

ul#nav li:hover{
    background:#aaa;
}

ul#nav li:hover ul{
    display:block;
    position:absolute;
    z-index:12;

}
ul#nav li ul li{width:120px; text-align:left; }

#header img{
    float:left;

}

#header{
    height:90px;
}

#header span{
    padding:0;
    margin:0;
    background:#0000FF;
    padding-left:25px;
    position:relative;
    top:-10px
}

.clear{
    clear:both;
}

h1{margin:0; padding-bottom:10px; background:#0FC;}
#midcontent{width:inherit; height:400px; background-color:rgba(51,51,51,1); *background:#000; color:#FFF;}
#imgfloat{float:right; }
#imgfloat img{position:relative; top:-90px; left:0;}


/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 400px;
height:;
background-color: #eee;
border: 1px solid #ddd;
color:#000;
}

#slideshow ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 1%; /* IE fix */}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;}

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden;
width: 450px;}

#slideshow .slides ul {
width: 2880px;}

#slideshow .slides li {
width: 350px;
float: left;
padding: 20px;}

#slideshow .slides h2 {
margin-top: 0;}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
background-color: #ddd;
border-top: 2px solid #ccc;
}

#slideshow .slides-nav li {
float: left;}

#slideshow .slides-nav li a {
display: block;
padding: 15px 20px;
outline: none;}

.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background-color: #eee;}

.js #slideshow .slides-nav li.on a {
position: relative;
top: -4px;}

</style>

</head>

<body>
<div id="wrap">
<div id="content">


<div id="header">
<img src="website/logo.png" />
<h1>Computer Repair</h1>
<span>and in home network installation</span>
</div><!-- header end -->

<!-- Navigation bar  -->
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">repair</a></li>
<li><a href="#">installation</a></li>
<li><a href="#">data recovery</a></li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>
<!-- Navigation bar end -->


<div class="clear"></div>


<div id="midcontent"><!-- midcontent start -->
    <div id="imgfloat">
    <img src="website/page1_img.png" />
    </div><!-- imgfloat end -->

         <div>
        <div id="slideshow">
            <div class="slides">
                <ul>
                    <li id="slide-one">
                        <h2>Slide one</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Donec pretium arcu non velit. Phasellus adipiscing auctor
                            lorem. Curabitur in urna ut purus consequat sollicitudin.
                            Phasellus ut diam. Cras magna libero, tempor id, venenatis
                            sit amet, venenatis et, dui.
                        </p>
                    </li>
                    <li id="slide-two">
                        <h2>Slide two</h2>
                        <p>
                            Nam ac nibh sit amet augue ultricies sagittis. Donec sit
                            amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
                            nisi condimentum urna, sit amet molestie odio dolor non lectus.
                            Cum sociis natoque penatibus et magnis dis parturient montes,
                            nascetur ridiculus mus.
                        </p>
                    </li>
                    <li id="slide-three">
                        <h2>Slide three</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Suspendisse adipiscing dui a nibh. Integer tristique lorem
                            vitae massa. Etiam dapibus, eros sit amet euismod semper,
                            felis erat congue lacus, sed aliquam metus libero sed elit.
                        </p>
                    </li>
                </ul>
            </div>
            </div>
        </div>


</div><!-- midcontent end -->
</div> <!-- content end -->

</div> <!-- wrap end -->


</body>
</html>