1

こんにちは、Wordpress のテーマを変更していて、コンテンツの中央セクションの境界線を提供する外側のコンテナー イメージを配置するのに問題があります。問題は、背景画像がコンテンツと共に拡張されず、ブラウザ画面の下部で停止することです。このサイトは次の場所にあります: http://www.richmindonline.com/test

私はこれまでこの方法で背景画像を構成したことがないので、この問題に無知で申し訳ありません。

背景画像構造の CSS ID は次のとおりです。

 #main {border:1px solid blue; width:900px; display:block; margin:0px auto;}

#container {
        width: 600px;
    float:left;
    border:0px solid red;
}

#content-before {
    border:0px solid yellow;
    content:"";
    position:absolute;
    display:block;
    top:150px;
    left:185px;
    bottom:0px;
    width:20px; 
    height:auto;
    background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') 0px 0px repeat-y;

}


#content {
width:590px;
    border:0px solid green;
    }


#primary {
float:right;
overflow: hidden;
width: 250px;
    border:1px solid brown;
}


#content-after {
    border:0px solid yellow;
    content:"";
    float:left;
    position:absolute;
    display:block;
    top:150px;
    left:1145px;
    bottom:0px; 
    width:20px; 
    height:auto;
    background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') -20px 0px repeat-y;
}

#footer {
clear: both;
width: 100%;
}

ここに私の index.php HTML div 構造があります:

<?php get_header(); ?>

<div id="container">

  <div id="content-before"></div><!-- #content-before-->
         <div id="content">




             <?php /* Top post navigation */ ?>
             <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                <div id="nav-above" class="navigation">
                   <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                   <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
                </div><!-- #nav-above --><?php } ?>




             <?php /* The Loop — with comments! */ ?>
             <?php while ( have_posts() ) : the_post() ?>
             <?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>
                <div id="post-<?php the_ID(); ?>" 
                    <?php post_class(); ?>>
                    <?php /* an h2 title */ ?>
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a>
                </h2> 

                     <?php /* Microformatted, translatable post meta */ ?>
                <div class="entry-meta">
                    <span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
                    <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
                    <span class="meta-sep"> | </span>
                    <span class="meta-prep meta-prep-entry-date">
                          <?php _e('Published ', 'your-theme'); ?></span>
                    <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
                          <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
                </div><!-- .entry-meta --> 

                          <?php /* The entry content */ ?>

                                 <div class="entry-content">
                                    <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'your-theme' )  ); ?>
                                    <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>');?>                                    </div><!-- .entry-content --> 

                                    <?php /* Microformatted category and tag links along with a comments link */ ?>

                <div class="entry-utility">
                    <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">
                        <?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?>
                    </span>                        

                    <span class="meta-sep"> | </span>

                        <?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
                    <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>                

                        <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
                </div><!-- #entry-utility -->


            </div><!-- #post-<?php the_ID(); ?> --> <?php /* Close up the post div and then end the loop with endwhile */ ?>
   <?php endwhile; ?>

         <?php /* Bottom post navigation */ ?>
         <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
            <div id="nav-below" class="navigation">
                <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
            </div><!-- #nav-below --><?php } ?>

         </div><!-- #content --> 

      <div id="content-after"></div>

    </div><!-- #container -->



     <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->



<?php get_sidebar(); ?>
<div style="clear:both"></div>


<?php get_footer(); ?>
4

1 に答える 1

1

ブラウザー ウィンドウの高さを返すため、外側の列をページの全長に引き伸ばすために使用している 100% の min-height 値は機能しません。

おそらく、テンプレート ファイルのコードを投稿して、div 構造が解決策を提供するのに役立つことを簡単に確認できるようにします。

于 2012-05-24T05:23:07.430 に答える