div重疊頁腳，儘管style =「clear：both」？

我正在爲joomla 2.5.6編寫自己的模板。我不確定這個問題是Joomla還是簡單的CSS相關。div重疊頁腳，儘管style =「clear：both」？

該模板很簡單，它有一個左側邊欄和右側內容以及一個頁腳。現在，當內容很短並且邊欄上有幾個模塊時，模塊會重疊頁腳。

它看起來像這樣：

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; 
}

我失去了這一點，因爲它應該是因爲頁腳上方的結算類的工作，但它沒有.. Unfortunatedly我沒有在線爲例，其所有的本地

任何人的想法我怎麼會發現錯誤？謝謝你這麼多

附加信息：

對不起，我忘了，

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

在grid.css定義，看起來是這樣的：

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

我編輯問題標題也對不起，錯了

Addi重刑！

我想添加問題的屏幕截圖。請看看這裏：

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

你看，。左菜單定位絕對和開始。頭，標識類中。左側菜單不應該進入紫色頁腳。

如何通過左側菜單告訴內容div高度相等？

來源

2012-09-13 Owl

使用Clear:both而不是clear:all這不是MHO中的樣式定義。

來源

2012-09-13 06:47:30

謝謝，這是我的錯誤，我沒有使用clear：all，我使用從960網格系統定義的清晰類。我在問題 – Owl

從看起來，你可能會把'clear'div放在一個錯誤的地方，但很難說，沒有看到包含所有css的實際頁面，包括網格。也許你可以實際生成頁面，保存到本地磁盤並將其放到網上？

來源

2012-09-13 11:10:06 prezes

中更改了謝謝！我想我知道問題在哪裏。現在構建CSS時，左側菜單是在帶有標題圖像的div中生成的，因爲它必須與標題圖像重疊。內容是在下面的div創建的，所以沒有辦法告訴父母div來清除浮動，因爲左邊的菜單和內容有不同的parend divs ...所以我的問題是網站的基本設置。但我不能改變父母的div，因爲我需要菜單重疊上面的父母...嗯 – Owl

我會很高興，如果任何人有想法...我試圖添加另一個div作爲一個容器，可以清除和從而告訴頁腳從哪裏開始，但它並沒有幫助... – Owl

我添加了一個截圖到我的貼子解釋了這個問題。如果有人能提供幫助，我會非常高興 – Owl

div重疊頁腳，儘管style =「clear：both」？

回答

相關問題