2014-09-19 75 views
0

我正在嘗試爲朋友建立一個網站,我正在使用Drupal 7構建它。 我有一個令我發瘋的CSS問題。我漂浮在右邊的二級菜單不在我的內容旁邊。相反,它顯示在我的內容下方。中級菜單在Drupal 7中無法正確顯示

我覺得我已經嘗試了一切。我有第一個菜單左浮動,二級浮動右,和邊緣上的內容自動左和右。

我也嘗試清除底層容器,但它也沒有幫助。 我在Firefox和Chrome中遇到此錯誤。

我可以在網上找到的唯一的解決方案,我還沒有嘗試過,是漂浮左前浮動,因爲我必須修補Drupal核心。

我之前實際上遇到過這個問題,並且重建了整個該死的網站,並且在試圖將我的組件集中時再次發生。

自從按'撤消'後,我改變了太多,所以如果有很多CSS知識的人可以解釋爲什麼會出現這種情況,那將會很棒。

如果你想看到的問題,就這一頁www.mohaaleague.com,在右下角,但它應該是一樣高的左側菜單....

.two-sidebars #content /*the middle element*/ 
{ 
    width: 827px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#sidebar-second /*the right sidebar*/ 
{ 
    width: 287px; 
    float:right; 
} 

#sidebar-first /*the left sidebar*/ 
{ 
    float:left; 
    width: 287px; 
} 

#main /*the underlying div that holds all the others*/ 
{ 
    width: 1650px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    clear: both; 
} 
+0

您需要發佈的HTML和CSS的相關元素。通常情況下,當您沒有爲每個項目定義寬度或者當您的邊距+寬度超過父容器時會發生這種情況。順便說一句,這幾乎肯定不是一個drupal問題。雖然drupal確實吐出了幾乎任何cms的最不必要的複雜標記,但它仍然遵循與其他系統相同的css規則 – 2014-09-19 22:40:13

+0

@Kai Qinq我添加了CSS,我不知道在哪裏可以找到HTML因爲它在Drupal的模板中,我沒有觸及過 – 2014-09-19 23:02:44

+0

你可以右鍵單擊,檢查元素並將其複製爲2個元素的整個父元素的html。對於大多數人來說可能是一個充滿眼光的人,所以我只是看看CSS,看看有沒有什麼突出的 – 2014-09-19 23:22:23

回答

0

順便說一句我從BARTIK主題開始。

好的,所以我設法通過改變page.tpl.php來解決它,這實際上是我在我的問題中提出的。

問題是float float在離開之前被調用。所以我改變了Drupal渲染頁面的順序。通過讓Drupal首先渲染我的第二個邊欄,然後渲染我的第一邊欄,然後我解決了這個問題。

我在主題改變page.tpl.php中Templates目錄尚且如此,如果你正在讀這篇文章,有同樣的問題更改代碼的順序是:

 <?php if ($page['sidebar_second']): ?> 
    <div id="sidebar-second" class="column sidebar"><div class="section"> 
    <?php print render($page['sidebar_second']); ?> 
    </div></div> <!-- /.section, /#sidebar-second --> 
<?php endif; ?> 

<?php if ($page['sidebar_first']): ?> 
    <div id="sidebar-first" class="column sidebar"><div class="section"> 
    <?php print render($page['sidebar_first']); ?> 
    </div></div> <!-- /.section, /#sidebar-first --> 
<?php endif; ?> 

<div id="content" class="column"><div class="section"> 
    <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?> 
    <a id="main-content"></a> 
    <?php print render($title_prefix); ?> 
    <?php if ($title): ?> 
    <h1 class="title" id="page-title"> 
     <?php print $title; ?> 
    </h1> 
    <?php endif; ?> 
    <?php print render($title_suffix); ?> 
    <?php if ($tabs): ?> 
    <div class="tabs"> 
     <?php print render($tabs); ?> 
    </div> 
    <?php endif; ?> 
    <?php print render($page['help']); ?> 
    <?php if ($action_links): ?> 
    <ul class="action-links"> 
     <?php print render($action_links); ?> 
    </ul> 
    <?php endif; ?> 
    <?php print render($page['content']); ?> 
    <?php print $feed_icons; ?>