Note that there are some explanatory texts on larger screens.

plurals
  1. POText over image and CSS always centered image
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload