動態側邊欄添加到Exisiting WordPress主題

Question

我使用SoulVision WordPress主題，我想一個底部側邊欄添加到現有的頂部，左側和右側的側邊欄，但是，我不能讓它順利進行。任何幫助，將不勝感激。我的編碼如下。

的style.css

/*-- Sidebar settings --*/ 
#sidebar { 
    float:right; 
    width:400px; 
    color:#DEDABF; 
    margin-top:0px; 
    position:relative; 
    font-size:11px; 
} 
#sidebar a:hover { 
    color: #C58556; 
    text-decoration: none; 
} 
#sidebar h2 { 
    font-size:14px; 
    font-weight:bold; 
    border:1px solid #8E6140; 
    margin:0; 
    padding:3px 0 6px 8px; 
    background: url(images/h2-bg.jpg) repeat-x left top; 
} 
#sidebar ul li strong { 
    color:#FC0; 
} 
#sidebar-top { 
    width:390px; 
    padding:5px; 
} 
.sidebar-top-box { 
    margin-bottom:10px; 
    padding:0; 
    border-top: none; 
    border-right: 1px solid #8E6140; 
    border-bottom: 1px solid #8E6140; 
    border-left: 1px solid #8E6140; 
} 
.box-padding { 
    padding:7px; 
} 
.sidebar-top-box p { 
    margin-top:3px; 
    margin-bottom:3px; 
} 
#sidebar-top h2 { 
    margin-top:10px; 
    color:#CFA97E; 
} 
#sidebar-top .textwidget { 
    margin-bottom:10px; 
    padding:7px; 
    border-right: 1px solid #A1674F; 
    border-bottom: 1px solid #A1674F; 
    border-left: 1px solid #A1674F; 
} 
#sidebar-top ul ul { 
    list-style-type:none; 
    margin-bottom:10px; 
    padding:10px 7px 7px 12px; 
    border-right: 1px solid #8E6140; 
    border-bottom: 1px solid #8E6140; 
    border-left: 1px solid #8E6140; 
} 
#sidebar-top ul ul li { 
    padding-left:10px; 
    list-style-type:none; 
    background-image:url(images/lidot.gif); 
    background-repeat:no-repeat; 
    background-position:left top; 
    padding-bottom:3px; 
} 
#sidebar-top ul li a { 
    text-decoration:none; 
} 

#sidebar-top .box-ads a{ 
    text-decoration:none; 
} 
#sidebar-left { 
    float:left; 
    width:215px; 
    padding:0 10px 0 5px; 
} 
#sidebar #sidebar-left h2, #sidebar #sidebar-right h2 { 
    margin:15px 0 10px; 
    color: #CFA97E; 
} 
#sidebar-right { 
    float:right; 
    width:153px; 
    padding:0 5px 0 10px; 
} 
#sidebar-left ul ul, #sidebar-right ul ul { 
    padding-left:5px; 
} 
html, #sidebar ul, #sidebar-wrap ul, .rel-posts ul { 
    margin:0; 
    padding:0; 
} 
#sidebar-right li, #sidebar-left li { 
    background:url(images/lidot.gif) no-repeat left top; 
    list-style:none; 
    margin:0; 
    padding:0 0 5px 8px; 
} 
#sidebar-left .children, #sidebar-right .children { 
    padding-top: 8px; 
} 
#sidebar-left ul.children li, #sidebar-right ul.children li { 
    padding-bottom: 3px; 
    padding-top: 0px; 
} 
#sidebar h2 a.rsswidget { 
    color: #CFA97E; 
    text-decoration: none; 
} 
#sidebar .rsswidget img { 
    float: left; 
    margin-top: 2px; 
    margin-right: 7px; 
} 
/*-- Bottom Sidebar --*/ 
#sidebar-bottom { 
    width:390px; 
    padding:5px; 
} 
.sidebar-bottom-box { 
    margin-bottom:10px; 
    padding:0; 
    border-top: none; 
    border-right: 1px solid #8E6140; 
    border-bottom: 1px solid #8E6140; 
    border-left: 1px solid #8E6140; 
} 
.box-padding { 
    padding:7px; 
} 
.sidebar-bottom-box p { 
    margin-top:3px; 
    margin-bottom:3px; 
} 
#sidebar-bottom h2 { 
    margin-top:10px; 
    color:#CFA97E; 
} 
#sidebar-bottom .textwidget { 
    margin-bottom:10px; 
    padding:7px; 
    border-right: 1px solid #A1674F; 
    border-bottom: 1px solid #A1674F; 
    border-left: 1px solid #A1674F; 
} 
#sidebar-bottom ul ul { 
    list-style-type:none; 
    margin-bottom:10px; 
    padding:10px 7px 7px 12px; 
    border-right: 1px solid #8E6140; 
    border-bottom: 1px solid #8E6140; 
    border-left: 1px solid #8E6140; 
} 
#sidebar-bottom ul ul li { 
    padding-left:10px; 
    list-style-type:none; 
    background-image:url(images/lidot.gif); 
    background-repeat:no-repeat; 
    background-position:left top; 
    padding-bottom:3px; 
} 
#sidebar-bottom ul li a { 
    text-decoration:none; 
} 

#sidebar-bottom .box-ads a{ 
    text-decoration:none; 
} 

的sidebar.php

<div id="sidebar"> 
    <div id="sidebar-top"> 
    <ul id="top-sidebarwidgets"> 
     <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_top')) : else : ?> 
     <?php endif; ?> 
    </ul> 
    </div> 
    <div style="clear:both;"></div> 
    <div id="sidebar-left"> 
    <ul id="l_sidebarwidgets"> 
     <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_left')) : else : ?> 
     <?php endif; ?> 
    </ul> 
    </div> 
    <div id="sidebar-right"> 
    <ul id="r_sidebarwidgets"> 
     <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_right')) : else : ?> 
     <?php endif; ?> 
    </ul> 
    </div> 
    <div id="sidebar-bottom"> 
    <ul id="bottom-sidebarwidgets"> 
     <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_bottom')) : else : ?> 
     <?php endif; ?> 
    </ul> 
    </div> 
</div> 

用下面的代碼，我的側邊欄顯示這樣的 - i.imgur.com/omMfa.png

但如果我改變的sidebar.php代碼這個

<div id="sidebar"> 
     <div id="sidebar-top"> 
     <ul id="top-sidebarwidgets"> 
      <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_top')) : else : ?> 
      <?php endif; ?> 
     </ul> 
     </div> 
     <div style="clear:both;"></div> 
     <div id="sidebar-bottom"> 
     <ul id="bottom-sidebarwidgets"> 
      <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_bottom')) : else : ?> 
      <?php endif; ?> 
     </ul> 
     </div> 
     <div id="sidebar-left"> 
     <ul id="l_sidebarwidgets"> 
      <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_left')) : else : ?> 
      <?php endif; ?> 
     </ul> 
     </div> 
     <div id="sidebar-right"> 
     <ul id="r_sidebarwidgets"> 
      <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_right')) : else : ?> 
      <?php endif; ?> 
     </ul> 
     </div> 
    </div> 

然後側邊欄將顯示像這樣 - i.imgur.com/UATs6.png

因此，在我看來有一個問題，當它添加到現有的下面時，有一個問題。任何幫助將是美好的。該網站可以在現場http://www.itsdaniel0.com

Answer 1

預覽你得有出地方的div和UL標籤，這將導致佈局問題的一些問題。見 [Invalid]Markup Validation of itsdaniel0.com - W3C Markup Validator。在驗證報告中向下滾動查看行號和源代碼。