Home/ Questions/Q 8015733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T20:20:06+00:00

I am working with a book image that is centered with CSS, and I

  • 0

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.

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.

I have an example page that you can look at.

Here is the HTML for the page:

<html>
  <head>
     <title>BookPopUp</title>
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
     <meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">
     <link rel="stylesheet" type="text/css" href="css/popup.css" />
   </head>
   <body background="images/bg.jpg">
     <div id="bookpop">
     <span></span>
     </div>
   </body>
</html>

Here is the CSS for the page:

/*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;
}

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.

If there is an easier way to do this let me know.

Anyway thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just so everyone knows I took both of your ideas (tpaksu | Axente Paul) and added them to my own version. Here is the code so that others can see exactly how it is done.

    HTML below…

    <!DOCTYPE html>
<html lang="en">
  <head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META NAME="ROBOTS" CONTENT="NONE">
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <title>BookPopUp</title>
  </head>
  <body background="images/bg.jpg">
    <div id="bookpop">
      <div>
        <span class="leftpagetext">Hello this is a text to see exactly where all of this is going to go!</span>
        <span class="rightpagetext">Trying to see where this goes as well! Hello this is a text to see exactly where all of this is going to go!</span>
        <img src='images/bookpopup.png'>
      </div>
    </div>
  </body>
</html>

    And the CSS Below…

    /*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 */
}
/* Span container class for text Left Side */
.leftpagetext {
    float: left;
    position: absolute;
    top: 120px;
    left: 100px;
    text-align: justify;
    width: 35%;
}
/* Span container class for text Right Side */
.rightpagetext {
    float: right;
    position: absolute;
    top: 120px;
    right: 100px;
    text-align: justify;
    width: 35%;
}

    So again thanks a lot to both of you. Now I know and everyone else who see’s this knows. I am going to be doing another book like this but in a scroll form for my wife’s poems. Thanks a lot guys!

    P.S. The problem was i wasn’t using div’s inside of the div’s lmao. It had just slipped my mind and also calling the image inside of a css span call wasn’t a good idea.

    • 0