<!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" />
<link type="text/css" rel="stylesheet" href="Viduday4.css"/>
<title>Test01</title>
</head>
<body>
<div id="div_sum">
<div id="div_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="div_image">
<img id="img1" src="anoceanofsky.jpg"/>
<h3 class="above">An ocean of sky</h3>
<p class="above"> An XHTML 1.0 Strict Template by Bryant Smith</p>
</div>
<div id="div_content">
<h4 id="h4_1">The Title of an Article</h4>
<div id="div_1">
<img id="img2" src="durban.jpg"/>
</div>
<div id="div_2">
<p id="p1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.
</p>
</div>
<h4>So Many Titles, So Little Time</h4>
<div id="div_3">
<p id="p2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.
</p>
</div>
<div id="div_4">
<img id="img3" src="robben-island.jpg"/></div>
<h4>Yet Another One!</h4>
<div id="div_5">
<img id="img4" src="touristen_wild_coast.jpg"/>
</div>
<div id="div_6">
<p id="p3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.
</p>
</div>
</div>
<div id="div_bottom">
web development by bryant smith
</div>
</div>
</body>
</html>
/* ----------------------------------CSS Document ------------------------------*/
body {
background:#0000a4
}
div {
float: left;
}
#div_sum {
width: 650px;
margin-left: 300px;
}
#div_menu {
width: 100%;
background:#0000a4;
}
#div_image {
width: 650px;
height: 320px;
border: 7px solid white;
position: relative;
}
#img1 {
position: absolute;
z-index: -1;
margin: 0;
}
#img2 {
padding-left: 10px;
}
#img3 {
padding-right: 10px;
float: right;
}
#img4 {
padding-left: 10px;
}
.above {
color: white;
margin: 5px 0px 0px 20px;
padding: 0px;
font-family:Tahoma, Geneva, sans-serif;
}
#div_content {
width: 100%;
background: white;
border: 7px solid white;
margin-top: 10px;
}
#div_menu ul {
margin: 0;
padding-top: 20px;
}
#div_menu ul li {
list-type-style: none;
text-decoration: none;
display: inline;
padding:20px;
}
#div_menu ul li a{
text-decoration: none;
background: #0000a4;
color: white;
font-family: Verdana, Geneva, sans-serif;
}
#div_menu ul li a:hover {
text-decoration: none;
background: #0000a4;
color: white;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
}
#div_1 {
float: left;
width:35%;
height: 180px;
}
#div_2 {
float: right;
width:60%;
height: 180px;
}
#div_3 {
float: left;
width:60%;
height: 180px;
}
#div_4 {
float: right;
width:35%;
height: 180px;
position: relative;
}
#div_5 {
float: left;
width:35%;
height: 180px;
}
#div_6 {
float: right;
width:60%;
height: 180px;
}
h4 {
clear: both;
font-family:Verdana, Geneva, sans-serif;
}
p {
padding: 0px;
margin: 0px 10px;
text-align:justify;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
}
#div_bottom {
width: 664px;
height: 20px;
background-image:url('footer.png');
text-align:center;
color:#CFF;
}
#div_image h1 {
font-family: Verdana, Geneva, sans-serif;
}
.png)
