0

joomla 2.5.6 用の独自のテンプレートを作成しています。この問題が Joomla なのか、単に css に関連しているのかはわかりません。

テンプレートはシンプルで、左側にサイドバー、右側にコンテンツ、フッターがあります。コンテンツが短く、サイドバーに複数のモジュールがある場合、モジュールがフッターに重なるようになりました。

次のようになります。

http://imageshack.us/photo/my-images/269/screenshotmdph.jpg/

index.php の html は次のようになります。

<body>
<div class="container_6">
    <div class="grid_6 header">
        <a href="<?php echo $this->baseurl ?>" title=""><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/assets/images/logo.png" alt="home" id="logo"/></a>
        <jdoc:include type="modules" name="menu" />
    </div>
</div>
<div class="container_6">
    <div class="grid_6 head_logo">
        <jdoc:include type="modules" name="header_logo" />
        <div class="left_menu">
            <div class="left_menu_content">
                <jdoc:include type="modules" name="left_menu" style="xhtml" />
            </div>
        </div>
        <div class="right_module">
            <jdoc:include type="modules" name="right" />
        </div>          
    </div>
</div>
<div class="container_6">
    <div class="grid_6">
        <div class="content">
            <div class="content_holder">
                <!-- beginn content -->
                <div class="container_6">
                    <div class="content_component">
                        <jdoc:include type="modules" name="breadcrumb" />
                        <jdoc:include type="component" />
                    </div>
                </div>
            </div>          
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="container_6">
    <div class="grid_6">
        <div class="footer">
        </div>
    </div>
</div>

クラスが明確な 960 グリッド システムを使用しましたが、他のクラスは次のように定義されています。

    .header {
 background: url('../images/top.png') no-repeat;
 height:93px;
 width:100%;
}

.head_logo {
    background: url('../images/shadow.png') repeat-y;
    padding-right:10px;
    padding-left:12px;
    z-index:1;
    position:absolute;
}
.left_menu {
    background: url('../images/menuBg.png') no-repeat;
    width:284px;
    min-height:611px;
    top:300px;
    z-index:2;
    position:absolute;
}
.right_module {
    width:180px;
    height:40px;
    padding:10px;
    background-color:#e9e9e9;
    top:300px;
    left:730px;
    z-index:3;
    position:absolute;
}

.content {
    background: url('../images/shadow.png') repeat-y;
    min-height:500px;

}
.content_holder {
    background-color:#e9e9e9;
    width:960px;
    margin-left: auto;
    margin-right: auto;
    min-height:500px;
}

.content_component {
    width:666px;
    padding:5px 5px 5px 284px;
    margin:0 5px;
}

#logo {
    margin:15px 0 0 25px;
    float:left;
}

.footer{
    background: url('../images/bottom.png') no-repeat;
    width:100%;
    height:92px;
}

フッターの上のクリアリングクラスのために機能するはずですが、機能しません..残念ながら、オンラインの例はありません。すべてローカルです

エラーを見つける方法を知っている人はいますか? どうもありがとう

追加情報：

すいません、忘れてました、

<div class="clear"></div>

grid.css で定義され、次のようになります。

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

質問のタイトルも編集しました、申し訳ありませんが間違っていました

添加！！

問題のスクリーンショットを追加したかったのです。ここを見てください：

http://www.bilder-hochladen.net/files/jegt-i-6f49-jpg.html

ご覧のとおり、.left-menu は絶対位置に配置され、.head-logo クラス内で始まります。.left-menu は紫色のフッター内に入るべきではありません。

コンテンツ div の高さが左メニューと同じになるようにするにはどうすればよいですか?

4

2 に答える 2

1

MHO のスタイル定義ではない whichClear:bothの代わりに使用します。clear:all

于 2012-09-13T06:47:30.140 に答える
0

どうやら、「クリア」な div を間違った場所に配置している可能性がありますが、グリッドのものを含むすべての css が添付された実際のページが表示されないとは言えません。実際にページを生成し、ローカル ディスクに保存してオンラインにできるのではないでしょうか?

于 2012-09-13T11:10:06.237 に答える