Sidebar Link list
<!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" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">
#sidebar {
float: left;
width: 255px;
padding: 270px 0 0 41px;
color: #97A7B7;
}
#sidebar .quote {
position: absolute;
top: 307px;
left: 670px;
}
#sidebar .about {
padding: 19px 0 44px 0;
overflow: hidden;
float: left;
}
#sidebar .about p {
padding: 15px 0 10px 0;
}
#categories {
padding: 10px 0 50px 0;
}
#categories li {
list-style-type: none;
background: url(images/bullet.gif) 5px 8px no-repeat;
line-height: 20px;
padding: 0 0 0 18px;
}
#categories li a {
color: #19ACE3;
text-decoration: underline
}
#categories li a:visited {
text-decoration: underline
}
#categories li a:hover {
text-decoration: none
}
#photos {
padding: 24px 0 80px 2px;
}
#photos li {
width: 250px;
list-style-type: none;
padding: 0 0 15px 0;
text-align: center;
}
#photos a {
font-size: 12px;
color: #19ACE3;
text-decoration: none;
}
#photos a:visited {
text-decoration: none
}
#photos a:hover {
text-decoration: underline
}
#photos a img {
margin: 0 0 8px 0;
text-decoration: none
}
#photos a img:hover {
text-decoration: none
}
</style>
</head>
<body>
<div id="sidebar">
<div class="about">
<img src="images/photo4.jpg" alt="" width="251" height="93" />
<p>Lorem ipsum dolor sit amet, consectetur adip- isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehen- derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href="#" class="more">more info about me</a>
</div>
<img src="images/title2.gif" alt="" width="251" height="26" />
<ul id="categories">
<li><a href="#">Photo Gallery #1</a></li>
<li><a href="#">Photo Gallery #2</a></li>
<li><a href="#">Photo Gallery #3</a></li>
<li><a href="#">Photo Gallery #4</a></li>
<li><a href="#">Photo Gallery #5</a></li>
<li><a href="#">Photo Gallery #6</a></li>
<li><a href="#">Photo Gallery #7</a></li>
<li><a href="#">Photo Gallery #8</a></li>
<li><a href="#">Photo Gallery #9</a></li>
</ul>
<ul id="photos">
<li><a href="#"><img src="images/image1.jpg" alt="" width="248" height="93" /></a> <a href="#">Ut enim ad minim veniam.</a></li>
<li><a href="#"><img src="images/image2.jpg" alt="" width="248" height="93" /></a> <a href="#">Sed do eiusmod tempor.</a></li>
<li><a href="#"><img src="images/image3.jpg" alt="" width="248" height="93" /></a> <a href="#">Consectetur adipisicing.</a></li>
<li><a href="#"><img src="images/image4.jpg" alt="" width="248" height="93" /></a> <a href="#">Duis aute irure dolor.</a></li>
</ul>
</div>
</body>
</html>
Related examples in the same category