15

左、中央、右に配置されたフッター コンテナー DIV に 3 つの DIV を作成する必要があります。私が見た CSS の例はすべて、私が行ったようにフロートを利用しています。ただし、何らかの理由で DotNetNuke が CSS を正しく解析していません。左ペインは正しくフローティングされていますが、右ペインと中央ペインは隣ではなくすぐ下に配置されています。これが私の ascx ファイルのスニペットです。

<div id="footer">
<div id="footerleftpane" runat="server">
    <dnn:LOGO id="dnnLogo" runat="server" />
    <h3>Driving business performance.</h3>
    <h3>Practical Sales and Operations Planning</h3>
    <h3>for medium sized businesses.</h3>
</div>
<div id="footerRightPane" runat="server">
    <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
    <dnn:PRIVACY id="dnnPrivacy" runat="server" />
    <dnn:TERMS id="dnnTerms" runat="server" />
</div>
<div id="footerMidPane" runat="server">
</div> 
</div>

私のCSSファイルの関連部分は次のとおりです。

#footer
{
width: 960px;
border: 1px;
}
#footerleftpane
{
width: 300px;
float: left;
}
#footerRightPane
{
width: 300px;
float: right;
}
#footerMidPane
{
padding:10px;
}

目的のレイアウトを実現するには、上記にどのような変更を加える必要がありますか?

更新: 提案された変更を試みましたが、この salesandoperationsplanning.net ページに示されているようにレイアウトがまだ機能していません。

4

3 に答える 3

21

まず、HTMLに表示される要素の名前をターゲットにする必要があります。CMSが何らかのプレフィックスを追加していて、IDが一致していないようです。（#footerleftpaneがありますが、＃dnn_footerleftpaneとしてレンダリングされます）

また、固定幅のコンテナを使用しているため、中央のコンテナに幅を渡さないことによるトラブルは発生しません。幅を指定して、機能するかどうかを確認します。そうでない場合は、ブロックが正しいソース順序（左、中央、右）にある場合、さらに2つの方法を試すことができます。

  1. 幅とパディングがコンテナに収まるように、それらをすべて左にフロートさせることができます。

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  width: 300px;
  float: left;
  ....
}

  2. display：inline-blockを使用できます。また、コンテナの幅とパディングに合わせてください。

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  ....
  display: inline-block;
  ...
}
于 2012-05-29T18:12:26.877 に答える
1

それは、位置、寸法、および間違った css 宣言の問題です。

1) 位置 ページ ソースの右ペインの後に中央ペインがあります。

2) 寸法 私は簡単なテストを行い、さらに調査することができますが、300px はサイド ペインの幅に対して大きすぎます。コンテンツの何かが幅を変更する可能性があります。

3) css 宣言 DotNetNuke (実際にはすべての ASP.Net コントロールが行う) サーバー側コントロール (runat="server" として宣言) をレンダリングし、それらに一意の ID を割り当てます。 .

中央のペインをちょう​​ど...他の2つの真ん中に再配置した後、CSSを次のように変更します。

    #footer
    {
        width: 960px;
        height: auto;
        margin:0;
        padding:0;
        border: 0;
    }

    #dnn_footerleftpane, #dnn_footerRightPane{
        width: 290px;
        float: left;
    }

    #dnn_footerMidPane
    {
        width: auto;
        float: left;
    }
于 2012-05-30T23:08:45.170 に答える
0

フッターコンテナは960ピクセルです。左右の要素は300ピクセルですが、中央の要素の幅を指定していないため、デフォルトでは親の全幅になり、それ自体が新しい行にプッシュされます。

パディングを差し引くと、中央の要素の幅が340ピクセルを超えることはできません。

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​
于 2012-05-29T19:29:25.193 に答える