problème avec CSS sur Wordpress

Question

Je suis en train de coder mon sidebar.php mais il rompt et va tout le chemin en bas des messages

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

Quelqu'un peut-il m'aider sur celui-ci?

Answer 1

Les barres latérales situées sous le contenu de Wordpress sont souvent simplement une balise de fermeture manquante </div> ou deux. Utilisez le validateur de code xhtml au The W3C Markup Validation Service pour consulter votre site et vos pages. Cochez la case "Afficher la source" dans Options et vous obtiendrez une liste de codes qui vous indiquera quels sont les fichiers de votre thème qui ont des problèmes. Comparez une page avec le placement correct de la barre latérale et celle qui est cassée.

Answer 2

Une autre raison pour laquelle la barre latérale est en train de s'affaisser est qu'elle est trop large pour flotter dans l'espace. Je ne peux pas dire à partir du code que vous avez fourni mais si la largeur de la page est définie sur 966px et la barre latérale sur 366px, le contenu de la zone principale doit être 600px (ou moins, selon les marges et le remplissage). Essayez de réduire le contenu de la barre latérale ou du corps principal.

Si aucune de ces suggestions ne fonctionne, je recommande de poster un lien vers votre page ici. Vous obtiendrez de bien meilleures réponses de cette façon.

Answer 3

J'ai fait face au même problème. Une fois que j'ai coupé la largeur du corps et l'élément flottant dans la zone du widget, le mien a été réparé. Essayez également de jouer avec les éléments de position dans le CSS. Le mien a été réparé après quelques essais.