2010-03-25 34 views
0

我試圖代碼我的sidebar.php,但它打破了,去一路向下跌破帖子CSS問題與WordPress的

PHP:

<!-- begin sidebar --> 
<div id="menu"> 
<?php /* Widgetized sidebar, if you have the plugin installed. */ 
    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : ?> 

    <label for="s">SEARCH</label> 
    <form id="searchform" method="get" action="#"> 
     <div> 
     <input type="text" name="s" id="s" size="15" /> 
     <br /> 
     <input type="submit" value="TYPE HERE_" /> 
     </div> 
    </form> 
    <div class="bg-sidebar"> 
    <h2>MOST READ</h2> 
    <ul> 
     <li><a href="javascript:void(0);">Worth A Thousand Words</a></li> 
     <li><a href="javascript:void(0);">Feed Your Head</a></li> 
     <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li> 
     <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li> 
     <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li> 
    </ul> 
    <h2>RECENT POSTS</h2> 
    <ul> 
     <li><a href="javascript:void(0);">Worth A Thousand Words</a></li> 
     <li><a href="javascript:void(0);">Feed Your Head</a></li> 
     <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li> 
     <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li> 
     <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li> 
    </ul> 
    <h2>ARCHIVE</h2> 
    <ul> 
     <li> 
     <?php wp_get_archives('type=monthly'); ?> 
     </li> 
    </ul> 
    <h2>LINKS</h2> 
    <ul> 
     <li><a href="http://www.t.com">t</a></li> 
     <li><a href="http://www.tt.com">tt</a></li> 
    </ul> 
    </div> 
    <?php endif; ?> 
</div> 

CSS:

* { margin: 0; padding: 0; } 
body, input { font-family: "Trebuchet MS"; font-size: 12px; } 
.move { clear: both; height: 0; float: none !important; } 
body { background: url(images/bg.gif); width: 991px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -495px; padding: 0 0 71px 0; } 
a { text-decoration: none; } 
li { list-style: none; } 
img { border: 0; } 

#searchform { float: left; width: 366px; height: 27px; } 
#searchform * { float: left;} 
#searchform label { width:75px; height: 26px; border: solid 1px #ab0000; border-width: 1px 1px 0 0; text-align: center; line-height: 25px; font-weight: bold; font-size: 18px; color: #ab0000; background: white; } 
#searchform p { border-bottom: solid 1px #ab0000; width: 290px; height: 25px; } 
#searchform input { border: 0; margin: 6px 0 0 10px; display: inline; width: 234px; font-weight: bold; color: #999999; background: transparent; outline: none; height: 16px; } 
#searchform button { background: url(images/btn_vai.gif); width: 34px; height: 24px; border: 0; margin: 0 0 2px 0; float: right; } 

#menu { width: 366px; height: 40px; float: left; margin: 1px 0 0 0; } 
.bg-sidebar { background: white; width: 366px; padding: 50px 0 0 0; } 
#menu h2 { color: #ab0000; font-size: 18px; line-height: 18px; padding: 0 0 10px 15px; } 
#menu ul { border-top: solid 1px #d5d5d5; padding: 0 0 38px 0; } 
#menu li { border-bottom: solid 1px #f3f2f2; line-height: 30px; font-size: 13px; font-weight: bold; padding: 0 0 0 24px; } 
#menu li a { color: black; } 

有人可以幫我解決這個問題嗎?

+2

歡迎來到SO。請解釋發生了什麼,並提供一個鏈接來查看或截圖。我不認爲任何人都能夠解析他們頭腦中的HTML和CSS並找出錯誤。 – 2010-03-25 15:10:01

+0

也取決於您的網站和內容容器(帖子所在的位置)的範圍。沒有這些知識,我懷疑這裏的任何人都可以幫助你。 – Boldewyn 2010-03-25 15:10:51

回答

1

落在Wordpress內容下的側邊欄往往只是一個缺失的關閉</div>標籤或兩個。使用The W3C Markup Validation Service的xhtml驗證程序來查看您的網站和頁面。選中選項中的「顯示源」框,你會得到一個代碼列表,它會指出你的哪個主題文件有問題。將頁面與正確的側邊欄位置以及一個已損壞的頁面進行比較。

0

側欄可能會被撞倒的另一個原因是它太寬而無法在空間內浮動。我無法從你提供的代碼中知道,但如果頁面的全部寬度設置爲966px,側邊欄爲366px,則主區域內容應該爲600px(或更少,取決於邊距和填充)。嘗試使邊欄或主體內容更窄。

如果這些建議都不起作用,我建議在這裏發佈一個鏈接到您的頁面。這樣你會得到更好的答案。

0

我面臨同樣的問題。一旦我減少了部件區域中的身體寬度和浮動元素,我的固定。也嘗試在CSS中使用位置元素。經過幾次嘗試後,礦井被固定。