penchantforphotos : Design 6 « Templates « HTML / CSS






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

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.outtabox
64.oxidation
65.package
66.paddy-harvest
67.pagedrape
68.paivi-k
69.paleforest
70.palmtrees
71.pamphlet
72.pancorbo
73.papira
74.paradigm
75.paradise1983
76.parchmenter
77.particle
78.particles
79.pastel
80.pastelco
81.pastelflowers
82.pastries
83.path-fider
84.patternmaker
85.PattyMcFatPat01
86.PattyMcFatPat03
87.pc
88.Pear Template
89.pear
90.pedestrian
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination