Link navigation layout
?
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
.list {
width: 686px;
float: left;
margin: 41px 0 0 40px;
font-size: 11px;
color: #474747;
}
.list h3 {
font-family: Arial;
font-size: 12px;
color: #020202;
font-weight: bold;
padding: 0 0 3px 0;
display: block;
width: 686px;
border-bottom: 5px solid #BFBFBF;
float: left
}
.list .block {
width: 100px;
margin: 10px 0 15px 0
}
.list p {
width: 686px;
float: left;
padding: 13px 0 0 0
}
.pages {
width: 686px;
border-top: 5px solid #BFBFBF;
float: left;
margin: 15px 0 0 0;
padding: 3px 0 10px 0;
color: #474747
}
.pages div {
width: 600px;
height: 15px;
text-align: center;
float: left;
}
.pages a {
color: #474747;
margin: 0 2px;
}
.pages a:visited {
text-decoration: underline
}
.pages a:hover {
text-decoration: none
}
</style>
</head>
<body>
<div class="list">
<h3>Arts</h3>
<div class="block">
<a href="#">Subcategory 1</a>
<a href="#">Subcategory 2</a>
<a href="#">Subcategory 3</a>
<a href="#">Subcategory 4</a>
</div>
<div class="block">
<a href="#">Subcategory 5</a>
<a href="#">Subcategory 6</a>
<a href="#">Subcategory 7</a>
<a href="#">Subcategory 8</a>
</div>
<div class="block">
<a href="#">Subcategory 9</a>
<a href="#">Subcategory 10</a>
<a href="#">Subcategory 11</a>
<a href="#">Subcategory 12</a>
</div>
<h3>Arts links</h3>
<p>
<a href="#">Website Name</a>
Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, con- sectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.
<span>www.websitename.com</span>
</p>
<p>
<a href="#">Website Name</a>
Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, con- sectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.
<span>www.websitename.com</span>
</p>
<p>
<a href="#">Website Name</a>
Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, con- sectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.
<span>www.websitename.com</span>
</p>
<p>
<a href="#">Website Name</a>
Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, con- sectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.
<span>www.websitename.com</span>
</p>
<p>
<a href="#">Website Name</a>
Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, con- sectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.
<span>www.websitename.com</span>
</p>
<p>
<a href="#">Website Name</a>
Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, con- sectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.
<span>www.websitename.com</span>
</p>
<div class="pages">
<a href="#" class="float">Previous</a>
<div>
<a><strong>1</strong></a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
</div>
<a href="#" class="float">Next</a>
</div>
</div>
</body>
</html>
Related examples in the same category