Why is the styling of these nearly identical pages

2019-06-09 19:34发布

站内文章 / HTML/CSS
12 0 0

问题:

I am creating my first custom WordPress theme and can't figure out why two nearly identical category template files are being displaying differently.

The black-colored band at the bottom of this page should extend across the entire width of the page, like it does on this page, but for some reason it's not.

The code for the correctly-styled template file is as follows:

<?php get_header(); ?>

<body class="projects">

<div id="page-container">

    <?php get_sidebar(); ?>

    <div id="content">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

        <div <?php post_class(); ?>>

            <div class="post-container">

                <div class="post-title">
                    <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h3>
                </div>

                <div class="post-content">
                    <?php the_content(''); ?>       
                </div>

                <div class="post-footer">
                    <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                </div>

            </div>  

        <?php endwhile; ?>

            <div id="more-posts">
                <a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
            </div>

        </div>

        <?php endif; ?>

    </div>

</div>

The code for the incorrectly-styled template is as follows:

<?php get_header(); ?>

<body class="adventures">

<div id="page-container">

    <?php get_sidebar(); ?>

    <div id="content">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

        <div <?php post_class(); ?>>

            <div class="post-container">

                <div class="post-title">
                    <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                </div>

                <div class="post-content">
                    <?php the_content(''); ?>       
                </div>

                <div class="post-footer">
                    <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                </div>

            </div>  

        <?php endwhile; ?>

            <div id="more-posts">
                <a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
            </div>

        </div>

        <?php endif; ?>         

    </div>

</div>

Both category template files are structured the same (as far as I can tell) and use the same style sheet, so I am at a loss as to why they are being displayed differently by the browser.

Thanks.

回答1:

Adding this in place of my original answer, since you changed the question. Turns out you are missing a closing </div>. The problem doesn't manifest itself on the first page because you only have one post, but I bet if you added another, you'd see the same thing. The snippet below focuses just on your while loop, and should fix your problem if you add the closing </div> where I've indicated via a comment.

    <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class(); ?>>  <!-- *** you open this but never close it *** -->
                <div class="post-container">
                    <div class="post-title">
                        <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    </div>
                    <div class="post-content">
                        <?php the_content(''); ?>       
                    </div>
                    <div class="post-footer">
                        <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                    </div>
                </div>  
            </div> <!-- *** need to add a closing div here - I've added it for you *** -->
    <?php endwhile; ?>


回答2:

The problem is that your footer in the http://bugsandbubs.com/category/adventures/ is inside your #page-container so it's only growing 945px like it's parent.

If you move your <footer> element outside the <div id="page-container"> you should be good to go.



回答3:

The pages are ALMOST identical... but on the page with the incorrect styling you have some mistakes...

All you got wrong is the images URLs;

Because the images have a different actual size that the one you are setting up on the css... when the url is broken/wrong this messes up the page styling...

I would suggest to fix the links and also add on your style.css file on line 151:

#social img {
    width: 145px;
    height: 30px;  /* ADD THIS */
   }


回答4:

You can use a validator to check for issues, use the w3schools validator tool found here http://validator.w3.org/

enter your URL and it will show you what errors it finds.

You can select a box under where you enter your URL to show source code. This will allow you to quickly view your troubled area.

I hope this helps, Good Luck!



标签： html css wordpress wordpress-theming
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~