-1

ライブサイト。

理想的には、border-top と border-bottom の間に、3 つのポートフォリオのサムネイル、仕切り (.png)、および 3 つのブログのサムネイルが必要です。各セクションの右端の下には「...」(next.png) があります。

理想

現在、「最近の作業」のすぐ上にあるはずのないランダムな境界線があり、「最近のブログ」の「...」ボタンは境界線の下にあります。何が原因ですか / どうすれば解決できますか?

PHP用のHTMLを切り替える前は、すべて問題ありませんでした..

<?php if ($portfolio_query->have_posts()) : ?>
        <div id="recent">
            <div id="recent-work">
                    <p><span>Recent Work</span></p>
                    <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(130,130) ); ?></a>
                    <?php endwhile; ?>
                        <div class="next"><a href="http://www.frshstudio.com/blog/"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></a></div>
            </div><!-- end recent-work -->
        <?php endif; ?>

            <div class="divider">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/divider.png" alt="Section divider" id="divider" />
            </div><!-- end divider -->

        <?php if ($blog_query->have_posts()) : ?>
        <div id="recent">
            <div id="recent-blog">
                    <p><span>Recent Blog</span></p>
                    <?php while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(130,130) ); ?></a>
                    <?php endwhile; ?>
                        <div class="next"><a href="http://www.frshstudio.com/work/"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></a></div>
            </div><!-- end recent-blog -->
        <?php endif; ?>

&

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p {
    padding-bottom: 20px;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p {
    padding-bottom: 20px;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next {
    position: absolute;
    bottom: -40px;
    right: 0px;
}
4

3 に答える 3

1

ID を複数回使用しているため、ページが乱れています。これにより、検索エンジンがあなたを低くランク付けするために使用するエラーが生成されます. http://validator.w3.org/で確認してください。

また、上部の境界線を持つ最近の id があり、div を数回使用しています。最近をクラスに変更してから、2 つを含む「最近」の div を上部に境界線のないクラスに変更してみてください。

于 2012-06-21T21:09:37.517 に答える
1

</div>最初の締めくくりに締めくくりを追加してみてください<div id="recent">

<div id="recent">....<div id="recent">どちらも閉じずに意図せずネストしていると思います

于 2012-06-21T21:07:31.117 に答える
0

動的 PHP とハードコーディングされた HTML バージョンの出力がどのように見えるかを投稿し、それらを並べて比較します。それらの間の違いが何であれ、それが答えです。

于 2012-06-21T21:06:04.507 に答える