cssgallery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Content Here" />
<meta name="keywords" content="Place, keyeords, here" />
<meta name="author" content="claryanWeb" />
<style type='text/css'>
body {
font: 78% sans-serif, Helvetica, arial, sans-serif;
text-align: center; /*IE centering hack*/
background: url(cssgallery-images/bg.jpg);
color: #a28465;
letter-spacing: 0.05em;
}
#wrapper {
width: 780px;
background: #fff;
color: #000;
margin: 5px auto; /*center for compliant browsers*/
text-align: left;
border: 2px solid #a28465;
padding: 10px;
}
#header {
border-bottom: 2px solid #a28465;
margin-bottom: 10px;
}
/* Lettered Title with Navigation */
ul#off {list-style-type:none; padding:0; margin:0; width:750px; height:120px; margin:0.5em auto; position:relative;}
ul#off li {display:block; width:75px; height:100px; margin:10px; position:relative; float:left;}
ul#off li.gap {margin-right:75px;}
ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute; left:0; top:0;}
ul#off a em {cursor:pointer; font-style:normal; font-weight:bold;}
ul#off a span {display:none;}
ul#off a em.hz {position:absolute; display:block; height:20px; width:75px; cursor:pointer; text-align:center; line-height:20px; color:#fff;}
ul#off a em.hzq {position:absolute; display:block; height:20px; width:50px; cursor:pointer; text-align:center; line-height:20px; color:#fff;}
ul#off a em.vtc {position:absolute; display:block; height:60px; width:25px; cursor:pointer; left:0; top:20px;}
ul#off a em.vtl {position:absolute; display:block; height:80px; width:25px; cursor:pointer; left:0; top:0;}
ul#off a em.vtp {position:absolute; display:block; height:40px; width:25px; cursor:pointer;}
ul#off a em.bk {position:absolute; display:block; height:25px; width:25px; cursor:pointer;}
ul#off a em.vtq {position:absolute; display:block; height:100px; width:25px; cursor:pointer; left:0; top:0;}
ul#off a em.toph {top:0; left:0;}
ul#off a em.midh {top:40px; left:0;}
ul#off a em.both {top:80px; left:0;}
ul#off a em.topr {top:0; left:50px;}
ul#off a em.topq {top:0; left:25px;}
ul#off a em.bktl {top:20px; left:0;}
ul#off a em.bktr {top:20px; left:50px;}
ul#off a em.bkbl {top:60px; left:0;}
ul#off a em.bkbr {top:60px; left:50px;}
.ggg em {background:#724a10;}
.aaa em {background:#e09222;}
.lll em {background:#697210;}
.eee em {background:#ff0000;}
.rrr em {background:#0000ff;}
.yyy em {background:#9933ff;}
ul#off a:hover {color:#c00; background:#ddd;}
ul#off a:hover em {background:#c6b69e; color:#724a10;}
ul#off a:hover span {display:block; width:75px; height:1px; font-size:3px; position:absolute; top:110px; left:0; border-top:5px dashed #c6b69e;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#f0ca93; color:#000;}
ul#off a:active span, ul#off a:focus span {border-top:5px solid #f0ca93;}
#container {
position:relative;
width:770px;
height:396px;
margin:20px auto 0 auto;
background:#fff url(cssgallery-images/back.gif) 75px 10px no-repeat;
}
/* Removing the list bullets and indentation */
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Remove the images and text from sight */
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
/* change the thumbnail border color */
#container a.gallery:hover {
border:1px solid #fff;
}
/* styling the :hover span */
#container a.gallery:hover span {
position:absolute;
width:372px;
height:372px;
top:10px;
left:75px;
color:#000;
background:#fff;
}
#container a.gallery:hover img {
border:1px solid #fff;
float:left;
margin-right:5px;
}
#container a.slidea {
background:url(cssgallery-images/p1_t.jpg);
height:93px;
width:60px;
}
#container a.slideb {
background:url(cssgallery-images/p1_t.jpg);
height:93px;
width:60px;
}
#container a.slidec {
background:url(cssgallery-images/p1_t.jpg);
height:93px;
width:60px;
}
#container a.slided {
background:url(cssgallery-images/p12_t.jpg);
height:60px;
width:93px;
}
* html #container a.slided {
width:91px;
w\idth:93px;
}
#container a.slidee {
background:url(cssgallery-images/p12_t.jpg);
height:60px;
width:93px;
}
#container a.slidef {
background:url(cssgallery-images/p12_t.jpg);
height:60px;
width:93px;
}
* html #container a.slidef {
width:91px;
w\idth:93px;
}
#container a.slideg {
background:url(cssgallery-images/p12_t.jpg);
height:60px;
width:93px;
}
#container a.slideh {
background:url(cssgallery-images/p1_t.jpg);
height:93px;
width:60px;
}
#container a.slidei {
background:url(cssgallery-images/p1_t.jpg);
height:93px;
width:60px;
}
#container a.slidej {
background:url(cssgallery-images/p1_t.jpg);
height:93px;
width:60px;
}
#container a.slidek {
background:url(cssgallery-images/p12_t.jpg);
height:60px;
width:93px;
}
* html #container a.slidek {
width:91px;
w\idth:93px;
}
#container a.slidel {
background:url(cssgallery-images/p12_t.jpg);
height:60px;
width:93px;
}
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
width:198px;
height:386px;
margin:5px;
float:right;
}
#container li {
float:left;
}
#container a.slideb:hover img, #container a.slidei:hover img {
float:right;
}
#container2 {
border: 2px solid #a28465;
margin-top: 10px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
}
#container2 p {
font-weight: bold;
background-color: #ffffff;
color: #a28465;
text-align: justify;
}
/* #footer */
#footer {
border-top: 2px solid #a28465;
margin-top: 10px;
padding-top: 5px;
}
#footer p {
font-size: 0.9em;
text-align: center;
font-weight: bold;
color: #a28465;
}
#footer a {
color: #a28465;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="off">
<li><a class="ggg" href="#"><em class="hz toph"></em><em class="bk bkbr"></em><em class="vtc"></em><em class="hz both">HOME</em><span></span></a></li>
<li><a class="aaa" href="#"><em class="hz toph"></em><em class="bk bktr"></em><em class="hz midh">GALLERY</em><em class="bk bkbl"></em><em class="bk bkbr"></em><em class="hz both"></em><span></span></a></li>
<li><a class="lll" href="#"><em class="vtl"></em><em class="hz both">PAGE 3</em><span></span></a></li>
<li><a class="lll" href="#"><em class="vtl"></em><em class="hz both">PAGE 4</em><span></span></a></li>
<li><a class="eee" href="#"><em class="hz toph"></em><em class="vtc"></em><em class="hz midh"></em><em class="hz both">PAGE 5</em><span></span></a></li>
<li><a class="rrr" href="#"><em class="hzq topq">PAGE 6</em><em class="vtq"></em><span></span></a></li>
<li><a class="yyy" href="#"><em class="vtp toph"></em><em class="vtp topr"></em><em class="hz midh">CONTACT</em><em class="bk bkbr"></em><em class="hz both"></em><span></span></a></li>
</ul> <!-- end of navigation" -->
</div> <!-- end of div id="header" -->
<div id="container">
<ul>
<li>
<a class="gallery slidea" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p1.jpg" alt="The Rape of the Sabine Women" title="The Rape of the Sabine Women" />
<br />
The Rape of the Sabine Women
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p1.jpg" alt="The Arno River" title="The Arno River" />
<br />
The Arno River
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p1.jpg" alt="The Duomo" title="The Duomo" />
<br />
The Duomo
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slided" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p12.jpg" alt="The Uffizi Gallery" title="The Uffizi Gallery" />
<br />
The Uffizi Gallery
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span><img src="cssgallery-images/p12.jpg" alt="The Pizzi Palace" title="The Pizzi Palace" />
<br />
The Pizzi Palace
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p12.jpg" alt="The Ponte Vecchio" title="The Ponte Vecchio" />
<br />
The Ponte Vecchio
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slideg" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p12.jpg" alt="The Easter Festival" title="The Easter Festival" />
<br />
The Easter Festival
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slideh" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p1.jpg" alt="Statue of David" title="Statue of David" />
<br />
Statue of David
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidei" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p1.jpg" alt="The Bell Tower" title="The Bell Tower" />
<br />
The Bell Tower
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidej" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p1.jpg" alt="Park in Florence" title="Park in Florence" />
<br />
Park in Florence
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidek" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p12.jpg" alt="Santa Maria di Novello" title="Santa Maria di Novello" />
<br />
Santa Maria di Novello
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
<li>
<a class="gallery slidel" href="http://www.cssplay.co.uk/articles/gallery/index.html">
<span>
<img src="cssgallery-images/p12.jpg" alt="Sunset Over The Arno" title="Sunset Over The Arno" />
<br />
Sunset Over The Arno
<br />
Photo courtesy of the <strong>stock.xchng</strong>
<br />
This photo gallery, and the lettered title / menu, were built completely in CSS - from an idea by Stu Nicholls at CSS Play.
</span>
</a>
</li>
</ul>
</div>
<div id="container2">
<p>This is my second template submission to OWD, and is inspired by the CSS Photo Gallery created by Stu Nicholls at <a href="http://www.cssplay.co.uk">CSS Play</a>.
I had been looking for something which avoided the use of Javascript, or external Gallery software, and this gallery is contructed entirely in CSS.
(There are only two images - one portrait, and one landscape - due to image upload restrictions on OWD.)
I also took a liking to his lettered menu, which again is done completely in CSS - and very ingenious it is too ! <br />
Please feel free to use and abuse this template. I do not require any links back, but I would appreciate it if you left the link to CSS Play in the footer.
If the template is used in earnest, it would be nice if you could send a link <a href="mailto:enquiries@claryanweb.net">here</a>, so that I can see it in action.
Enjoy.</p>
</div>
<div id="footer">
<p>Copyright © 2006 <a href="#">Your Name</a> | <a href="http://validator.w3.org/check/referer" title="xhtml validation check"> Validate XHTML</a>
| <a href="http://jigsaw.w3.org/css-validator/" title="CSS validation check">Validate CSS</a> | <a href="http://www.cssplay.co.uk" title="CSS Play">CSS Play</a>
</p>
</div> <!-- end of div id="footer" -->
</div> <!-- end of div id="wrapper" -->
</body></html>
Related examples in the same category