0

画像のキャプションを画像に合わせてサイズ変更し、画像の下部に固定したままにする方法を見つけようとしています。これを達成できる唯一の方法は、相対位置を使用することですが、これは、その下のすべてを相対位置で上に移動する必要があることを意味し、ページが遠くまでスクロールすることを意味します。

Web サイトはhttp://bucksarms.co.ukです。ブラウザが 1400px より大きい場合は問題なく機能しますが、縮小すると画像とキャプションが正しくスケーリングされません。

これはHTMLです

<div id="hero">
            <img id="heroimage" src="images/contact.jpg" alt="The Bucks beautifull garden" />
            <?php include 'includes/header.php'; ?>


        <div id="feature">
            <div id="featuretitlecontainer">
                <div id="featuretitle">
                    Follow Us
                </div><!-- #featuretitle -->
            </div><!-- #featuretitlecontainer -->
            <div id="featurecontainer"> 
                <div id="featuretext">
                This 17th century pub is now embracing a 21st century digital age. Follow us on <a href="https://twitter.com/TheBucksArms">Twitter</a> to hear our latest offers first and keep up to date with whats going on at the Bucks. <p />
                </div><!-- #featuretext -->
            </div><!-- #featurecontainer -->

        </div><!-- #feature -->
    </div><!-- #hero -->

これがCSSです

/* header */

#header {
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70;
  position:absolute;
  top:0;
  z-index:3 !important;

}

#headercontent {

    width:960px;
    height:60px;
    margin:0 auto;
}

#logo {
    padding:23px 0 0 0;
    font-size:30px;
    width:320px;
    float:left;
    text-align:center;
    color:#FFF;
}

/* nav */

#nav {
    padding:36px 0 0 0;
    width:630px;
    float:right;
    margin:0px 0 0 0;
    text-align:right;
    color:#666;
}

/* hero */
#hero {
    width:100%;
    max-width:1400px;
    margin:0 auto;
    clear:both;
    position:relative;
    z-index:1;
    height:680px;

}

#heroimage {
    position:relative;
    top:0px;
    margin:0 auto;
    width:100%;
    z-index:1 !important;
}

/* Feature */
#feature {
    position:absolute;
    bottom:0;
    width:100%;
    margin:0 auto;
    z-index:2;
}

#featuretitle {
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70; 
    font-size:25px;
    padding:5px 10px 5px 10px; 
    color:#FFF;
    text-align:center;
    background-color:#000;
    position:relative;
    top:0;
    width:300px;
    margin:0 0 0 650px;
}

#featuretitlecontainer {
    width:960px;
    margin:0 auto;  
}

#featurecontainer
{
position:relative;
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70; 
}

#featuretext {
    padding:20px;
    margin:auto;
    width:940px;
    font-size:17px;
    color:#FFF;
    line-height:25px;
    background-color:#000;  
}

上記のコードを使用してこれを機能させる方法についてのアイデア、または相対位置によって作成されたギャップを超えてページをスクロールしないようにする方法についてのアイデアは大歓迎です。

乾杯サム

4

2 に答える 2

0

画像とキャプションを同じコンテナー内に配置すると、次のようなことができます。

.caption { 
  position: absolute; 
  bottom: 0px; 
  z-index: 3; // greater than img z-index if applicable
}

または、画像タグの代わりに div で背景画像を使用することを検討することもできます。そうすれば、キャプションが画像の前に自然に流れる可能性があります。

これまでのところ、ウェブサイトはかなりまともに見えます。良い仕事を続けてください。

于 2013-07-13T23:34:26.357 に答える