2

この Web サイト ( http://melisayavas.com/web ) には、理解できない CSS フロートの問題が 2 つあります。最初のものはホームページにあります。2 つの JavaScript スライドと、その下に 1 つの大きな空白があります。なんで？

2 つ目の問題は、ニュース ページ ( http://melisayavas.com/web/?page_id=30 ) にあります。サイドバーが本来あるべき場所に浮かびません。繰り返しますが、フロートを停止している要素がわかりません。

これは、header.php の HTML コードです。

    <article class="post" id="post-<?php the_ID(); ?>">
        <div class="homepage">
            <div class="testimonials"><?php slidedeck( 58, array( 'width' => '500px', 'height' => '550px' ) ); ?>
            </div>
            <div class="images"><?php slidedeck( 66, array( 'width' => '400px', 'height' => '550px' ) ); ?>
            </div>
        </div>
    </article>

関連する CSS は次のとおりです。

article, aside, figure, footer, header, hgroup, nav, section {
display: block;
overflow: hidden;
clear: both;
} 

 .post {
border: 2px solid;
border-radius: 10px;
clear: both; 
overflow: hidden; 
padding: 20px;
margin-top: 28px;
}

.testimonials {position: relative;}
.images {position:relative;margin-left: 543px; top: -556px; width: 100%;}

ニュースページの HTML:

<div class="news-page">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="news">
    <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <?php include (TEMPLATEPATH . '/_/inc/meta.php' ); ?>
        <div class="entry">
            <?php the_content(); ?>
        </div>
    </article>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/_/inc/nav.php' ); ?>
<?php else : ?>
    <h2>Not Found</h2>
<?php endif; ?>
</div>

そしてCSS：

  .news-page {
width: 100%;
  }

  .news {
float: left;
width: 60%;
  }
  #sidebar {float: right; width: 30%;}
4

1 に答える 1

2

最初は、開発者ツールが組み込まれているため、firebug (firefox の場合) または Chrome を使用することをお勧めします。IE には、IE 開発者ツールと呼ばれる代替手段もあります。

Chrome 開発者ツールを使用しています。サイトのホームページ クラスを調べたところ、計算された幅と高さがそれぞれ 976px と 1100px であることがわかりました。あなたの .css ファイルを調べたところ、.homepage クラスの高さがどこにも設定されていないことがわかりました。つまり、div 要素には 1100px に引き伸ばされるコンテンツがあるため、高さは 1100px になります。

あなたの div.homepage にはこれが含まれています：

<div class="slidedeck_frame skin-fullwidth-sexy-black">
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px">
...
</dl>
</div>

<div class="slidedeck_frame skin-fullwidth-sexy-black">
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px">
...
</dl>
</div>

高さ 550px のこれら 2 つの要素により、.homepage 要素の高さはそれぞれ 1100px になります。

可能な修正は、.homepage の高さを直接 (たとえば 700px に) 設定することです。

質問の 2 番目の部分については、現在これがあります:
div.news-page has width: 100%, and is not set to float.
div.news は div.news-page 内にあります。
div.news の幅は 60% です。
div#sidebar は右にフロートするように設定され、幅は 30% です

解決：

.news-page
{
width: 70%; // takes 70% of it's parent element, page-wrap
float: left;
}

.news
{
width: 100%; // takes all space available by it's parent
}

#sidebar
{
width: 30%; // takes 30% of it's parent element, page-wrap
float:  right;
margin-top: 30px; // so it does not cover your navigation bar
}
于 2012-04-09T22:15:35.740 に答える