Hello,
I was wondering if anyone could give me some advice. A tattoo studio has asked me to make a website. Yes thats fine. With a gallery page. http://www.dragonclawtattoo.co.uk/te...e/gallery.html
I have made it so you click on the tattooist name and then the images apear using some simple javascript. The problem arises when the images apear. You can scroll down a tiny bit. I will be adding more images so you will have to scroll, when you scroll however at the top of the page all the logo, buttons etc move. They should be in a fixed posistion. Is there any way around this?
My code:
Code:
<!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>
<META NAME="TITLE" CONTENT="DragonClaw Tattoo Studio">
<META NAME="DESCRIPTION" CONTENT="Dragonclaw tattoo studio for high quality tattoo's and expert body piercing,
fully health registered with hospital sterilization.">
<META NAME="KEYWORDS" CONTENT="Dragonclaw Ripley Derbyshire tattoo studio Allen Darren Denise Body piercing nottingham road">
<META NAME="OWNER" CONTENT="tatmando@home195761.freeserve.co.uk">
<META NAME="AUTHOR" CONTENT="Allen Frith">
<META HTTP-EQUIV="EXPIRES" CONTENT="">
<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="English">
<META HTTP-EQUIV="VW96.OBJECT TYPE" CONTENT="Homepage">
<META NAME="RATING" CONTENT="General">
<META NAME="ROBOTS" CONTENT="index,follow">
<META NAME="REVISIT-AFTER" CONTENT="4 days">
<title>DragonClaw Tattoo Studio</title>
<SCRIPT LANGUAGE="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=1,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=200,height=300,left = 540,top = 362');");
}
</script>
<style>
body {
background-image: url(./topstripes.gif);
background-repeat:repeat-x;
background-position: top;
background-attachment: fixed;
background-color:#333333;
}
#Layer1 {
position:absolute;
align: center;
top:0px;
width:402px;
height:99px;
z-index:1;
left: 426px;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
border: #ffffff;
}
.style1 {
color: #000000;
font-weight: bold;
}
body,td,th {
color: #FFFFFF;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style3 {font-size: 11px}
a img {border: #ffffff; }
.posthidden {display:none;
font-size: 11px}
.postshown {display:inline
font-size: 11px}
</style>
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="Layer1"><img src="bl1.gif" width="100" height="98" /><img src="bl2.gif" width="101" height="98" /><img src="bl3.gif" width="100" height="98" /><img src="bl4.gif" width="100" height="98" /></div>
<table width="101%" border="0" cellspacing="0" cellpadding="0" class="gall">
<tr>
<td width="50%" height="83"> </td>
</tr>
<tr>
<td><div align="center">
<a href="index.html"
onMouseOver="document.home.src='o_home.gif'"
onMouseOut="document.home.src='n_home.gif'" ><img src="n_home.gif" name="home" width="100" height="24" border="0" /> </a>
<a href="index.html"
onMouseOver="document.hist.src='o_history.gif'"
onMouseOut="document.hist.src='n_history.gif'" ><img src="n_history.gif" name="hist" width="101" height="24" border="0" /> </a>
<a href="index.html"
onMouseOver="document.gall.src='o_gall.gif'"
onMouseOut="document.gall.src='n_gall.gif'" ><img src="n_gall.gif" name="gall" width="100" height="24" border="0" /> </a>
<a href="index.html"
onMouseOver="document.gb.src='o_gbook.gif'"
onMouseOut="document.gb.src='n_gbook.gif'" ><img src="n_gbook.gif" name="gb" width="100" height="24" border="0" /> </a>
<a href="index.html"
onMouseOver="document.con.src='o_contact.gif'"
onMouseOut="document.con.src='n_contact.gif'" ><img src="n_contact.gif" name="con" width="100" height="24" border="0" /> </a>
</div></td>
</tr>
</table>
<table width="101%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25%"> </td>
<td><p class="style3"><a href="javascript:expandcollapse('1')">Allens Gallery</a></p>
<span class="posthidden" id="1">
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="12%"><img src="images/allen/tumbnails/07.JPG" width="100" height="75" /></td>
<td width="16%"><img src="images/allen/tumbnails/01.JPG" width="100" height="75" /></td>
<td width="16%"><img src="images/allen/tumbnails/03.JPG" width="100" height="75" /></td>
<td width="17%"><img src="images/allen/tumbnails/04.JPG" width="100" height="75" /></td>
<td width="16%"><img src="images/allen/tumbnails/08.JPG" width="100" height="75" /></td>
<td width="23%"><img src="images/allen/tumbnails/10.JPG" width="100" height="75" /></td>
</tr>
<tr>
<td><img src="images/allen/tumbnails/11.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/13.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/15.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/17.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/18.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/19.JPG" width="100" height="75" /></td>
</tr>
<tr>
<td><img src="images/allen/tumbnails/21.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/22.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/25.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/27.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/28.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/29.JPG" width="100" height="75" /></td>
</tr>
<tr>
<td><img src="images/allen/tumbnails/30.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/31.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/32.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/33.JPG" width="100" height="75" /></td>
<td><img src="images/allen/tumbnails/34.JPG" width="100" height="75" /></td>
<td><div align="center">N/A</div></td>
</tr>
<tr>
<td><div align="center"><img src="images/allen/tumbnails/16.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/20.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/23.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/24.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/26.JPG" width="75" height="100" /></div></td>
<td><div align="center">N/A</div></td>
</tr>
<tr>
<td><div align="center"><img src="images/allen/tumbnails/00.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/05.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/06.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/09.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/12.JPG" width="75" height="100" /></div></td>
<td><div align="center"><img src="images/allen/tumbnails/14.JPG" width="75" height="100" /></div></td>
</tr>
</table>
<p> <a href="javascript:expandcollapse('1')">Hide Allens Gallery</a> </span> </p></td>
<td width="25%"> </td>
</tr>
</table>
<p> </p>
</body>
</html>
I try to keep my code tidy :P
Thanks in advanced Jamie |
