Menu
Hi guys I am almost done in designing my layout for my photography gallery. ([url]www.digitaleyesandears.com/test
Thanks
Adam
#####CSS######
body {
background-color:#959494;
text-align:center;
}
#wrapper {
width:875px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
}
#contentleft {
width:135px;
height:585px;
padding:0px;
float:left;
background:#fff;
border:2px;
border-style:solid;
border-color:black;
background-color:#333333;
}
#contentcenter {
width:696px;
height:585px;
padding:20px;
float:left;
text-align:left;
background-color:#10100e;
text-align:center;
}
#contentimage {
width:425px;
height:500px;
padding:0px;
margin-top:30px;
margin-bottom:auto;
text-align:center;
}
#footer {
text-align:center;
font: normal 11px “Lucida Grande”, “Lucida Sans Unicode”, verdana, lucida, sans-serif;
bottom:0px;
right:20px;
}
#gallery {
}
#contentcenter p {
font: normal 12px “Lucida Grande”, “Lucida Sans Unicode”, verdana, lucida, sans-serif;
color: #999;
}
#contentleft ul
{
list-style-type: none;
text-align: left;
margin-left:7px;
margin-top:25px;
}
#contentleft ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px “Lucida Grande”, “Lucida Sans Unicode”, verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}
#contentleft ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
text-decoration: underline overline;color: #10100e;
}
#contentleft ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
p.next {
margin-right:65px;
}
p.next a:hover {
text-decoration: underline overline;color: #10100e;
color:#959494;
}
p.next a {
color:#959494;
text-decoration:none;
}
######HTML#######
<html>
<head>
<link rel=stylesheet href=”adamhoward.css” type=”text/css” media=screen>
<title> :: DigitalEyesAndEars Photograghy :: ‘ Adam Howard ‘ </title>
<SCRIPT language=”JavaScript”>
<!–
if (document.images)
{
pic1= new Image(500,277);
pic1.src=”images/images/b&w-TampaFromDock-UT.jpg”;
pic2= new Image(498,300);
pic2.src=”images/images/b&w-TwoMen-UT.jpg”;
pic3= new Image(375,480);
pic3.src=”images/images/b&w-Josh&Tommy-Sand.jpg”;
}
//–>
</script>
<script language=”JavaScript”>
// (C) 2000 [url]www.CodeLifter.com
// [url]http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 4000
// Duration of crossfade (seconds)
var crossFadeDuration = 2
// Specify the image files
var Pic = new Array() // don’t touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = ‘images/b&w-Baxter-Wood.jpg’
Pic[1] = ‘images/b&w-Josh&Tommy-Sand.jpg’
Pic[2] = ‘images/b&w-TampaFromDock-UT.jpg’
Pic[3] = ‘images/b&w-TwoMen-UT.jpg’
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter=”blendTrans(duration=2)”
document.images.SlideShow.style.filter=”blendTrans(duration=crossFadeDuration)”
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout(‘runSlideShow()’, slideShowSpeed)
}
</script>
</head>
<Body onload=”runSlideShow()”>
<div id=”wrapper”>
<div id=”contentleft”>
<ul id=”navlist”>
<li><a href=”photographer.html”>The Photographer</a></li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=”blog.html”>Blog</a></li>
<li><a href=”links.html”>Links</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
<div id=”contentcenter”>
<div id=”contentimage”>
<img src=”images/b&w-Baxter-Wood.jpg” name=’SlideShow’>
</div>
<div id=”footer”>
<p> // All Images Coprighted by Adam Howard 2005 \</p>
</div>
</div>
</div>
</body>
</html>