HTML Forum

**Jamie-18** · 07-01-2006, 04:22 AM

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">&nbsp;</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%">&nbsp;</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%">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

I try to keep my code tidy :P
Thanks in advanced Jamie

**LadynRed** · 07-01-2006, 01:23 PM

All I keep getting on the popups is 'file not found', so I don't see the problem. In FireFox, however, there is no scrollbar anyway.

There are better ways to create a gallery than opening up new windows, which is generally frowned upon for usability and accessibility reasons.

You might want to look into this Lightbox instead.
http://www.huddletogether.com/projects/lightbox/

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!