0

左半分にテキストとボタンがあり、右半分にアニメーション画像がある単純なWebページを取得しようとしています(スライドします)。現時点では、Web ページのサイズを変更しようとすると、最初のメディア タグに到達するまで、背景が右の td を超えてブリードアウトします。右の td が固定幅であるのに対し、左の td は 100% に設定されているため、なぜこれが発生するのかわかりません。ページサイズが大きくなるにつれて左側の td が広がり、右側の td が右側のサイズにとどまり、一定の幅を維持するようにしたいと思います。

コードはこちら（長文ですみません）

HTML:

<table border="0" cellpadding="0" cellspacing="0">
<tr height = "500px">
    <td width = "100%" style="padding: 0 25px 0 40px">  
        <h1>Header.</h1>
        <p>Text.</p>
        <ul>
            <li>List item.</li>
            <li>List item.</li>
            <li>List item.</li>
        </ul>           
        <a href="url" class="button">buttonText</a> 
        <div class="logo"><img width="35%" style="max-width: 200px" src="../img/logo.png"/></div>           
    </td>
    <td width="550px">
        <div class='image-window'>
            <div id="i_sliding_image" class="img sliding-image" ><img src="../img/img-slide.jpg"/></div>
            <div id="img-bubble1" class='img img-bubble hide'><img src="../img/img-bubble1.gif"/></div>
            <div id="img-bubble2" class='img img-bubble hide'><img src="../img/img-bubble2.gif"/></div>             
        </div>
    </td>
</tr>
</table>

CSS:

div#wrapper
{
    min-width: 960px;
    min-height: 500px;      
    color: #fff;        
}

h1
{
    width: 100%;        
    font-size: 40px;
    color: #ffffff;     
    padding: 0 0 28px 0;
    line-height: 1.1em;
    margin: 0;
}

p
{       
    padding: 0 0 1em 0;
    margin: 0;
    color: #ffffff;
    font-size: 16px;        
    width: 100%;
}

ul
{
    padding: 0 0 0 20px;
    margin: 0 0 50px 0;
    list-style-type: square;
    list-style-position: outside;
    color: #ffffff;
    font-size: 16px;        
}

a.button
{
    margin: 0px 0 0px 0;        
    font-size: 13px;        
    color: #0072C6;
    padding: 7px 19px 10px 19px;
    background: #fff;
    position: absolute;
}

@media (min-width:960px)
{
    #wrapper
    {
        max-width: 960px;
    }
    p, a, ul
    {
        font-size: 16px;
    }
    h1
    {
        font-size: 40px;
    }
    a.button
    {
        font-size: 13px;
    }
}
@media (min-width:1200px)
{
    #wrapper
    {
        max-width: 1200px;
    }
    p,a,ul
    {
        font-size: 18px;
    }
    h1
    {
        font-size: 42px;
    }
    a.button
    {
        font-size: 14px;
    }
}
@media (min-width:1600px)
{
    #wrapper
    {
        max-width: 1400px;
    }
    p,a,ul
    {
        font-size: 20px;
    }
    h1
    {
        font-size: 44px;
    }
    a.button
    {
        font-size: 15px;
    }
}

.image-window
{
    width: 550px;
    height: 500px;
    float: left;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#img-bubble1, #img-bubble2
{
    position: absolute;
    z-index: -1;
}

.img-bubble
{
    width: 206px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;   
}
.sliding-image
{
    width: 888px;
    height: 500px;
    position: absolute;
    size: auto;
}

助けてくれてありがとう。

4

1 に答える 1

0

これを修正して削除しました

#wrapper
{
    max-width: 960px;
}

から@media (min-width:960px)

私の質問がわかりにくかったら申し訳ありませんが、説明するのは困難でした。この記事を読んでくれたすべての人に感謝します。そして助けようとしてくれた Miqdad Ali に感謝します。

于 2012-11-29T18:01:53.783 に答える