Text over image and CSS always centered image
Question
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.
3 answers
solution1
0 2012-05-24 09:04:16
put a div over the image with proportions and location are equal to the image (covering the image) and center the text inside that div. you need to have a layout like this:
<div class='container'>
<div class='text'>I am the text</div>
<img src='myimg.png'>
</div>
and the CSS:
.container { position: relative; }
.container .text {position:absolute;top:0px;left:0px;
margin:0px;padding:0px;text-align:center;}
.container img {margin:0px;padding:0px;}
and the javascript on load will resize the ".text" div to match the width and height of the sibling image.
You need to use a load method assigned to the image to get the real dimensions on load. you can find samples by searching "image load event" here.
solution2
0 2012-05-24 09:08:54
Why don't you create 2 spans?
<span class="left-page-text"></span>
<span class="right-page-text"></span>
for the css
span{
float: left;
width: 50%; }
In case you want something more custom for each page just use the classes added to them. I hope this will help you.
solution3
0 ACCPTED 2012-05-24 23:03:31
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!
PS 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.