Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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.</p> <p>HTML below...</p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;META HTTP-EQUIV="Pragma" CONTENT="no-cache"&gt; &lt;META HTTP-EQUIV="Expires" CONTENT="-1"&gt; &lt;META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"&gt; &lt;META NAME="ROBOTS" CONTENT="NONE"&gt; &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="css/popup.css" /&gt; &lt;title&gt;BookPopUp&lt;/title&gt; &lt;/head&gt; &lt;body background="images/bg.jpg"&gt; &lt;div id="bookpop"&gt; &lt;div&gt; &lt;span class="leftpagetext"&gt;Hello this is a text to see exactly where all of this is going to go!&lt;/span&gt; &lt;span class="rightpagetext"&gt;Trying to see where this goes as well! Hello this is a text to see exactly where all of this is going to go!&lt;/span&gt; &lt;img src='images/bookpopup.png'&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And the CSS Below...</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 */ } /* 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%; } </code></pre> <p>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> <p>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.</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