title: Text over image and CSS always centered image
body: <p>I am working with a book image that is centered with CSS, and I need to have two text areas displayed as columns on the two facing "pages" of the book.</p>
  
  <p>I would also like to have these text areas added with JavaScript so they can be changed by Next and Back buttons at the bottom of the page.</p>
  
  <p>I have an <a href="http://www.deadzomb1e.zymichost.com/bookpopup.html" rel="nofollow">example page</a> that you can look at.</p>
  
  <p>Here is the HTML for the page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
       &lt;title&gt;BookPopUp&lt;/title&gt;
       &lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"&gt;
       &lt;meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)"&gt;
       &lt;link rel="stylesheet" type="text/css" href="css/popup.css" /&gt;
     &lt;/head&gt;
     &lt;body background="images/bg.jpg"&gt;
       &lt;div id="bookpop"&gt;
       &lt;span&gt;&lt;/span&gt;
       &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS for the page:</p>
  
  <pre class="lang-css prettyprint-override"><code>/*website BookPopUp Image Center*/
  #bookpop {
      position: absolute;
      text-align: center;
      left: 50%;
      top: 50%;
      margin: -368.5px auto 0 -512px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */;
      width: 1024px; /* same as the image width */
  }
  #bookpop span {
      display: block;
      width: 1024px;
      height: 737px;
      margin: 0 auto;
      position: relative;
      background: transparent url(../images/bookpopup.png) 0 0 no-repeat;
      text-indent: -5000em;
      outline: 0;
  }
  </code></pre>
  
  <p>I would also like to put two buttons either near to or on top of the picture. They would say Next and Back and link to next and previous pages of the book.</p>
  
  <p>If there is an easier way to do this let me know.</p>
  
  <p>Anyway thanks in advance.</p>