1 Replies - 618 Views - Last Post: 21 April 2013 - 04:46 AM

#1 emdio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 21-April 13

Question relating to span action page, sliding pages

Posted 21 April 2013 - 03:58 AM

Hi,

I'm trying to finish my website, and to create a effect where pages are called from the main page, and they slide on the side. You can see what I have come up with so far at emiliedionne.com/test2.html

The page is still in constructed, but basically, I am missing a step about how to have each page "show up" in the next stage. I thought I could simply have a .php page for each of them (which I have created, although they aren't completed yet), but it doesn't work. Any help would be greatly appreciated! Thanks :)

Emilie

I've copied down here the main.css code and the page code itself, if you could help me identify errors/typos or missing lines. Thanks !

test2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta name="description" content="The official website of the artist, Emilie Dionne 0„8 2013. Conceptual, abstract, fantasy artwork.">
<meta name="author" content="Emilie Dionne">
<meta name="keywords" content="artwork, artist, artiste, art, syphiell, original, fantasy, fantaisie, anime, sci-fi, science fiction, adobe photoshop, painting, peintures, elfwood, epilogue, graphic tablet, tablette graphique, Deviant, deviantART, mystical, mystique, enchanting, enchantement, faeries, f¨¦es, f¨¦e, sorci¨¨re, witch, witches, creature, cr¨¦ature, creatures, doll, poup¨¦e, masquerade, mascarade, masque, mask, horror, horreur, macabre, body, statue, surr¨¦alisme, surreal, portrait, figure, faces, elfes, elves, elf, sketches, art, ¨¦milie dionne, emilie dionne, ¨¦milie, dionne, syphiell, meltholiz, lolita, aluminiaries, venus, v¨¦nus, sylvia ji, mucha, klimt, david downton, whitehurst, autumn, artwanted, freelance, freelancer, illustrator, illustration, artist, concept artist, art, artistic, artwork, draw, steampunk, drawings, manga, comics, anime, anime fanart, fanart, fan art, anime, RPG, games, myth, fairytale, fairy, fae, faeries, fata, fate, elf, fantasy, faerie, scifi, romantic, goth, dark, gothic, vampire, vamp, vampires, web designer, freelance, illustrator, webdesign, multimedia, role-playing, PS2, illustration, Photoshop, sketchbook, commission, request, aceo, cards, prints, for sale, italy, deviantart, elfwood, epilogue, artwanted, ebsq, portfolio">

 <title lang="en">+ The Art Gallery of Emilie Dionne + </title>
 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata" />
 <link rel="stylesheet" type="text/css" href="/code/fonts.css" charset="utf-8">
 <link rel="stylesheet" type="text/css" href="/code/main.css" />
 <script type="text/javascript" src="/code/prototype.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js"></script>
 <script type="text/javascript" src="/code/livepipe/livepipe.js"></script>
 <script type="text/javascript" src="/code/livepipe/scrollbar.js"></script>
 <script type="text/javascript" src="/code/lib.js"></script>
 <script type="text/javascript" src="/code/main.js"></script>
<script>
<!-- Hide Script
	function move_in(img_name,img_src) {
	document[img_name].src=img_src;
	}

	function move_out(img_name,img_src) {
	document[img_name].src=img_src;
	}
//End Hide Script-->
</script>
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="site/style.css">
<body onload="MM_preloadImages('/images/menu_on.gif';initLightbox()">
<base target="_blank">
<script language="Javascript" type="text/Javascript">
<!--

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="site/style.css">
<base target="m">
</head>

<body><div id="body"><!--
canvas: begin
--><div
    id="canvas"
    class="initial"><!--
splash: begin
--><div
    id="splash"
    class="page"><span class="mover next hidden">▼</span></div><!--
splash: end
--><!--
page [main]: begin
--><div
    id="main"
    class="page"><!--
main content: begin
-->
<div class="content">
<div align="center">
  <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td height="510">
      <div align="center">
        <table width="980" height="450" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="90">
            <table width="90" border="0" cellspacing="0" cellpadding="0">
              <tr height="90">
                <td height="90">
                <div id="01" class="img_container gallery">
                <a class="image_gallery" rel="gallery" href="gallery/thumbs/01.jpg">
                <a title="Ophelia" href="gallery/01.jpg" rel="lytebox[trad]">
                <img src="gallery/thumbs/01.jpg" border="0"/></a></div>              
                </td>
              </tr>
               <tr height="90">
                 <td height="90">
                <div id="02" class="img_container gallery">
                <a class="image_gallery" rel="gallery" href="gallery/thumbs/02.jpg">
                 <a title="Arianna II" href="gallery/02.jpg" rel="lytebox[trad]">
               <img src="gallery/thumbs/02.jpg" border="0"/></a></div>              
                </td>
              </tr>
             <tr>
                <td height="180">
                <div id="07" class="img_container gallery">
                <a class="image_gallery" rel="gallery" href="gallery/thumbs/07.jpg">
                 <a title="Awaiting" href="gallery/07.jpg" rel="lytebox[trad]">
               <img src="gallery/thumbs/07.jpg" border="0"/></a></div>                
             </td>
              </tr>
             <tr height="90">
                <td height="90">
                <div id="03" class="img_container gallery">
                <a class="image_gallery" rel="gallery" href="gallery/thumbs/03.jpg">
                 <a title="The Girl II" href="gallery/03.jpg" rel="lytebox[trad]">
               <img src="gallery/thumbs/03.jpg" border="0"/></a></div>             
                </td>
              </tr>
            </table></td>
            <td width="90"><table width="90" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="180">
                <img src="gallery/blank-cube-vert.jpg" border="0"/></a></div> 
                </td>
              </tr>
              <tr height="90">
                <td height="90">
                <img src="gallery/blank-cube.jpg" border="0"/></div>                
                </td>
              </tr>
              <tr height="90">
                <td height="90">
                <img src="gallery/blank-cube.jpg" border="0"/></div>                
                </td>
              </tr>
             <tr height="90">
                <td height="90">
                <img src="gallery/blank-cube.jpg" border="0"/></div>                
                </td>
              </tr>
            </table></td>
            <td width="90"><table width="90" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="90">
                <div id="04" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="gallery_1/bild/04.jpg">
                <img src="Gallery_1/thumb_1/04.jpg" border="0"/></a></div> 
                </td>
              </tr>
              <tr>
                <td height="90">
                <div id="05" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/05.jpg">
                <img src="Gallery_1/thumb_1/05.jpg" border="0"/></a></div> 
                </td>
              </tr>
              <tr>
                <td height="90">
                <div id="08" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/08.jpg">
                <img src="Gallery_1/thumb_1/08.jpg" border="0"/></a></div> 
                </td>
              </tr>
              <tr>
                <td height="180">
                <div id="11" class="img_container groesse_2">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/11.jpg">
                <img src="Gallery_1/thumb_1/11.jpg" border="0"/></a></div> 
                </td>
              </tr>
              </table></td>
            <td width="360"><table width="360" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="90">
                <table width="360" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="90">
                    <div id="16" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/16.jpg">
                <img src="Gallery_1/thumb_1/16.jpg" border="0"/></a></div> 
                    </td>
                    <td width="90">
                    <div id="17" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/17.jpg">
                <img src="Gallery_1/thumb_1/17.jpg" border="0"/></a></div> 
                    </td>
                    <td width="180">
                    <div id="18" class="img_container groesse_3">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/18.jpg">
                <img src="Gallery_1/thumb_1/18.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="360" width="360">
                <div style="float: left; padding:5px; margin:0px; height: 350px; width: 350px">
                <img id="large_pic" src="img/start_gallery1.jpg" width="350" height="350" border="0"/></div>                   
                </td>
              </tr>
              <tr>
                <td height="90"><table width="360" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="180">
                    <div id="19" class="img_container groesse_3">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/19.jpg">
                <img src="Gallery_1/thumb_1/19.jpg" border="0"/></a></div> 
                    </td>
                    <td width="90">
                    <div id="20" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/20.jpg">
                <img src="Gallery_1/thumb_1/20.jpg" border="0"/></a></div> 
                    </td>
                    <td width="90">
                    <div id="21" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/21.jpg">
                <img src="Gallery_1/thumb_1/21.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
            <td width="180"><table width="180" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="90">
                               <table width="180" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>
                <div id="22" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/22.jpg">
                <img src="Gallery_1/thumb_1/22.jpg" border="0"/></a></div>
                </td>
                    <td>
                <div id="23" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/23.jpg">
                <img src="Gallery_1/thumb_1/23.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table>
                </td>
              </tr>
              <tr>
                <td height="270">
                <table width="180" height="270" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="90"><table width="90" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="90">
                        <div id="26" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/26.jpg">
                <img src="Gallery_1/thumb_1/26.jpg" border="0"/></a></div> 
                        </td>
                      </tr>
                      <tr>
                        <td height="180">
                        
                        <div id="31" class="img_container groesse_2">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/31.jpg">
                <img src="Gallery_1/thumb_1/31.jpg" border="0"/></a></div> </td>
                      </tr>
                    </table></td>
                    <td width="90"><table width="90" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="180">
                        <div id="27" class="img_container groesse_2">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/27.jpg">
                <img src="Gallery_1/thumb_1/27.jpg" border="0"/></a></div> 
                        </td>
                      </tr>
                      <tr>
                        <td height="90">
                        <div id="32" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/32.jpg">
                <img src="Gallery_1/thumb_1/32.jpg" border="0"/></a></div> 
                        </td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="90">
                <table width="180" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>
                <div id="35" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/35.jpg">
                <img src="Gallery_1/thumb_1/35.jpg" border="0"/></a></div> 
                    </td>
                    <td>
                <div id="36" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/36.jpg">
                <img src="Gallery_1/thumb_1/36.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table>
                </td>
              </tr>
              <tr>
                <td height="90">
                <div id="39" class="img_container groesse_3">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/39.jpg">
                <img src="Gallery_1/thumb_1/39.jpg" border="0"/></a></div> 
                </td>
              </tr>
            </table></td>
            <td width="180"><table width="180" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                <table width="180" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="90">
                <div id="24" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/24.jpg">
                <img src="Gallery_1/thumb_1/24.jpg" border="0"/></a></div> 
                    </td>
                    <td width="90">
                    <div id="25" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/25.jpg">
                <img src="Gallery_1/thumb_1/25.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td><table width="180" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>
                    <div id="28" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/28.jpg">
                <img src="Gallery_1/thumb_1/28.jpg" border="0"/></a></div> 
                    </td>
                    <td>
                    <div id="29" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/29.jpg">
                <img src="Gallery_1/thumb_1/29.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="90">
                <div id="30" class="img_container groesse_3">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/30.jpg">
                <img src="Gallery_1/thumb_1/30.jpg" border="0"/></a></div> 
                </td>
              </tr>
              <tr>
                <td><table width="180" height="90" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>
                    <div id="33" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/33.jpg">
                <img src="Gallery_1/thumb_1/33.jpg" border="0"/></a></div> 
                    </td>
                    <td>
                    <div id="34" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/34.jpg">
                <img src="Gallery_1/thumb_1/34.jpg" border="0"/></a></div> 
                    </td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td>
                <table width="180" height="180" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="90">
                    <div id="37" class="img_container groesse_2">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/37.jpg">
                <img src="Gallery_1/thumb_1/37.jpg" border="0"/></a></div> 
                    </td>
                    <td width="90"><table width="90" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="90">
                        <div id="38" class="img_container groesse_1">
                <a class="image_gallery" rel="gallery" href="Gallery_1/bild/38.jpg">
                <img src="Gallery_1/thumb_1/38.jpg" border="0"/></a></div> 
                        </td>
                      </tr>
                     </table></td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
        </table>
      </div>
<tr>
      <td valign="bottom">
      <div align="center">
        <table width="980" height="40" border="0" cellspacing="0" cellpadding="0">
          <tr height="40">
            <td><table width="980" border="0" cellspacing="0" cellpadding="0">
              <td align="right" valign="top"></td>
              </tr>
              <tr>
                <td align="left" valign="top">
                <table width="399" border="0" cellpadding="0" cellspacing="0">
                	<tr>
                		<td width="133" height="40" align="left" valign="bottom" target="_blank"><a href="mailto:emiliefineart@gmail.com" class="menu2"><img src="gallery/contact.jpg"></a></td>
                		</tr>
                		</table>
                		</td>
                <td align="right" valign="top">
                <table width="399" border="0" cellpadding="0" cellspacing="0">
                    <tr>  
                      <td align="right" valign="bottom"><span class="action page_archives"><img src="gallery/archives-logo.jpg"></span></td>
                      <td align="right" valign="bottom"><span class="action page_about"><img src="gallery/about-logo.jpg"></span></td>
                      <td align="right" valign="bottom"><span class="action page_more"><img src="gallery/more-logo.jpg"></span></td>
                    </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
        </table>
      </div>
      </td>
    </tr>
      </td>
  	</tr>
  </table>
</div></div>
<!--div class="page"></div-->
<!--
main content: end
--><!--
page [main]: end
-->
<!--
page [archives]: begin
--><div
    id="archives"
    class="page"><!--
archives content: begin
--><div
    class="header">
     <h1 title="The Art Gallery of Emilie Dionne"></h1>
     <p class="description"></p>
    </div><div

    class="content waiting">

</div><!--
archives content: end
--></div><!--
page [archives]: end
--><!--
page [about]: begin
--><div
    id="about"
    class="page"><!--
about content: begin
--><div
    class="header">
     <h1 title="The Art Gallery of Emilie Dionne"></h1>
     <p class="description"></p>
    </div><div

    class="content waiting">

</div><!--
about content: end
--></div><!--
page [about]: end
--><!--
page [more]: begin
--><div
    id="more"
    class="page"><!--
location content: begin
--><div
    class="header">
     <h1 title="The Art Gallery of Emilie Dionne"></h1>
     <p class="description"></p>
    </div><div

    class="content waiting">

</div><!--
location content: end
--></div><!--
page [more]: end
-->
<!--
menu: begin
--><div
    id="menu"
    class="hidden"><div class="ear left"></div><div class="ear right"></div><div
    id="menu_content"><ul>
        <li><span class="action page_main">Home</span></li>
        <li><span class="action page_archives">Archives</span></li>
        <li><span class="action page_about">About</span></li>
        <li><span class="action page_more">More</span></li>
    </ul></div></div><!--
menu: end
--></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6994932-2");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>


<u>main.css</ul>
/* common */
*
{
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
}
body
{
    background-color: #e1e1e1;
    color: #a0a0a0;
    font-family: "Cochin", "Corbel", "Candara", serif;
    overflow: hidden;
}
#body
{
    position: absolute;
    width: auto;
    height: auto;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url("/gallery/logo.png");
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
#canvas
{
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #a0a0a0;
}
    #canvas.being_dragged
    {
        cursor: move;
    }
.hidden
{
    display: none !important;
}
/* content */
dl
{
    margin-top: 1em;
    margin-left: 1em;

}
    h2+dl
    {
        margin-top: 1em;
    }
    dl.about
    {
        margin-top: 1.4em;
        margin-left: 5%;
        width: 90%;
    }
    dl.about+p.note
    {
        margin-top: 1em !important;
    }
dt
{
    margin-top: 1em;
    text-transform: uppercase;
}
    dl.archives dt,
    dl.more dt,
    dl.about dt
    {
        color: #6dbdef;
    }
    dl.sponsors dt
    {
        text-transform: lowercase;
    }
    dl.about dt
    {
        background-image: url("/code/divider.png");
        background-position: 0px 16px;
        background-repeat: repeat-x;
        text-transform: none;
        text-align: right;
        margin-top: 2em;
    }
    dl.about dt:first-child
    {
        margin-top: 0px;
    }
    dl.about dt>span
    {
        background-color: #ffffff;
        padding-right: 4px;
    }
    dl.about dt span.datetime
    {
        float: left;
    }
    dl.about dt span.room
    {
        padding-left: 5px;
/*         color: #4d2b1f; */
        color: #454550;
    }
dd
{
    margin-left: 4em;
}
    dl.about dd
    {
        margin-left: 0px;
    }
    dl.about dd p
    {
        margin-top: 0.6em !important;
    }
        dl.about dt.multiline+dd>p
        {
            margin-top: 0px !important;
        }
        dl.about dd p.note
        {
            border: 0px !important;
            padding-top: 0px !important;
            color: #c0c0c0;
        }
/* splash */
#loader
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #e1e1e1;
    background-image: url("/code/loader.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: 102;
}
#splash
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #e1e1e1;
    background-image: url("/gallery/logo.png");
    background-position: 50% 35%;
    background-repeat: no-repeat;
    z-index: 101;
}
.mover.next
{
    position: absolute;
    display: block;
    width: 100%;
    height: 70px;
    bottom: 0px;
    font-size: 50px;
    text-align: center;
    line-height: 70px;
    background-image: url("/code/transition.png");
    background-position: bottom;
    background-repeat: repeat-x;
}
a,
.mover.next.hover,
.action
{
    color: #81313a;
    cursor: pointer;
    text-decoration: none;
}
a:hover,
.action.hover
{
    text-decoration: underline;
}
/* pages */

}
.page .content
{
    position: absolute;
    width: auto;
    height: auto;
    top: 100px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 00px 70px 80px 70px; /* top right bottom left */
    overflow: auto;
    color: #454550;
    font-size: 16px;
    z-index: 51;
}
.page .content h2
{
    font-family: "Candara", sans-serif;
    font-size: 12px;
    line-height:normal;
    font-weight: normal;
    color: #4d2b1f;
    margin-top: 2em;
    text-transform: uppercase;
}
.page .content p
{
    text-align: justify;
    margin-top: 1em;
}
    .page .content p.note
    {
        border-top: 1px solid #e0e0e1;
        padding-top: 1em;
        margin-top: 1em;
        font-style: italic;
    }
    .page .content p.note.additional
    {
        border-top: 0px;
        margin-top: 1em;
    }

.page .content sup
{
    font-size: 60%;
}
/* main */
#main
{
    position: relative;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0px;
    background-color: #ffffff;
}
#main .header h1
{
    cursor: pointer;
}
#main .header p.description
{
   background-image: url("");
}
/* archives */
#archives
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 100%;
    background-color: #ffffff;
}
#archives .header p.description
{
   background-image: url("");
}
/* about */
#about
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 100%;
    background-color: #ffffff;
}

/* more */
#more
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 200%;
    background-color: #ffffff;
}


/* menu */
#menu
{
    position: absolute;
    width: auto;
    height: 65px;
    bottom: 0px;
    left: 90px;
    right: 90px;
    z-index: 201;
}
#menu .ear
{
    position: absolute;
    height: 65px;
    top: 0px;
    background-repeat: no-repeat;
}
#menu .ear.left
{
    width: 90px;
    left: 0px;
    background-image: url("/code/bottom_bar_left.png");
}
#menu .ear.right
{
    width: 90px;
    right: 0px;
    background-image: url("/code/bottom_bar_right.png");
}
#menu_content
{
    position: absolute;
    width: auto;
    height: 65px;
    top: 0px;
    left: 90px;
    right: 90px;
    background-image: url("/code/bottom_bar.png");
    background-repeat: repeat-x;
    overflow: hidden;
}
#menu_content ul
{
    width: 810px;
    margin: 25px auto; /* top right bottom left */
}
#menu_content li
{
    list-style: none;
    float: left;
    height: 50px;
    padding: 0px;
    background-image: none;
}
#menu_content li.current
{
    background-image: url("/code/dot.png");
    background-position: center bottom;
    background-repeat: no-repeat;
}
#menu_content li span
{
    display: block;
    height: 26px;
    margin: 2px 4px;
    text-indent: -99999px;
    background-image: url("/code/menu.png");
    background-repeat: no-repeat;
    background-position-y: 0px;
}
/* menu items */
#menu_content li span.page_main
{
    width: 81px;
    background-position: 0px 0px;
}
    #menu_content li span.page_main.hover
    {
        background-position: 0px -25px;
    }
#menu_content li span.page_archives
{
    width: 125px;
    background-position: -81px 0px;
}
    #menu_content li span.page_archives.hover
    {
        width: 125px;
        background-position: -81px -25px;
    }
#menu_content li span.page_about
{
    width: 93px;
    background-position: -207px 0px;
}
    #menu_content li span.page_about.hover
    {
        width: 93px;
        background-position: -207px -25px;
    }
#menu_content li span.page_more
{
    width: 82px;
    background-position: -300px 0px;
}
    #menu_content li span.page_more.hover
    {
        width: 82px;
        background-position: -300px -25px;
    }

/* scrollbar */
.scroll .track
{
    position: absolute;
    top: 30px;
    bottom: 5px;
    right: 5px;
    height: auto;
    width: 12px;
    background-color: transparent;
    cursor: move;
    z-index: 52;
}

.scroll .handle
{
    width: 12px;
    background-color: #e1e1e1;
    cursor: move;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    opacity: 0.9;
    -moz-opacity: 0.9;
}
.scroll .handle.selected
{
    background-color: #81313a;
}
/*
 


Is This A Good Question/Topic? 0
  • +

Replies To: Question relating to span action page, sliding pages

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3808
  • View blog
  • Posts: 13,509
  • Joined: 12-December 12

Re: Question relating to span action page, sliding pages

Posted 21 April 2013 - 04:46 AM

You have around 1000 lines there. If you want assistance you need to ask a more specific question and indicate where in your posted code the issue occurs.

If you want someone to "identify errors/typos or missing lines" there is a Post a Job forum. However, you might also validate the HTML and CSS, there are links in my signature.

BTW You should also set the character encoding for your pages.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1