0

したがって、ExpressionEngine を使用すると、同じテンプレートを使用してコンテンツの異なる多数の Web ページを生成できます。私の問題は、フッターを表示したい場所に表示できないことです。つまり、個別の Web ページの背景画像の下部です。

たとえば、私のページの 1 つは犬に関するもので、もう 1 つのページは猫に関するものだとします。私は犬が大好きなので、犬については 2 つの段落を書き、猫については 1 つの段落だけを書きます。背景画像を拡大し、フッターを背景画像の下部に相対的に配置したいと思います。私はcssで相対位置と絶対位置の両方をいじってみましたが、「犬」ページで正しく配置した瞬間、「猫」ページのフォーマットが台無しになりました。また、背景画像の高さを調整しようとしました。

何か不足していますか？私が気付いていないcssで、オブジェクトを別のオブジェクトに対して相対的に配置する簡単な方法があるでしょうか? 前もって感謝します。

前に述べたように、これは私が望む結果を達成しません:

#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}

#belowTitle {
position: relative;
bottom: 25px;
}

#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
 }

#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
 }

これらは両方とも、css で参照することのない div id="wrapper" 内にネストされています。着陸の詳細は、エントリごとに変更されます。また、landing_footer div は、landing_details div 内に保持されます。

アップデート： 正しいフッター

不適切なフッター

  • 赤く強調した部分は、ページから削除したいスペースを表しています。

更新: 基本的な html レイアウトは次のとおりです。

{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}

    <div id="wrapper">

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
    <div id="landing_details">

        <h3 class="LandingHeader"> {landing_page_header} </h3>
        <div id="belowTitle">
            <h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
                <div id="landingBodyCopy">
                    <div class="landingBodyCopyText"> {landing_body_copy} </div>
                </div>

            <div id="landing_footer">

                        {embed="embed/footer"}
            </div> <!-- End of landing footer>
        </div> <!--- End of below title-->
        </div> <!-- End of the landing details -->

         </div> <!-- END div wrapper -->


{/exp:channel:entries}

重ねてお礼申し上げます。この件に関するご支援をいただければ幸いです。

4

1 に答える 1

1

フッターを絶対に配置しない場合、デフォルトの位置の値は になりますstatic。これは、静的または相対的に配置された前の要素の下 (要求したように、「の一番下」) に自然に表示されることを意味します。 、どんなに大きくても。

コンテンツの長さに応じて成長する背景画像については、高さが明示的に設定されていない div は、そのコンテンツのサイズに応じて拡張されます。したがって、犬に関する 2 段落のコンテンツ div は、猫に関する 1 段落のページより大きくなります。コンテンツ div に背景画像がある場合、div はサイズに応じて背景の一部を表示するウィンドウとして機能します。より多くのコンテンツ -> より大きなコンテンツ div -> より多くの背景画像が表示されます。これは、背景画像を「成長」させるという意味ではない可能性がありますが、効果的に成長します。

背景画像に対してある種の動的スケーリングを実行したい場合は、意図を推測しているだけなので、それをどのように機能させたいかをより具体的にする必要があります。同様に、 jsFiddle または jsbin を使用して、レンダリングされたページのベアボーン バージョンを提供できると、人々が回答するのに役立ちます。ヘルプが必要なレイアウトの部分を分離し、モックアップします。

于 2012-10-05T19:02:53.473 に答える