xgallery
<!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>
<title>xgallery</title>
<style type='text/css'>
*
{
margin:0;
padding:0;
}
body{
font-size:10pt;
letter-spacing:1px;
background: url(xbg.gif) no-repeat 0 +25px ;
font-family: Helvetica, Arial, sans-serif;
word-spacing: 5px;
letter-spacing:-1px;
color: #515151;
}
#container{
margin: 100px auto 0 auto;
width:855px;}
#navdiv
{
text-align: right;
height:60px;
}
#navdiv ul
{
list-style-type: none;
list-style-image: none;
margin:0 auto 0 auto;
}
#navdiv ul li
{
float: right;
margin-right:10px;
list-style-type: none;
list-style-image: none;
}
#navdiv ul li a
{
padding:30px 0 0 0;
background: #d0d0d0;
display: block;
padding-top:10px;
width: 100px;
height:50px;
text-align: center;
color:#515151;
text-decoration: none;
}
#navdiv ul li a:hover
{
/*background: url(navlisttabhover.png) 0 0 no-repeat ;*/
background: #f7f7f7;
}
#navdiv ul li a.selected
{
padding:30px 0 0 0;
background: #f7f7f7;
display: block;
padding-top:10px;
width: 100px;
height:50px;
text-align: center;
color:#515151;
text-decoration: none;
}
#content
{
background-color: #f7f7f7;
padding:20px 0 20px 20px;
height:700px;
}
h1,h2,h3,h4{
padding:25px 0 5px 0 ;}
h1{font-size:8em;padding-left:40px;}
h2{font-size:2em;}
h3{font-size:1.5em;}
#picturelist {
text-align:left;
margin-right:auto;
margin-left:auto;
}
#picturelist li {
list-style:none;
float:left;
margin:42px;
font-weight:bold;
color:#777777;
}
#picturelist img{
display:block;
border:2px solid gray;
}
#picturelist img:hover{
border:2px solid #515151;
}
#picturelist a{
color:#777777;
text-decoration:none;
}
#picturelist a:hover{
color:#999999;
}
</style>
</head>
<body>
<div id ="container">
<div id = "navdiv">
<ul class = "mainlinks">
<li><a href="http://www.free-css.com/" >home</a></li>
<li><a href="http://www.free-css.com/">about</a></li>
<li><a href="http://www.free-css.com/" class="selected">gallery pics</a></li>
<li><a href="http://www.naturaldesigngroup.co.uk">ndg</a></li>
<li><a href="http://www.planetphotoshop.com">planetphotoshop</a></li>
</ul>
</div>
<div id="content">
<ul id="picturelist">
<li>a tree<a href="http://www.free-css.com/"><img src="xgallery-images/autumntree.jpg" alt="a tree"/></a></li>
<li>the sea<a href="http://www.free-css.com/"><img src="xgallery-images/bluesea.jpg" alt="the sea"/></a></li>
<li>the forest<a href="http://www.free-css.com/"><img src="xgallery-images/greenforest.jpg" alt="the forest"/></a></li>
<li>a bunch of orange flowers<a href="http://www.free-css.com/"><img src="xgallery-images/orangeflowers.jpg" alt="a bunch of orange flowers"/></a></li>
<li>a turtle in the sea<a href="http://www.free-css.com/"><img src="xgallery-images/turtleblue.jpg" alt="a turtle in the sea"/></a></li>
<li>a garden/jungle thing<a href="http://www.free-css.com/"><img src="xgallery-images/jungle.jpg" alt="a garden/jungle thing"/></a></li>
<li>an oryx antelope in the desert<a href="http://www.free-css.com/"><img src="xgallery-images/antelope.jpg" alt="an oryx antelope in the desert"/></a></li>
<li>mesas in the desert<a href="http://www.free-css.com/"><img src="xgallery-images/desert.jpg" alt="mesas in the desert"/></a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category