0

CSSを中心とした本の画像を使用していますが、本の向かい合う2つの「ページ」に2つのテキスト領域を列として表示する必要があります。

また、これらのテキスト領域をJavaScriptで追加して、ページの下部にある[次へ]ボタンと[戻る]ボタンで変更できるようにしたいと思います。

私はあなたが見ることができるサンプルページを持っています。

このページのHTMLは次のとおりです。

<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>

このページのCSSは次のとおりです。

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

また、写真の近くまたは上に2つのボタンを配置したいと思います。彼らは「次へ」と「戻る」と言い、本の次のページと前のページにリンクします。

これを行う簡単な方法がある場合は、私に知らせてください。

とにかく事前に感謝します。

4

3 に答える 3

0

比率と位置が画像（画像を覆う）と等しいように画像の上にdivを置き、そのdiv内のテキストを中央に配置します。次のようなレイアウトが必要です。

<div class='container'>
    <div class='text'>I am the text</div>
    <img src='myimg.png'>
</div>

および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;}

ロード時のjavascriptは、兄弟画像の幅と高さに一致するように「.text」divのサイズを変更します。

ロード時の実際の寸法を取得するには、画像に割り当てられたロード方法を使用する必要があります。ここで「画像読み込みイベント」を検索するとサンプルが見つかります。

于 2012-05-24T09:04:16.960 に答える
0

2つのスパンを作ってみませんか？

<span class="left-page-text"></span>
<span class="right-page-text"></span>

cssの場合

span{
float: left;
width: 50%; }

ページごとにもっとカスタムなものが必要な場合は、ページに追加されたクラスを使用してください。これがお役に立てば幸いです。

于 2012-05-24T09:08:54.093 に答える
0

私があなたの両方のアイデア（tpaksu | Axente Paul）を採用し、それらを自分のバージョンに追加したことを誰もが知っているように。他の人がそれがどのように行われるかを正確に見ることができるように、これがコードです。

以下のHTML...

<!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>

そして以下のCSS...

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

ですから、改めてお二人に感謝します。今私は知っています、そしてこれを見る他の誰もが知っています。私はこのような別の本を作るつもりですが、妻の詩のために巻物の形をしています。どうもありがとう！

PS問題は、divのlmao内でdivを使用していなかったことです。それはちょうど私の心を滑らせたばかりであり、cssスパン呼び出し内で画像を呼び出すことも良い考えではありませんでした。

于 2012-05-24T23:03:31.887 に答える