0

そのため、絶対配置を使用して写真を積み重ねてスライドショーを作成しようとしていますが、スライドショーの下のテキストも写真の上に積み重ねられているという問題があります。位置が相対的なラッパーdiv内に写真を入れてみましたが、何もしませんでした。誰かが問題を見つけたら、助けていただければ幸いです。

HTML コード

<div id="imageDiv">
    <div id="mainImage">
            <img class="imagePositioning" id="slideshowImg1"  src="images/tbrownMain.jpg" alt="Image of Terrell Brown" ></img>
            <img  class="imagePositioning" id="slideshowImg2" src="images/giantsMain.jpg" alt="Image of Giants" ></img>
            <img  class="imagePositioning" id="slideshowImg3"  src="images/kobeMain.jpg" alt="Image of Kobe" ></img>
            <img  class="imagePositioning" id="slideshowImg4"  src="images/nashMain.jpg" alt="Image of Nash" ></img>
            <img class="imagePositioning" id="slideshowImg5" src="images/tebowMain.jpg" alt="Image of Tim Tebow" ></img>
    </div>
    <div id="contentText">
            <a id="introText">Tim Tebow talks about Aaron Hernandez</a>
            <p id="detailsPar">Tim Tebow...</p>

    </div>
    <table id="mediaMenu">
    <tr>
        <td class="subMenu">
            <a href="#" onclick="doEverything(0)">
            <table> 
                <tr> <td class="subTitle"> Tebow Talks </td></tr>
                <tr><td><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr> 
            </table>
            </a></td>
//...4 more nested tables in same way
</tr>
</table>
</div>

CSSコード

#mainImage {
position:relative;
}
#imageDiv {
border: 5px solid black;
width:70%;
position:relative;
}
.imagePositioning  {
position:absolute;
}

#contentText {
color:orange;
float:right;
position:absolute;
left:43%;
width:26%;
top:2%;
}
#mediaMenu td {
margin:3px;
padding:0px;
width:20%;
color:blue;
font-family: Chalkduster, Verdana, Sans-serif;
text-transform:uppercase;
font-size:12px;
}

ここに画像の説明を入力

4

3 に答える 3

0

ここにいくつかのことがあります：

  1. @diodeusが指摘したように、フロートで絶対位置を使用しないでください

  2. #imageDiv私はあなたがテーブルの前にあなたを閉じるつもりだったと思います

  3. クリアする必要があります#mediaMenu {clear:both}

JsFiddle: http://jsfiddle.net/t36z/1/

于 2013-07-29T20:39:30.143 に答える
0

これが解決策です。多くの絶対位置とパーセンテージを使用して、すべてを機能させます。あなたが目指していた正確なレイアウトがわからないので、推測しました

This requires code for me to post an answer

http://jsfiddle.net/t3FNg/

于 2013-07-29T20:42:01.490 に答える