Експертам с CSS: блоки

Блоками я называю елемент в сайдбаре, в котором содержится заголовок элемента и его содержимое. Например, блогролл – это будет название, скажем, МОИ ССЫЛКИ, и, собственно, выводимые ссылки.
Так вот у меня проблема. В моей теме сайдбар отображается как одна колонка, обтекаемая одним бордюром. Тоесть, все блоки выделены одним квадратом, грубо говоря. А мне надо, чтобы каждый блок был как бы отдельно, т.е. , я снимаю бордер с сайдбара и надеваю его на каждый блок по отдельности.
Думаю использовать этот класс:

ul.box { float:right; width:200px; border:3px solid #DCDCDC; margin:10px 0; padding:10px; } /* нужны ли последние два параметры и как их настоить?*/

Но проблема в том, что заголовок блока и его содержимое – это отдельные списки. То есть, и обтекаться они будут по отдельности…
Как мне все сделать правильно. Куда вставить этот класс? И как настроить отступы между этими блоками?

На всякий случай вот мой СSS:

/*  
Theme Name: Limau Orange
Theme URI: http://www.blogohblog.com/
Description: Limau Orange is a 3 columns WordPress theme. I love to hear of my work being used :). This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 License</a>. This means you may use it for any purpose, and make any changes you like. Just leave my Bob link under your footer :)
Version: 0.1
Author: Bob 
Author URI: http://www.blogohblog.com/

This theme was designed and built by Bob of <a href="http://www.blogohblog.com/">Blog Oh Blog</a> based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
*/

/* background:url(images/image.gif);
background-color:# */

body { font-family:'Verdana'; font-size:10px; background-color:#8B8989; }

#wrap { width:980px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2C1616; margin:0 auto; } 
/* параметры заголовков разделов*/

#header { height:56px; width:740px; position:relative; color:#FF0000; margin-bottom:3px; float:left; padding:0; }
#header h1 { text-indent:-10000px; margin:0; padding:0; }
#header h1 a { display:block; background:url(images/headr.gif) no-repeat left top; height:90px; }

#search { margin-top:30px; float:right; padding:0; }
input#searchsubmit { background:#8B8989; border:2px solid #eee; color:#333; font-size:13px; }
/* параметры кнопки поиска */

a:hover { text-decoration:none; color:#555353; border:none;}

.left { float:left; width:200px; margin:10px 0; padding:10px; }
/* параметры бордюра левого блока */

.right { float:right; width:170px; border:3px solid #DCDCDC; margin:10px 0; padding:10px; } 
/* параметры бордюра правого блока */

.right img { border:0; display:block; margin-left:auto; margin-right:auto; }

.middle { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #DCDCDC; overflow:hidden; padding:10px; font-size:11px; background-color:#FFFAFA}
/* параметры бордюра центрального блока */

.middle h2 { font-size:16px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle img { border:4px #eee solid; }
.ads { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #f3f3f3; text-align:center; padding:10px; }
.ads img { border:0; text-align:center; }
img.wp-smiley { border:0; padding:0; }

#footer { width:980px; margin-top:20px; text-align:center; clear:both; padding:10px; }
div.hr { height:3px; background:#8B8989 url(images/br.gif) repeat-x scroll center; clear:both; }
div.br { height:10px; scroll center; clear:both; }
.alignright { float:right; } 
.alignleft { float:left; } 
.gcomment { border-left:none; vertical-align:middle; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#F7F7F7; padding:3px; }
.ucomment { border-left:none; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#fbfbf1; padding:3px; } 
input#submit { background:#fc6; border:2px solid #f93; color:#fff; font-size:13px; }
ol.commentlist { margin:0 0 1px; padding:0; }
ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
ol.commentlist li.commenthead { list-style:none; margin:0; } 
ol.commentlist li.commenthead h2 { margin:0; }
span { background:#FFFFFF; }
.addthis { float:right; clear:both; }

a:link,a:active,a:visited { text-decoration:none; color:#191970; border:none; }
 /* параметры линков*/

ul.box { float:right; width:200px; border:3px solid #DCDCDC; margin:10px 0; padding:10px; } /* налаштувати останні два*/

.left h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.left ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.left ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.left ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.left ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.left ul li ul li :hover { border-bottom:#ccc 1px solid;}
/* параметры левого сайдбара*/

.right h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.right ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.right ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.right ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.right ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.right ul li ul li :hover { border-bottom:#ccc 1px solid;}
/* параметры правого сайдбара*/

div.hr hr,div.br br { display:none; }
.middle2,.middle3 { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:237px; border:3px solid #f3f3f3; overflow:hidden; padding:10px; }
.middle2 h2,.middle3 h2 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; } 
.middle2 :hover,.middle3 :hover { background:#fafafa; }
.ucomment img,.addthis img { border:0; }

И сайдбар.

<div class="left">
<ul>
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>

    
    <?php if ( is_404() || is_category() || is_day() || is_month() ||
                        is_year() || is_search() || is_paged() ) {
            ?> <li>

            <?php /* If this is a 404 page */ if (is_404()) { ?>
            <?php /* If this is a category archive */ } elseif (is_category()) { ?>
            <p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

            <?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
            <p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
            for the day <?php the_time('l, F jS, Y'); ?>.</p>

            <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
            <p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
            for <?php the_time('F, Y'); ?>.</p>

            <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
            <p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
            for the year <?php the_time('Y'); ?>.</p>

            <?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
            <p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
            for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

            <?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
            <p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives.</p>

            <?php } ?>
                
            </li> <?php }?>

            <?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

            <li><h2>Archives</h2>
                <ul>
                <?php wp_get_archives('type=monthly'); ?>
                </ul>
            </li>

            <?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

            <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
                <?php wp_list_bookmarks(); ?>

                <li><h2>Meta</h2>
                <ul>
                    <?php wp_register(); ?>
                    <li><?php wp_loginout(); ?></li>
                    <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
                    <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
                    <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
                    <?php wp_meta(); ?>
                </ul>
                </li>
            <?php } ?>
            
            <?php endif; ?>
    
    </ul>
</div>

Будет ли это все работать в виджетах?

Буду очень признателен за помощь….

Anonymous
Отправить
Ответ на: