penchantforphotos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Penchant for Photos</title>
<style type='text/css'>
* {
padding: 0;
margin: 0; /*THIS FIXES POSITIONING PROBLEMS IN IE*/
}
body {
background: url(penchantforphotos-images/background.png);
font-family: trebuchet MS, sans-serif;
font-size: 100%;
}
div#container {
position: absolute;
top: 50%;
width: 96%; /* MUST BE 100% MINUS THE LEFT AND RIGHT MARGINS */
height: 500px;
margin-top: -250px; /* MUST BE HALF OF THE HEIGHT */
margin-left: 2%;
margin-right: 2%;
background: #DC7F32;
}
/*----------------------------------------------------------------
STYLES FOR THE TITLE/SLOGAN DIVS
-----------------------------------------------------------------*/
#title {
position: absolute;
display: inline; /* PREVENTS OTHER DIVS FROM WRAPPING */
background: url(penchantforphotos-images/orangebackground.jpg) no-repeat;
float: left;
margin: 10px 2%;
width: 26%;
height: 480px;
}
#title h1 {
font-family: trebuchet MS, sans-serif;
font-size: 22px;
color: black;
text-align: right;
margin: 200px 30px 0 0;
}
#title h1 span {
color: #1A658D;
}
#title h2 {
font-family: trebuchet MS, sans-serif;
font-size: 18px;
color: #1A658D;
text-align: right;
margin: 5px 20px 0 0;
}
/*------------------------------------------------------------------
STYLES FOR THE NAVIGATION MENU DIV
------------------------------------------------------------------*/
#nav {
background: url(penchantforphotos-images/separator.jpg) no-repeat;
display: inline;
position: absolute;
margin-left: 30%;
width: 20%;
height: 100%; /* MUST BE 100% FOR SEPARATOR IMAGE TO BE VISIBLE */
}
#nav ul {
font-size: 18px;
font-weight: bold;
list-style: none;
margin-left: 20px;
margin-top: 108px; /* DEPENDING ON THE NUMBER OF LINKS IN THE NAVBAR, AND THE SIZE OF THE BACKGROUND IMAGES, YOU MAY NEED TO ADJUST THIS NUMBER TO VERTICALLY CENTER THE NAVBAR */
}
#nav ul li {
line-height: 32px; /* HEIGHT OF BACKGROUND IMAGE */
margin-bottom: 10px; /* SPACES OUT LIST ITEMS */
}
#link1 {background: url(penchantforphotos-images/nav/home.png) no-repeat;}
#link2 {background: url(penchantforphotos-images/nav/gallery.png) no-repeat;}
#link3 {background: url(penchantforphotos-images/nav/compass.png) no-repeat;}
#link4 {background: url(penchantforphotos-images/nav/globe.png) no-repeat;}
#link5 {background: url(penchantforphotos-images/nav/world.png) no-repeat;}
#link6 {background: url(penchantforphotos-images/nav/info.png) no-repeat;}
#link7 {background: url(penchantforphotos-images/nav/contact.png) no-repeat;}
#nav ul li a:link, #nav ul li a:hover, #nav ul li a:visited {
display: block; /* THIS MAKES THE ENTIRE LIST ITEM CLICKABLE (NOT JUST TEXT) */
width: 100%;
color: #000000;
text-decoration: none;
text-indent: 35px; /* ACTS LIKE LEFT PADDING */
}
#nav ul li a:link, #nav ul li a:visited {
border-right: 5px #E29A5F solid;
}
#nav ul li a:hover {
border-right: 5px #1A658D solid;
color: #1A658D;
}
#nav ul li a#active {
border-right: 5px #1A658D solid;
color: #1A658D;
}
/*-----------------------------------------------------------------
STYLES FOR THE CONTENT DIV
-----------------------------------------------------------------*/
#content {
position: absolute;
display: inline;
background: url(penchantforphotos-images/orangebackground.jpg) no-repeat fixed center right; /* POSITION MUST BE CENTER-RIGHT TO SHOW UP CORRECTLY IN FF */
width: 46%; /* WIDTH = 100% - (MARGIN-RIGHT + MARGIN-LEFT) */
height: 476px; /* HEIGHT = CONTAINER HEIGHT - (MARGIN-TOP + MARGIN-BOTTOM + BORDER-TOP + BORDER-BOTTOM) */
margin: 10px 2% 10px 52%;
border: 2px #1A658D solid;
overflow: auto;
}
#content h1 {
color: #1A658D;
font-size: 2em;
margin-left: 10px;
}
#content p {
margin: 5px 5px 0 5px;
text-align: justify;
text-indent: 1em;
}
#content a {
color: #FFFFCC;
text-decoration: underline;
letter-spacing: 0.1em;
}
/*-----------------------------------------------------------------
STYLES FOR THE GALLERY IMAGES
-----------------------------------------------------------------*/
.galleryimage {
float: left; /* THIS LETS THE DIVS DISPLAY AS INLINE, AND WRAP ACCORDING TO THE SCREEN SIZE */
border: 2px #FFFFCC solid;
margin: 5px;
padding: 2px;
text-align: center;
width: 104px;
height: auto;
text-decoration: none;
}
.galleryimage a {
text-decoration: none;
}
.galleryimage img {
border: none;
}
</style>
<link href="lightbox.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<div id="container">
<div id="title">
<h1>penchant<span>for</span>photos</h1>
<h2>gallery-style template</h2>
</div>
<div id="nav">
<ul>
<li id="link1"><a href="index.html">home</a></li>
<li id="link2"><a href="gallery.html" id="active">gallery</a></li>
<li id="link3"><a href="#">location</a></li>
<li id="link4"><a href="#">globalization</a></li>
<li id="link5"><a href="#">save the earth</a></li>
<li id="link6"><a href="#">info</a></li>
<li id="link7"><a href="#">contact</a></li>
</ul>
</div>
<div id="content">
<h1>gallery</h1>
<p>I would really have liked to implement a cool DHTML or JavaScript gallery demo here, but the "no script" rule at OSWD forces me to only give you a link to a tutorial on what I wanted to do. This gallery technique was mentioned on the designologue, that is Lokesh Dhakar's <a target="_blank" href="http://www.huddletogether.com/projects/lightbox/">Lightbox technique</a>.</p>
<p>I have included some sample images, with the formatting done so that you can implement the Lightbox technique very easily. I have included the lightbox.css file and the two images needed for the technique, you just need to download the <a target="_blank" href="http://www.huddletogether.com/projects/lightbox/lightbox.js">lightbox.js</a> file to see the script in action.</p>
<div class="galleryimage"><a href="penchantforphotos-images/gallery/sunrise1.jpg" rel="lightbox" title="Lightbox Comment Goes Here"><img src="penchantforphotos-images/gallery/sunrise1-thumbnail.jpg" alt="Image #1" /><br />Sunrise 1</a></div>
<div class="galleryimage"><a href="penchantforphotos-images/gallery/sunrise2.jpg" rel="lightbox" title="Lightbox Comment Goes Here"><img src="penchantforphotos-images/gallery/sunrise2-thumbnail.jpg" alt="Image #2" /><br />Sunrise 2</a></div>
<div class="galleryimage"><a href="penchantforphotos-images/gallery/sunrise3.jpg" rel="lightbox" title="Lightbox Comment Goes Here"><img src="penchantforphotos-images/gallery/sunrise3-thumbnail.jpg" alt="Image #3" /><br />Sunrise 3</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category